【重识 HTML + CSS】盒子模型相关知识点

不念不忘少年蓝@ 2022-10-16 14:26 227阅读 0赞

### 盒子模型 ###

*  盒子模型 (Box Model)
 *  宽度、高度相关 CSS 属性 - width、height
 *  内边距相关 CSS 属性 - padding
 *  外边距相关 CSS 属性 - margin
 *   *  【常见问题】上下 margin 传递
     *  【常见问题】上下 margin 折叠
 *  border 边框
 *   *  CSS属性 - border-width、border-color、border-style
     *  CSS 属性 - border-top、border-right、border-bottom、border-left、border
     *  边框的形状 - 三角形、双色平分
     *  行内级非替换元素的注意点
     *  CSS 属性 - border-radius 圆角
 *  CSS 属性 - outline
 *  CSS 属性 - box-shadow
 *  CSS 属性 - text-shadow
 *  CSS 属性 - box-sizing
 *  元素的水平居中显示（行内级、块级、inline-block）

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

本章代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day07/02-盒子模型][https_gitee.com_szluyu99_html_css_note_tree_master_day07_02-]

# 盒子模型 (Box Model) #

HTML中的每一个元素都可以看做是一个盒子，如下图所示，具备这 4 个属性：

*  **内容 (content)**  
    盒子里面装的东西
 *  **内边距 (padding)**  
    怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料
 *  **边框 (border)**  
    就是盒子的边框，比如木盒子四周的木板
 *  **外边距 (margin)**  
    为了方便取出，盒子之间保留一定的空隙  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]  
    默认的盒子模型如下图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]  
    浏览器开发者工具中看到的盒子模型：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]  
    一个元素的**实际占用宽度** = border-left + padding-left + width + padding-right + border-right  
    一个元素的**实际占用高度** = border-top + padding-top + height + padding-bottom + border-bottom  
    一个元素的**空间宽度** = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right  
    一个元素的**空间高度** = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

示例代码：[盒子模型][Link 1]

# 宽度、高度相关 CSS 属性 - width、height #

`width`：宽度  
`min-width`：最小宽度，无论内容多少，宽度都大于或等于 min-width  
`max-width`：最大宽度，无论内容多少，宽度都小于或等于 max-width

`height`：高度  
`min-height`：最小高度，无论内容多少，高度都大于或等于 min-height  
`max-height`：最大高度，无论内容多少，高度都小于或等于 max-height

# 内边距相关 CSS 属性 - padding #

`padding-left`：左内边距  
`padding-right`：右内边距  
`padding-top`：上内边距  
`padding-bottom`：下内边距  
`padding`：是 padding-top、padding-right、padding-bottom、padding-left 的简写属性

padding 的取值规律：**顺时针方向设值 top、right、bottom、left**

*  如果缺少 left，那么 left 就使用 right 的值
 *  如果缺少 bottom，那么 bottom 就使用 top 的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

示例代码：[padding][]，[简写属性][Link 2]

# 外边距相关 CSS 属性 - margin #

`margin-left`：左外边距  
`margin-right`：右外边距  
`margin-top`：上外边距  
`margin-bottom`：下外边距  
`margin`：是 margin-top、margin-right、margin-bottom、margin-left 的**简写属性**

> margin 的取值规律与 padding 相同  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

示例代码：[margin][]

## 【常见问题】上下 margin 传递 ##

**margin-top 传递**：

*  如果块级元素的**顶部线**和块级父元素的**顶部线**重叠，那么这个块级元素的 margin-top 值会传递给父元素

**margin-bottom 传递**：

*  如果块级元素的**底部线**和块级父元素的**底部线**重叠，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素

注：**水平方向上的 margin 永远不会发生传递现象**

如何防止出现传递问题？

*  给父元素设置 `padding-top\padding-bottom`
 *  给父元素设置 `border`
 *  给父元素或者子元素设置 `display: inline-block`
 *  以后理解得更深入，还会学到其他解决方法

建议：**使用相应的属性去做对应的事情**

