元素框与盒模型、调整元素框的大小以及横纵向格式化的属性

1. 元素框与框（盒）模型属性：

• 无论什么元素，都会生成一个矩形框来显示内容，为“元素框”

• 元素框的中心区域是内容框

• 内边距，边框，外边距都是可选的，因为他们的宽度允许为0

---

1.1 元素框（分四部分）

• （1）内容区（content）：必须要有

• （2）内边距（padding）：内容与边框的填充区域

• （3）边框（border）：可以将内容区与外界进行隔离

• （4）外边距（margin）：多个盒子之间的间隙

  注：

• （1）padding,margin,border的每一条边都可以单独设置属性

• （2）pading和margin是背景透明的所以只能设置宽度，不能设置颜色与样式

---

1.2 内边距

• （1）常规属性

序号	名称	描述
1	padding-top	上内边距
1	padding-right	右内边距
1	padding-botten	下内边距
1	padding-left	左内边距

• （2）属性简写

序号	值数量	举例	描述
1	四值	padding:5px 10px 5px 10px	上->右->下->左
2	三值	padding:5px 10px 5px	上->左右->下
3	双值	padding:5px 10px	上下->左右
4	单值	padding:5px	上下左右都有

---

1.3 外边距

• （1）常规属性

序号	名称	描述
1	margin-top	上外边距
2	margin-right	右外边距
3	margin-bottom	下外边距
4	margin-left	左外边距

• （2）属性简写

序号	值数量	举例	描述
1	四值	padding:5px 10px 5px 10px	上->右->下->左
2	三值	padding:5px 10px 5px	上->左右->下
3	双值	padding:5px 10px	上下->左右
4	单值	padding:5px	上下左右都有

---

1.4 边框

• border可以设置宽度，也可以设置样式和颜色

序号	名称	描述
1	border-top-width: 1px	上边框宽度
2	border-top-style: solid	上边框样式
3	border-top-color: black	上边框前景色
4	border-top: 1px solid black	上边框属性简写
5	border-right: 1px solid green	右边框属性简写
6	border-bottom: 1px solid grey	下边框属性简写
7	border-left: 1px solid skyblue	左边框属性简写

注：

• （1）轮廓outline: 位于 border 与 margin 之间,因为不占空间, 可暂时忽略

• （2）外边距始终是透明的,可能透过它看到父元素

• （3）轮廓没有针对各条边的属性,只能统一设置

---

2. 调整元素框的大小

2.1  display属性

• （1）display: 属性, 默认值inline,适用所有元素, 不能继承

• （2）display 改变的是显示方式, 并不能改变元素的本质

• （3）例如,块级元素不允许做为行内元素后代, 并不会因为它显示为行内块而改变

2.2 块级框

• （1）块级框宽度,其实就是内容区宽度,由左内边界到右内边界的距离, 高度也一样

• （2）元素内容宽度可以用box-sizing进行调整,默认为内容宽度(content-box)

2.3 box-sizing属性

• （1）box-sizing: 指示浏览器如何计算一个元素的总宽度和总高度

• （2）盒模型中,元素的width/height默认只会应用到”内容区”

• （3）当盒子中存在padding/border时,计算盒子总大小非常麻烦

序号	属性值	描述
1	content-box	默认值,width/height只应用到内容区
1	border-box	width/height还包括padding,border

注：

• （1）width 总宽度是不变的, 宽度计算边界在边框上,所以 width=broder+padding+content

• （2）box-sizing: 适用于所有能设置 width 和 height 的所有元素

• （3）box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)

---

3. 横向格式化（共7个属性）

序号	属性	默认值	描述
1	margin-left	auto	左外边距, 正负均可
2	border-left	0	左边框
3	padding-left	0	左内边距
4	width	auto	内容区宽度, 必须正值
5	padding-right	0	右内边距
6	border-right	0	右边框
7	margin-right	auto	右外边距, 正负均可

注：

• 这七个属性中，只有内容区和左右外边距允许auto，其他的，要么0，要么具体值

  例：

  

  5. 纵向格式化（共七个属性）

1. <style>

2. div:first-of-type {

3.      background-color: lightgreen;

4.      margin-left: auto;

5.      margin-left: 10px;

6.    }

7.    </style>

序号	属性	默认值	描述
1	margin-top	auto	上外边距, 正负均可
2	border-top	0	上边框
3	padding-top	0	上内边距
4	height	auto	内容区高度, 必须正值
5	padding-bottom	0	下内边距
6	border-bottom	0	下边框
7	margin-bottom	auto	下外边距, 正负均可

例：

<style> div:first-of-type {        background-color: lightgreen;        margin-bottom: auto;        margin-bottom: 10px;      }      </style>

5.1 纵向外边距二大特征

上下外边距的auto会被解析为0

• （1）横向格式化时, 左右外边距值为auto时, 由浏览器根据父元素空间自动计算

• （2）纵向格式化时, 上下外边距值为auto时, 浏览器会将它强制设置为0

• （3）这也是块元素无法直接设置”垂直居中”的原因(水平居中可以轻易实现)

纵向外边距会出现折叠现象

• （1）当多个元素框垂直方向排列时, 会出现纵向外边距折叠现象

• （2）此时, 二个元素框的上下外边距为 PK, 最终大者胜出

总结：

（1）元素框是由内容区（content）,内边距（padding）,外框（border），外边距（margin）组成的

（2）边框和边距都是由上下左右组成

（3）写属性时要注意值得数量：

当四个值的时候是上->右->下->左

当三个值的时候是上->左右->下

当两个值的时候是上下->左右

当一个值的时候是上下左右全部

（4）调整元素框的大小时用display属性

（5）格式化时只有内容区和上下左右外边距允许设置auto