CSS样式表（三）(盒模型，浮动)

盒模型

网页中的所有元素可以看作一个一个的“盒子”

元素内容
填充（也称内边距）
边框
边界（也称外边距）

样式控制思路

盒子模型是网页布局的基础
盒子属性是盒子模型的关键属性

盒子属性

margin（外边距/边界）
border（边框）
padding（内边距/填充 ）

各属性又分为
四个方向

可统一设置或四边分开设置
margin属性
margin
margin-top
margin-right
margin-bottom
margin-left

border属性

border-color：边框颜色
border-width：边框宽度
border-style：边框样式 实线（solid） 虚线等
border-top：边框顶部
border-right：边框右部
border-bottom：边框底部
border-left：边框座部

缩写形式：
border: 1px solid red;
border-right: 5px dotted blue;

padding属性（内边距）

padding
padding-top
padding-right
padding-bottom
padding-left

缩写
padding-left : 5px;左边内边距
padding: 5px 10px 20px 40px：上右下左内边距
padding: 5px 10px：水平垂直内边距

元素的实际占位（实际宽、高）

盒子高度 = height属性 + 上下填充高度 + 上下边框高度
盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度

float

浮动后层级改变，原来的层级位置的空间将空出来被其他元素占用也被浮动的元素遮住，浮动后的元素将不具备块级属性。（注意文字只会环绕不会被遮住）

浮动的三大显著特征

解决被覆盖无法看到的问题（清除浮动）

Clear属性：图像的左侧和右侧均不允许出现浮动元素
clear作用
如果前一个元素存在左浮动或右浮动，则换行以区隔 ，只对块级元素有效
clear属性的取值
right
left
both 清除左右两端的浮动
none 不清除浮动