# CSS 基础(二)
## 1. 盒模型
无论什么元素, CSS 都会生成一个矩形框来显示,称为**元素框**
### 1.1 元素框组合
| 序号 | 名称 | 描述 |
| ---- | --------------- | ------------------------------ |
| 1 | 内容区(content) | 必须要有,它的四周区域是可选的 |
| 2 | 内边距`padding` | 内容与边框之间的填充区域 |
| 3 | 边框`border` | 边框可以将内容区与外界进行隔离 |
| 4 | 外边距 `margin` | 多个盒子之间的间隙 |
- `padding`,`margin`,`border` 的每一条边都可以单独设置属性
- `pading` 和 `margin` 是背景透明的,所以只能设置宽度,不能设置颜色与样式
### 1.2 内边距
(1): 常规属性
| 序号 | 名称 | 描述 |
| ---- | ---------------- | -------- |
| 1 | `padding-top` | 上内边距 |
| 2 | `padding-right` | 右内边距 |
| 3 | `padding-bottom` | 下内边距 |
| 4 | `padding-left` | 左内边距 |
(2): 属性简写
| 序号 | 值数量 | 举例 | 描述 |
| ---- | ------ | ----------------------------- | ------------------------ |
| 1 | 四值 | `padding: 5px 10px 15px 20px` | 上 -- 右 -- 下 -- 左 |
| 2 | 三值 | `padding: 5px 10px 5px` | 上 -- (左右相等) -- 下 |
| 3 | 双值 | `padding: 5px 10px` | (上下相等) -- (左右相等) |
| 4 | 单值 | `padding: 10px` | 上下左右全相等 |
### 1.3 外边距
(1): 常规属性
| 序号 | 名称 | 描述 |
| ---- | --------------- | -------- |
| 1 | `margin-top` | 上外边距 |
| 2 | `margin-right` | 右外边距 |
| 3 | `margin-bottom` | 下外边距 |
| 4 | `margin-left` | 左外边距 |
(2): 属性简写
| 序号 | 值数量 | 举例 | 描述 |
| ---- | ------ | ---------------------------- | ------------------------ |
| 1 | 四值 | `margin: 5px 10px 15px 20px` | 上 -- 右 -- 下 -- 左 |
| 2 | 三值 | `margin: 5px 10px 5px` | 上 -- (左右相等) -- 下 |
| 3 | 双值 | `margin: 5px 10px` | (上下相等) -- (左右相等) |
| 4 | 单值 | `margin: 10px` | 上下左右全相等 |
### 1.4 边框
边框`border` 比较特殊, 除了可以设置宽度, 还可以设置样式和颜色,所以有更多的属性
(1): 上边框
| 序号 | 名称 | 描述 |
| ---- | ----------------------------- | -------------- |
| 1 | `border-top-width: 1px` | 上边框宽度 |
| 2 | `border-top-style: solid` | 上边框样式 |
| 3 | `border-top-color: black` | 上边框前景色 |
| 4 | `border-top: 1px solid black` | 上边框属性简写 |
(2): 右边框
| 序号 | 名称 | 描述 |
| ---- | ------------------------------- | -------------- |
| 1 | `border-right-width: 1px` | 右边框宽度 |
| 2 | `border-right-style: solid` | 右边框样式 |
| 3 | `border-right-color: green` | 右边框前景色 |
| 4 | `border-right: 1px solid green` | 右边框属性简写 |
(3): 下边框
| 序号 | 名称 | 描述 |
| ---- | ------------------------------- | -------------- |
| 1 | `border-bottom-width: 1px` | 下边框宽度 |
| 2 | `border-bottom-style: solid` | 下边框样式 |
| 3 | `border-bottom-color: grey` | 下边框前景色 |
| 4 | `border-bottom: 1px solid grey` | 下边框属性简写 |
(4): 左边框
| 序号 | 名称 | 描述 |
| ---- | -------------------------------- | -------------- |
| 1 | `border-left-width: 1px` | 左边框宽度 |
| 2 | `border-left-style: solid` | 左边框样式 |
| 3 | `border-left-color: skyblue` | 左边框前景色 |
| 4 | `border-left: 1px solid skyblue` | 左边框属性简写 |
(5): 所有边框
| 序号 | 值数量 | 举例 | 描述 |
| ---- | ------ | ----------------------- | ------------------- |
| 1 | 三值 | `border: 1px solid red` | 宽度--样式--前景色 |
| 2 | 双值 | `border: 1px solid` | 宽度--样式:默认黑色 |
Tips:
- 轮廓`outline`: 位于 `border` 与 `margin` 之间,因为不占空间, 可暂时忽略
- 轮廓没有针对各条边的属性,只能统一设置
- 默认,内容区的背景色会延伸到内边距范围内,内边距是透明的
- 外边距始终是透明的,可能透过它看到父元素
- 内边距,边框不允许是负值, 而外边距允许
- 内边距影响到盒子大小, 而外边距影响到盒子的位置
- 边框颜色默认与内容区前景色相同,例如文本是黑色, 边框就是黑色
- 如果边框是虚线,是可以透过边框线的间隙看到内容区元素的背景色
### 1.4 重要术语
(1): 常规流
- 默认从左到右, 从上到下渲染页面, 这也符合大多数语言的书写顺序
- 可以通过: `float / position / Flex / Grid` 等布局方式,改变默认行为
(2): 非置换元素
- 内容包含在当前文档中的元素,例如`<p>`,段落文本就在当前的 HTML 文档中
(3): 置换元素
- 充当其它内容占位符的元素. 最常见的就是`<img>`
- `<img>`通过`src`属性指向一张图片,渲染时该图片就会插入到该元素的位置
- 类似的还有`<input>`, 通过`type`属性指定要插入的表单元素类型
- 例如: `<input type="radio">`
(4): 根元素
- 在 html 文档, 就是指`<html>`元素, xml 文档中, 可以是任何元素
(5): 块级框
- 元素框在页面中,只有水平排列与垂直排列二种形式
- 块级元素生成的框, 总是前后换行, 垂直/纵向/堆叠排列
- 例如:段落`<p>`, 标题`<h3>`, 通用容器`<div>`等
- 任何元素通过`display: block`都可声明为块级框
(6): 行内框
- 简单说, 就是前后不换行排列的元素,例如`<span>`,`<strong>`,`<a>`
- 任何元素通过`display: inline`都可声明为行内框
(7): 行内块级框
- 内部特征像块级框, 外部特征像行内框,既可设置宽高,又能水平排列
- 行内块级框也置换元素非常相似: `display: inline-bolck;`
(8): 容纳块
- 容纳块是一种特殊的元素框,或者理解为专门充当元素框父级的专用元素框
- 每个**元素框**, 都必须相对于一个容纳块来放置
- 所有, 容纳块, 就是元素框体的**布局上下文**
- 在常规流布局中, 容纳块,是由离元素最近的那个生成列表/块级框/表格的祖辈元素的边界构成
```html
<body>
<div>
<p>This is a paragraph.</p>
</div>
</body>
```
- p 元素块级框的容纳块是 div 元素的块级框,因为 div 是祖辈中离 p 最近的,并且 div 生成的是块级框
- 以此类推, div 元素的容纳块是 body 元素生成的块级框
- 所以, p 元素的布局依赖于 div, 而 div 又依赖于 body 元素的布局, body 又依赖 html 元素的布局
- 而 html 又依赖于谁的布局呢? 对应的是**初始容纳块**(initial containing block)
- 这个初始容纳块大小, 由可视 afadd 小决定,而不是根元素内容大小
- 初始容纳块与其它容纳块差异极小, 我们只需要知道有这么一个大 boss 就可以
---
### 1.5 调整元素的显示方式
- display: 属性, 默认值`inline`,适用所有元素, 不能继承
- display 改变的是显示方式, 并不能改变元素的本质
- 例如,块级元素不允许做为行内元素后代, 并不会因为它显示为行内块而改变
(1): 块级框
- **块级框宽度**,其实就是内容区宽度,由左内边界到右内边界的距离, 高度也一样
- 元素内容宽度可以用`box-sizing`进行调整,默认为内容宽度(content-box)
### 1.6 `box-sizing`属性
- `box-sizing`: 指示浏览器如何计算一个元素的总宽度和总高度
- 盒模型中,元素的`width/height`默认只会应用到"内容区"
- 当盒子中存在`padding/border`时,计算盒子总大小非常麻烦
| 序号 | 属性值 | 描述 |
| ---- | ------------- | -------------------------------------- |
| 1 | `content-box` | 默认值,`width/height`只应用到内容区 |
| 1 | `border-box` | `width/height`还包括`padding`,`border` |
- 即 `width` 总宽度是不变的, 宽度计算边界在边框上,所以 `width=broder+padding+content`
- `box-sizing`: 适用于所有能设置 `width` 和 `height` 的所有元素
- `box-sizing`: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)
### 1.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 | 右外边距 |
- 这七个属性影响着块级框的横向布局
- 本个属性相加应该等于父元素容纳块的宽度,而这个宽度就是父元素的 width 值
- 七个属性中,只有内容区和左右外边距,允许设置`auto`,其它属性要么 0,要么具体值
- `width`仅允许`auto`, 非负值
- `margin`允许`auto`, 正值, 负值都可以
## 2. 定位属性`position`
(1) 重要术语
| 术语 | 解释 |
| -------- | --------------------------------------- |
| 文档流 | 元素默认排列方式,显示顺序与书写顺序一致 |
| 定位元素 | 具有非`position: static`定位属性的元素 |
(2) 定位属性
| 序号 | 属性值 | 描述 | 定位参照 |
| ---- | -------------------- | -------- | ------------------- |
| 1 | `position: static` | 静态定位 | 默认,书写顺序 |
| 2 | `position: relative` | 相对定位 | 自身,常用做定位父级 |
| 3 | `position: absolute` | 绝对定位 | 最近定位元素 |
| 4 | `position: fixed` | 固定定位 | `<body>` |
## 3. 常用单位
(1): 绝对单位
| 序号 | 单位 | 描述 |
| ---- | ---- | ---------------------- |
| 1 | `px` | 像素,设备不同,也有差异 |
| 2 | `in` | 英寸, `1in = 96px` |
(2): 相对单位
| 序号 | 单位 | 描述 |
| ---- | ----- | ----------------------------------------- |
| 1 | `em` | 引用或继承当前或父级元素`font-size` |
| 2 | `rem` | 永远引用`html`根元素的`font-size` |
| 3 | `vw` | 视口宽度的百分比, `1vw = 1/100(视口宽度)` |
| 4 | `vh` | 视口高度的百分比, `1vh = 1/100(视口高度)` |
