盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
内边距padding
padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。
填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法：
- 用来调整内容在容器中的位置关系
- padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;}（顺时针方向）
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/
padding-方向（设置单一方向）：
- top上 bottom下 left左 right右
- 背景色可以蔓延到内边距
- 不支持复值
边框border
边框的写法：
border:边距粗细px 样式 颜色
eg：border:1px solid red;
border的样式
- solid实线
- double双实线
- dashed虚线
- dotted点状线
- 背景色可以蔓延到边框
border-方向（设置单一方向）：
四个值：上 右 下 左（顺时针方向）
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
- border-width粗细（也可以是四个值）
- border-style样式（也可以是四个值）
- border-color颜色（也可以是四个值）
外边距margin
margin外边距：
四个值：上 右 下 左（顺时针方向）
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
margin-方向（设置单一方向）：
- top上 bottom下 left左 right右
- 背景色不可以蔓延到外边距
- margin支持复值，反方向走
auto：
- margin:0 auto表示水平方向（左右）居中
- 上下为0 左右自适应
- auto上下无意义
margin的特征
兄弟关系：
垂直方向（上下）外边距取最大值
水平方向（左边）外边距取合并值
父盒子中边距会产生传递给父盒子的行为 解决方案：（四种）
- 给父盒子加内边距。子盒子margin-top==>>父盒子padding-top 注意高度计算。
- 给父盒子设置边框 减去高度 设置透明transparent(相当于颜色)。
- 加浮动脱离文档流 使子父盒子不在一个平面内。
- overflow:hidden;.BFC。
元素类型转换 img｛display:block｝
© 版权声明
THE END
