css中的盒子模型及其浮动

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像。

margin：外边距  当前盒子与其他盒子的距离
1个值 上下左右采用统一的值
2个值 上下和左右采用不同的值 上下采用第一个值 左右采用第二个值
3个值 上 左右 下 ；
4个值  按顺时针的顺序  上右下左
margin-top margin-left margin-right  margin-bottom

padding：内边距  ：内容和边框之间的距离（其属性值的用法与margin相同）

border-style的属性
none：无边框
dotted：点边框
solid：实线边框
double：双线
groove：定义3D沟槽边界
ridge：定义3D脊边界
inset：定义3D嵌入边框
outset：定义3d突出边框
border-color要和border-style配合使用

外边距，内边距，边框都会影响内容的宽度。

box-shadow ：x轴方向偏移 y轴方向偏移  模糊范围 阴影拓展范围 阴影颜色（右下角）
inset 内阴影（左上角）
outline：轮廓线 不会占据空间

盒子的摆放模式：

标准流模式

 块级盒子

 行级盒子

浮动盒子

浮动盒子不会自动展开，表现为行级元素的样子，且标准盒子视浮动盒子为不存在而占据浮动盒子的位置，但内容会受到浮动盒子的影响。

父级盒子中的所有合资都采用浮动元素，若父级盒子未指定高度，则父级盒子高度为0

可以设置clear属性，使标准流中的元素不受浮动属性的影响

清除浮动的三种方式：

1.添加clear：both属性 （ 不推荐）

2.为父元素添加一个div。并为其添加clear：both属性（会给代码增加一个div）

3.为父元素添加一个伪类 after属性：
.cleanfix:after{

            content: "";

            display: block;

            clear: both;

        }
如果浏览器不兼容，添加zoom：1