前提：
块级元素：div标签为为块级元素，在网页上表示为占满一行的
行内元素：span标签为行内元素，的长度只和字符的长度有关
小例子：
<span style="font-size:18px;"><div class="menu">阿猫</div> <span class ="menu">阿狗</span> <span class="menu">阿兔</span><span class="title">f阿牛</span></span>
立即学习“前端免费学习笔记（深入）”；
行内元素转换为块级元素的方法，例：将span标签的美容转换成也横跨一整行的方法
<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>
<span style="font-size:18px;">.ttt{ display:block;}</span>
效果：
标准流 概念：标签的排列方式，显示的时候按照书写的顺序进行排列。比如上例中的阿猫和阿狗的显示顺序以及样式页的
优先级都和标准流相关。
我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
盒子模型分为外边距：border(top，bottom，left，right)，内边距：padding（top，bottom，left，right），内容：content(width,height)，画框：margin（top，bottom，left，right）
立即学习“前端免费学习笔记（深入）”；
每个标签就相当于一个盒子。通过盒子模型来设置每个标签的内外边距。
小例子（1）：
<span style="font-size:18px;">.menu{ /*栏目样式*/ color:#00f; /*文字颜色*/ background-color :#ffd800; border-width:5px; border-color :#0ff; border-style:solid;}</span>立即学习“前端免费学习笔记（深入）”；
效果：
小例子（2）
<span style="font-size:18px;">内边距属性写法 /*padding-top: 5px; padding-left : 5px; padding-bottom : 5px;*/ /*padding: 5px;*/ /*如果据上下左右的边距一样的话可以这样写* padding:5px 6px 7px 8px; /*默认的是逆时针上右下左的顺序*/ </span>
效果：
注意：行内样式对边距，长等即盒子模型都是没有响应的。 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于盒子模型是针对块级
元素的，通过浮动可以让块级元素排成一行。脱离了标准流。
小例子：
<span style="font-size:18px;">float:left ; /*盒子向左浮动*/</span>
效果：
<span style="font-size:18px;">clear:left; /*清除浮动*/</span>
<span style="font-size:18px;">position:relative; /*相对定位*/ top:20PX;</span>
立即学习“前端免费学习笔记（深入）”；
absolute,绝对定位。相对于盒子之外更外一层盒子，脱离了标准流。
点睛：盒子模型是一个伟大的模型，通过和实际生活相结合，我们在网页设计的格式掌握的更加透彻和简单。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
143
