CSS盒子模型
CSS盒子模型
盒子模型也称为框模型(Box Model)，利用其可以对页面进行更好的排版布局。
1.盒子模型概念
处理元素的尺寸，包含内容(content)、边框(border)、内边距(padding)以及外边距(margin)几个要素,盒子模型结构图表示如下：
模型图中：
*最内部的element框即content要素，指的是元素的实际内容包括width与height(注意:这是元素的宽度与高度而非盒子的)；
*紧挨着元素框向外，则是padding，清空元素周围区域；
*padding区域向外则是border，围绕着内边距及元素内容；
*margin外边距围绕在元素边缘(边框)周围的空白距离
以上，构成了盒子模型，通常设置背景颜色的区域就是包含content、padding、border这一块的范围。
框：页面元素皆为框
框模型：Box Model,定义了元素框处理元素内容，边框，内边距以及外边距的一种方式
当框模型的属性介入到元素中，元素的整体占地区域的尺寸会发生改变
元素实际宽度=width + 左右外边距 + 左右边框 + 左右内边距
元素实际高度=height+ 上下外边距 + 上下边框 + 上下内编剧
元素边框内宽度=width + 左右边框 + 左右内边距
元素边框内高度=height+ 上下边框 + 上下内边距
接下来我们通过代码来演示盒子：
2.边框border
（1）简写方式
通过一个属性设置元素四个边缘的 尺寸，样式，颜色
语法：border:width style color;
width : 尺寸，以px为单位
style : 样式
solid : 实线
dotted : 虚线(点)
dashed : 虚线(线)
color : 颜色（合法的颜色取值、取值为 transparent(透明)）
注意：
1、为元素增加边框，会改变元素的占地区域
2 、border 可以取值为 0 或 none
border:0;
border:none;
（2）单边设置
只设置某一方向的边框的 尺寸，样式，颜色
语法：border-top/right/bottom/left:width style color;
（3）单属性设置
设置 四个方向的边框的 某一属性值
语法：border-width/style/color:值;
（4）单边单属性设置
设置某一方向的某一个属性值
语法：border-方向-属性:值;
方向：top/right/bottom/left
属性：width/style/color
3.内边距
（1）什么是内边距
内容区域与边框(边缘)之间的距离
注意：内边距会扩大元素边框所占用的区域的
（2）语法
padding|padding-top/right/bottom/left
（3）取值：
1、以 px 为单位的数值
2、以 % 为单位的数值
3、auto
（4）简洁写法:
1、padding:value
四个方向的内边距
2、padding:v1 v2
v1 : 上下内边距
v2 : 左右内边距
3、padding:v1 v2 v3
上 、左右 、下
4、padding:v1 v2 v3 v4;
上，右，下，左
（5）内边距特殊注意
1、为行内元素 和 行内块元素增加垂直内边距时
2、为行内元素 和 行内块元素增加垂直内边距时，只会影响自己的效果，不会影响其他元素
4.外边距
(1)属性：margin\margin-top/right/bottom/left
(2)取值：
1、以 px为单位的数值
2、以 % 为单位的数值
3、取值为负数
特别是在margin-top/left 中使用
margin-top取负值，向上移动
margin-left取负值，向左移动
4、取值为 auto
正常情况下，只对左右有效
让元素水平居中对齐(只针对块级)
前提：为元素设置宽度
(3)外边距的简洁写法：
1、margin:value;
value表示四个方向的外边距值
ex:margin:5px;
2、margin:v1 v2;
v1:上下的外边距
v2:左右的外边距
ex:margin:10px auto;
3、margin:v1 v2 v3;
v1:上外边距
v2:左右外边距
v3:下外边距
ex:margin:10px auto 5px;
4、margin:v1 v2 v3 v4;上 右 下 左
(4)页面中具备默认外边距的元素
会通过 "CSS Reset(重写)" 的手段，将具备默认外边距的元素的外边距改为0
（5）外边距的特殊效果
1、外边距合并
当两个"垂直"外边距相遇时，他们将合成一个，值，以大的为主
2、外边距的溢出
在某种条件下，为子元素设置上外边距时，有可能会作用到父元素上
条件：
1、父元素没有上边框
2、为第一个子元素设置上外边距时
解决方案：
1、为父元素增加上边框
弊端：父元素会变高
2、通过为父元素设置上内边距来取代子元素的上外边距
弊端：也会增加父元素的高度
3、在父元素中，增加一个空 <table>元素
弊端：页面中多一个空元素而已
4、使用CSS3中内容生成的方式
3、对行内元素 和 行内块元素设置垂直外边距时
1、垂直外边距对行内元素无效，但<img>除外
2、为行内块元素(input)增加垂直外边距时，整行元素都跟着变
5.box-sizing
(1)作用：重新指定元素的框模型边框以及边框内的尺寸计算方式
` (2)元素边框内宽度
元素边框内宽度=width + 左右内边距 + 左右边框
ex
div{
width:300px;
border:7px solid #ddd;
padding-left:13px;
padding-right:6px;
}
300+7+7+13+6 = 333
(3)语法：
属性：box-sizing
取值：
1、content-box
默认计算方式:
元素的width属性 只表示内容区域的尺寸，border以及padding要额外加在width 计算出真正的边框内区域
height 同上 ...
2、border-box
元素的width属性值中，包含 border，padding 的
div{
box-sizing:border-box;
width:300px;
border:7px solid #ddd;
padding-left:13px;
padding-right:6px;
}
以上为W3C的标准盒子模型，本人在学习中所总结，希望对大家有所帮助！！！
