CSS—框模型

1.什么是框？

页面元素皆为框

2.什么是框模型？

 Box Model，定义了元素框处理元素的内容，内边距，外边距以及边框的 一种计算方式

当框模型介入到元素后，元素的占地尺寸会发生变化:
                元素的宽度 = 左右外边距+左右边框+左右内边距+w; （所有的左右内外边距+左右边框高度）
                元素的高度 = 上下外边距+上下边框+上下内边距+h  （所有的上下内外边距+上下边框高度）

内边距与外边距如图所示

外边距：

元素与元素之间的距离

 围绕在元素边框周围的空白距离，就是外边距
         
 

属性

margin	定义某元素四个方向的外边距
margin-top/right/bottom/left	定义某元素单个方向的外边距
ex：margin-left	取值为正，让元素右移动 取值为负，让元素左移动
ex：margin-top	取值为正，让元素下移动 取值为负，让元素上移动

取值

以PX为单位的数字

取值为auto：自动计算外边距的值，只针对左右外边距，只针对块级元素有用

取值为 %：外边距的值，占父元素宽或高的占比是多少

简写方式

margin:value;	四个方向的外边距都相同
margin:v1 v2;	v1 : 上下外边距 v2 : 左右外边距
margin:v1 v2 v3;	v1 : 上外边距 v2 : 左右外边距 v3 : 下外边距
margin:v1 v2 v3 v4;	依次执行上 右 下 左外边距
maring:0px auto;	上下为0，只设置左右

自带外边距的元素

h1~h6,p,ul,ol,dl,dd,pre,body

外边距的合并

          当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中距离较大的那个

外边距的溢出

           在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上

           特殊条件如下
           1、父元素没有上边框
           2、为第一个子元素设置上外边距时

例子展示

 解决方案：打破特殊条件的任何一个就可以解决（用解决方案3和4即可就行）     

1、为父元素增加上边框
 弊端：对父元素的高度有影响
2、使用父元素的上内边距来取代子元素的上外边距
弊端：对父元素的高度有影响
3、在父元素的第一个子元素位置处，增加一个空 <table></table>     

4.在#d2中的第一个子元素位置处 - 内容区域之前
            2、必须是空子元素 - 生成内容为 空
            3、必须是table元素 - 显示方式为 table

解决方案三效果展示：

解决方案四效果展示：

注意：     行内元素 以及 行内块元素的垂直外边距
                1、行内元素垂直外边距无效(img除外)
                2、行内块元素，设置垂直外边距时，整行元素都跟着发生改变 

 

内边距：有了内边框会改变占地区域

元素边框与内容之间的距离，内边距会扩大元素边框占地区域

属性

padding:value

padding-top / right / bottom / left:value;

取值

以px为单位的数值

以 %为单位的数值

简写方式

padding:value	四个方向内边距值
padding:v1 v2;	v1 : 上下    v2 : 左右
padding:v1 v2 v3;	v1 : 上  v2 : 左右  v3 : 下
padding:v1 v2 v3 v4;	上 右 下 左

效果展示：

d1占地区域为200+20+2

d2占地区域为200+2

 重点：  上图发现：d1,d2的占地区域发生了改变

 添加box-sizing:border-box;d1和d3的占地区域为原来的值

 属性：box-sizing —指定框模型的计算方式

box-sizing取值

content-box	默认值，采用默认的方式计算元素的占地区域 实际占地宽度=左右边框+左右内边距+width;  实际占地高度=上下边框+上下内边距+height
border-box	元素的尺寸，会包含border以及padding的值 实际占地宽度=width(包含了border和padding) 实际占地高度=height(包含了border和padding)

关于CSS框模型就先分享到这里，重点学习一下外边距的溢出和以及内边距占地区域的计算（box-sizing）