*  **margin 一般是用来设置兄弟元素之间的间距**
 *  **padding 一般是用来设置父子元素之间的间距**

代码：[上下margin传递\_01][margin_01]、[上下margin传递\_02][margin_02]

## 【常见问题】上下 margin 折叠 ##

垂直方向上相邻的 2 个 margin (`margin-top`、`margin-bottom`) 有可能会合并为 1 个 margin，这种现象叫做**collapse**（折叠）

水平方向上的 margin (`margin-left`、`margin-right`) 永远不会 collapse

折叠后最终值的计算规则：

*  如果都是正数，最终值是：绝对值最大的那个正数值
 *  如果都是负数，最终值是：绝对值最大的那个负数值
 *  如果正数、负数都有，最终值是：最大正数和最小负数相加

如何防止 **margin collapse**？

*  只设置其中一个元素的 margin
 *  条件允许的话，使用 padding 取代 margin
 *  以后理解得更深入，还会学到其他解决方法

--------------------

两个兄弟块级元素之间上下 margin 的折叠：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]  
无内容块级元素内部 margin 的折叠：  
![在这里插入图片描述][20210601010932175.png]  
无内容块级元素之间 margin 的折叠（折叠是可以连续的）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]  
块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的

*  比如连续段落之间的 margin，恰好需要这种折叠效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]

# border 边框 #

边框很常见：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]

## CSS属性 - border-width、border-color、border-style ##

边框宽度：**border-\*-width**

*  `border-top-width`、`border-right-width`、`border-bottom-width`、`border-left-width`
 *  `border-width` 是上面 4 个属性的**简写属性**

边框颜色：**border-\*-color**

*  `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color`
 *  `border-color` 是上面 4 个属性的**简写属性**

边框样式：**border-\*-style**

*  `border-top-style`、`border-right-style`、`border-bottom-style`、`border-left-style`
 *  `border-style` 是上面 4 个属性的**简写属性**
 *  边框样式的取值：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]  
    none：没有边框，边框颜色、边框宽度会被忽略  
    hidden：与 “none” 类似，多用在表格上，用于解决边框冲突  
    dotted：边框是一系列的点  
    dashed：边框是一条虚线  
    solid：边框是一条实线  
    double：边框有两条实线。两条线宽和其中的空白的宽度之和等于 border-width 的值  
    groove：边框看上去好象是雕刻在画布之内  
    ridge：和 grove 相反，边框看上去好象是从画布中凸出来  
    inset：该边框使整个框看上去好象是嵌在画布中  
    outset：和 inset 相反，该边框使整个框看上去好象是从画布中凸出来

示例代码：[边框][Link 3]

## CSS 属性 - border-top、border-right、border-bottom、border-left、border ##

`border-top`、`border-right`、`border-bottom`、`border-left`：分别设置 4 个方向的边框  
![在这里插入图片描述][20210601161442231.png]

> 边框颜色、宽度、样式的编写顺序任意

`border`：统一设置 4 个方向的边框  
![在这里插入图片描述][20210601161605619.png]

## 边框的形状 - 三角形、双色平分 ##

边框的形状可能是：**矩形、梯形、三角形** 等形状  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]  
实现三角形：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]  
实现双色平分：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]  
示例代码：[形状-三角][-]、[形状-太极][- 1]

## 行内级非替换元素的注意点 ##

以下属性对行内级非替换元素不起作用：

*  `width`、`height`、`margin-top`、`margin-bottom`

以下属性对行内级非替换元素的效果比较特殊：  
`padding-top`、`padding-bottom`、`border-top`、`border-bottom`

示例代码：[行内级元素注意点\_1][1]、[行内级元素注意点\_2][2]

## CSS 属性 - border-radius 圆角 ##

圆角的应用十分广泛：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]

圆角半径相关的属性：**border-\*-\*-radius**

*  `border-top-left-radius` 左上角
 *  `border-top-right-radius` 右上角
 *  `border-bottom-right-radius` 右下角
 *  `border-bottom-left-radius` 左下角

**border-\*-\*-radius** 定义的是**四分之一椭圆的半径**：

