盒模型
俗称框模型。它定义了元素框处理元素中的内容、内边距、边框，外边距的方式。
页面元素皆为盒模型，div、span、img... ,每个元素实际占用页面的宽高组成：外边距+边框+内边距+内容宽高。
外边距(margin)
外边距(margin)是围绕元素周围的区域，默认不能被其他元素所占据，主要作用是拉伸两个元素间的距离。
1.属性：
如：
margin:值；
设置单个外边距可以使用margin-top/right/bottom/left:值；
2.取值
1.具体数值 px
2.百分数 %
3.负值（移动块位置功能）：
左外取负（正）值，向左（右）移动；
上外取负（正）值，向上（下）移动；
4.auto 由浏览器计算外边距值（默认情况，auto只对水平外边距有效），为元素设置此值后，元素居中对齐。
简便写法：
margin:value;（设置上右下左外边距）
margin:v1 v2;（v1对应上下，v2对应右左）
margin:v1 v2 v3 v4;（对应上右下左方向）
注：具备默认外边距的元素（body h1~h6 ul ol pre ），可以使用CSS来更改它们的属性值。
3.外边距特殊问题
1.外边距合并：当两个垂直外边距相遇时，他们将形成一个外边距，合并后外边距的高度等于两个元素中外边距较大的值。
2.外边距溢出：如在某些特殊情况下，给子元素增加垂直外边距时，有可能作用到父元素上（1、父元素无上下边框时；2、为第一个子元素增加上外边距，或为最后一个子元素增加下外边距时。）
解决方法：1、为父元素增加透明边框；2、为父元素设置上内边距来取代子元素的上外边距；3、为父元素在增加一个空子元素table于子元素最后一行。
内边距(padding)
内边距是内容区域和边框之间的距离；内边距的设置，会增加边框所占用区域。
1.属性:padding
设置单个内边距可使用：padding:top/right/bottom/left.
2.取值：1.px 2.% 3.auto
简写方法：
padding:value; 四个方向内边距，
padding:v1 v2;上下 左右方向
padding:v1 v2 v3 v4;对应于上右下左的内边距。
3.内边距特殊注意：为行内元素设置上下内边距时，只影响当前元素自己，不会影响其他元素。
box-sizing
1.作用：重新指定元素尺寸计算模式
2.语法：
属性：box-sizing
取值：1.content-box 默认值，width(height)只表示内容区域的宽度，border和padding的值额外计算；
2.border-box 给定的width和height，会包含border和padding；
3.padding-box 只将padding值算在width(height)中。
尺寸计算模型：外边距+内边距+边框+内容宽高
网友评论