持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

1. 盒子模型

1.1 看透网页本质

网页布局过程：

1. 准备网页元素，网页元素基本都是盒子 box
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置
3. 往盒子里放东西

本质：利用 CSS 摆盒子

1.2 盒子模型（Box Model）组成

盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容

1.3 边框（border）

border 可以设置元素边框。边框有三个组成：border-width、border-style、border-color

语法

/*属性可连写*/
border: border-width || border-style || border-color;

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

属性	作用
border-width	定义边框粗细，单位 px
border-style	边框样式
border-color	边框颜色

边框属性简写

/* 习惯顺序(但其实没有顺序要求) */ 
border: 5px solid pink

边框属性分写

/* 注意层叠性 */
border-top: 1px solid red;

1.4 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

border-collapse: CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框

语法

border-collapse: collapse;

• collapse 是合并的意思
• border-collapse:collapse; 表示将相邻边框合并在一起

1.5 边框会影响盒子实际大小

边框（不管是内边距还是外边距）均会额外增加盒子的实际大小，因此有两种方案解决。

1. 测量盒子大小的时候，不测边框
2. 若测量的时候包含了边框，则需要 width/height-边框宽度

1.6 内边距 padding

盒子的高度和宽度不会继承。div 标签默认宽度为 类似 body 标签宽度得原因，其实是由于 div 标签为块内元素且独占一行所起得作用

因为P是块级元素，所以它和父级一样宽，这是块级元素独显一行的特点，不是继承！不是继承！不是继承！高度宽度不能继承！！！

p 是块元素，块元素宽度默认是容器（父级元素）的100%

---

padding 属性设置内边距，即边框与内容之间的距离

• padding-left: 左内边距
• padding-right: 右内边距
• padding-top: 上内边距
• padding-bottotm: 下内边距

padding 属性简写
padding 的值的个数：

• 1 个值：上下左右
• 2 个值：上下，左右
• 3 个值：上，左右，下
• 4 个值：上，右，下，左，顺时针

padding 会影响盒子实际大小

当给盒子指定了 padding 值以后，发生了两件事情：

1. 内容和边框有了距离，增加内边距
2. padding 值影响了盒子实际大小

也就是说，当盒子已经有了宽度和高度，再指定内边距，会撑大盒子

要保证盒子和效果图一样大，则让 width/height-多出来的内边距大小即可

1.7 box-sizing 属性解决方案

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

在设置了一个盒子的 width/height 后，再设置其 border/padding 会影响盒子实际大小。当进行响应式布局时，这个尤其烦人。

box-sizing 属性可以被用来调整这些表现。

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。box-sizing: content-box;Copy to clipboardErrorCopied
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。box-sizing: border-box;Copy to clipboardErrorCopied尺寸计算公式： width = border + padding + 内容的宽度 height = border + padding + 内容的高度

若盒子没有指定 width/height 属性，则此时 padding 不会撑开盒子大小。

1.8 外边距

margin 属性用于设置外边距，即控制盒子与盒子之间的距离

• margin-left: 左外边距
• margin-right: 右外边距
• margin-top: 上外边距
• margin-bottotm: 下外边距

margin 简写方式与 padding 一致

1.9 外边距典型应用

外边距可以让块级盒子 水平居中，但是必须满足两个条件：

1. 盒子必须指定宽度（width）
2. 盒子左右的外边距都设置为 auto

.header { width: 960px; margin: 0 auto; }

常见的写法，以下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父元素添加 text-align:center 即可

使行内元素或行内块元素水平居中

由于行内元素、行内块元素是没有宽度的，所以根本就不能使用 margin 来实现水平居中

text-align: center;

1.10 外边距合并

1.10.1 相邻元素垂直外边距的合并

当上下相邻块元素相遇时，若上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距不是 margin-bottotm 与 margin-top 之和，而是取两个值中的较大者。 这种现象被称为相邻元素垂直外边距的合并。

这种现象无法避免，我们尽量给一方配置外边距就好了

---

1.10.2 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案

1. 为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加 overflow:hidden

---

1.11 清除内外边距

网页元素很多都带有默认内外边距，而且不同浏览器默认的也不一致，因此在布局前，要先清除网页元素的内外边距

语法

* { 
    margin: 0; 
    padding: 0; 
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置
（可能是因为行内元素没有宽高？（虽然宽度即为文本宽度）所以不尽量给他设置上下的内外边距。左右内外边距还是可以给的）

2. 圆角边框

CSS3 新增 圆角边框 属性，盒子可以变成圆角

border-radius 属性用于设置元素的外边框圆角

语法

border-radius: length;

原理

（椭）圆与边框的交集形成的圆角效果

---

参数

• 参数值可以为数值或百分比的形式
• 若是正方形，想要设置一个圆，则将数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 若是矩形，设置为 height 的一半就可以做
• 简写属性，跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开来写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

3. 盒子阴影

CSS3 新增 盒子阴影，使用 box-shadow 属性。

语法

bxo-shadow: h-shadow v-shadow blur spread color inset;

---

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离（该阴影是虚的还是实的）
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影（默认是外部阴影）

注意：

1. 默认是外阴影，但是不可以写（outset）如果写上了该盒子阴影效果将不起作用
2. 盒子阴影不占空间，不会影响其他盒子排列

4. 文字阴影

CSS3 中，使用 text-shadow 属性设置文本阴影

值	描述
h-shadow	必需，水平阴影位置。允许负值。
v-shadow	必须，垂直阴影。允许负值。
blur	可选，模糊距离。
color	可选，阴影颜色。