*  可以设置 2 个值，分别是 水平半径 和 垂直半径（不设置，就跟随水平半径的值）  
    ![在这里插入图片描述][20210601165145996.png]

> `border-top-left-radius: 55pt 25pt` 效果如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]

*  还可以设置百分比  
    ![在这里插入图片描述][20210601165243339.png]  
    参考的是 border-box 的宽度和高度（即元素实际占用尺寸 border + padding + width\\height）

--------------------

`border-radius` 是一个缩写属性：  
![在这里插入图片描述][20210601165738197.png]  
斜线 `/` 前面是水平半径，后面是垂直半径

4 个值的顺序是 `top-left`、`top-right`、`bottom-right`、`bottom-left`（顺时针方向）

*  如果 bottom-left 没设置，就跟随 top-right
 *  如果 bottom-right 没设置，就跟随 top-left
 *  如果 top-right 没设置，就跟随 top-left

注：`border-radius` 大于或等于 `50%` 时，就会变成一个圆：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]  
示例代码：[border-radius][]

# CSS 属性 - outline #

outline 表示元素的外轮廓

*  不占用空间
 *  默认显示在 border 的外面
 *  每个部位都是完整连接的，不会像 border 那样有可能会断开（比如行内级非替换元素的换行）

outline 相关属性：

*  `outline-width`
 *  `outline-style`：取值跟 border 的样式一样，比如 solid、dotted 等
 *  `outline-color`
 *  `outline`：`outline-width`、`outline-style`、`outline-color` 的简写属性，跟 `border` 用法类似
 *  `outline-offset`：设置 outline 和 border 之间的间距

outline 应用实例：

*  去除 a 元素、input 元素的 focus 轮廓效果

示例代码：[outline][]

# CSS 属性 - box-shadow #

`box-shadow` 属性可以设置一个或者多个阴影

*  每个阴影用 `<shadow>` 表示
 *  多个阴影之间用逗号 `,` 隔开，从前到后叠加
 *  `<shadow>` 的常见格式如下：

![在这里插入图片描述][2021060200490335.png]

*  第 1 个 `<length>`：水平方向的偏移，正数往右偏移
 *  第 2 个 `<length>`：垂直方向的偏移，正数往下偏移
 *  第 3 个 `<length>`：模糊半径 (blur radius)
 *  第 4 个 `<length>`：延伸距离
 *  `<color>`：阴影的颜色，如果没有设置，就跟随 color 属性的颜色
 *  `inset`：外框阴影变成内框阴影

`box-shadow` 示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]  
示例代码：[box-shadow][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]

--------------------

练习：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]  
代码：[box-shadow 练习][box-shadow 1]

# CSS 属性 - text-shadow #

`text-shadow` 用法类似于 `box-shadow`，用于**给文字添加阴影效果**

`text-shadow` 同样适用于 **::first-line**、**::first-letter**

示例代码：[text-shadow][]

# CSS 属性 - box-sizing #

`box-sizing` 用来设置盒子模型中宽高的行为

*  **content-box**  
    padding、border 都布置在 width、height 外边  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]  
    元素的实际占用宽度 = border + padding + width  
    元素的实际占用高度 = border + padding + height
 *  **border-box**  
    padding、border 都布置在 width、height 里边  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]  
    元素的实际占用宽度 = width  
    元素的实际占用高度 = height

> 盒子模型历史遗留问题  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 23]

示例代码：[box-sizing][]

--------------------

练习：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 24]  
代码：[box-sizing - 练习][box-sizing -]

# 元素的水平居中显示（行内级、块级、inline-block） #

在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

*  父元素是 行内级元素、inline-block 元素  
    水平居中：在父元素中设置 `text-align: center`
 *  父元素是 块级元素  
    水平居中：给自己设置 `margin-left: auto、margin-right: auto`

