![]()
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. 纵向格式化（共七个属性）
<style>div:first-of-type {background-color: lightgreen;margin-left: auto;margin-left: 10px;}</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, 最终大者胜出