示例代码：[水平居中][Link 4]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day07_02-]: https://gitee.com/szluyu99/html_css_note/tree/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/39703cc927b243a18eef789efd410a03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/6acd695b79de4b5387a9a9aea79bf597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/ec565b85ad90419687af623ebc3c3ab0.png
[Link 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/04-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/5aa785bdc7124241a3add3e5b2644730.png
[padding]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/02-%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7-padding.html
[Link 2]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/06-%E7%AE%80%E5%86%99%E5%B1%9E%E6%80%A7-padding.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221014/5135148688f14b4999946ffaab37b4f6.png
[margin]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/01-%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7-margin.html
[margin_01]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/07-%E4%B8%8A%E4%B8%8Bmargin%E4%BC%A0%E9%80%92.html
[margin_02]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/07-%E4%B8%8A%E4%B8%8Bmargin%E4%BC%A0%E9%80%92_02.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/ab3d76c9d5ec4f15b7815582d765d1df.png
[20210601010932175.png]: /images/20221014/77150be255804c72a4659cc3893504c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/16a5441117464a20b738eb79744e0850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/a344020fe8da42c7ad45e9136d7cb95f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/2638ed7f7588432696087f27d8030e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221014/1e8ffa16f9084c7ab209d597a55e1dea.png
[Link 3]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/09-%E8%BE%B9%E6%A1%86_01.html
[20210601161442231.png]: /images/20221014/84d5cbb543214241895de46242b1d63d.png
[20210601161605619.png]: /images/20221014/7646d2c21de449bda9641fad79fab829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221014/7c78f529058147289b9ce93156678811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]: /images/20221014/0935863d31784920877c42f23e7892c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]: /images/20221014/46e30338131b4ec09129de78c4acb6bb.png
[-]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/09-%E8%BE%B9%E6%A1%86_02-%E5%BD%A2%E7%8A%B6.html
[- 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/09-%E8%BE%B9%E6%A1%86_03-%E5%BD%A2%E7%8A%B6.html
[1]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/10-%E8%A1%8C%E5%86%85%E7%BA%A7%E5%85%83%E7%B4%A0%E6%B3%A8%E6%84%8F%E7%82%B9.html
[2]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/10-%E8%A1%8C%E5%86%85%E7%BA%A7%E5%85%83%E7%B4%A0%E6%B3%A8%E6%84%8F%E7%82%B9_02.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]: /images/20221014/634c93898f2f442a9d26df2609a66d6d.png
[20210601165145996.png]: /images/20221014/6fc9a7984d254eea83dbdff6f3ae9e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]: /images/20221014/9762a1445b2f478aa6baf91e0c496bfa.png
[20210601165243339.png]: /images/20221014/f06f882d19d4422e835c709b2004635b.png
[20210601165738197.png]: /images/20221014/caffb7f82f9943fe8cb3cf6c4d235dd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]: /images/20221014/b63a8d73bb47406a9728124febeb0afe.png
[border-radius]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/11-border-radius.html
[outline]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/12-outline.html
[2021060200490335.png]: /images/20221014/d13172ad0acd4d7a9ec499876d3b4e74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]: /images/20221014/732666bec9bb4fa398023770d6f15d6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]: /images/20221014/d0c6680b46834e7084664dee59006d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]: /images/20221014/a068d098be2f40e2a03c8dc575f9a6b0.png
[box-shadow]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/13-box-shadow.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]: /images/20221014/4e67d57028dc428983e843cdd110b67a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]: /images/20221014/7159623ba29a40a59f4f7c041a7c03ad.png
[box-shadow 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/13-box-shadow-%E7%BB%83%E4%B9%A0.html
[text-shadow]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/14-text-shadow.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]: /images/20221014/d4c18aad69de4833bd10fb76555e2671.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]: /images/20221014/0b84808c1cef42d68f394b94b0e1fa85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 23]: /images/20221014/c2658b8c2f1f4ae5ad3c829d485b1824.png
[box-sizing]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/15-box-sizing.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 24]: /images/20221014/4acb92f03c634bc493b91d07cab16240.png
[box-sizing -]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/16-box-sizing-%E7%BB%83%E4%B9%A0.html
[Link 4]: https://gitee.com/szluyu99/html_css_note/blob/master/day07/02-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/17-%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD.html