CSS（三）——盒子模型

1 盒子模型

页面布局要学习三大核心：盒子模型，浮动和定位。

1.1 看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子box。
2. 利用CSS设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容

网页布局的核心本质：利用CSS摆盒子。

1.2 盒子模型组成

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

1.3 边框（border）

边框有三部分组成：边框宽度（粗细），边框样式，边框颜色

border: border-width || border-style || border-color

css简写：

border: 1px solid red;没有顺序

边框分开写法：

border-top: 1px solid red;/*只设定上边框，其余同理*/

1.3.1 表格的细线边框

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

border-collapse:collapse;

collapse单词是合并的意思
border-collapse：collapse；表示相邻边框合并在一起。

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

解决方案：

1. 测量盒子大小的时候，不量边框。
2. 如果测量的时候包含了边框，则需要width/height减去边框宽度。

1.4 内边距（padding）

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

简写语法：

1.4.1 内边距会影响盒子实际大小

• 解决方案：用width/height减去多出来的内边距大小。
• 特别情况：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

1.5 外边距（margin）

与内边距用法一致。

1.5.1 外边距典型应用

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

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

常见写法：

• margin: 0 auto;

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

1.5.2 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。主要有两种情况：

1. 相邻块元素垂直外边距的合并。

解决方法：只设置一个盒子的外边距。

2. 嵌套块元素垂直外边距的塌陷。

解决方法：

• 可以为父元素定义上边框。
• 可以为父元素定义内边距。
• 可以为父元素添加overflow:hidden。

1.5.3 清除内外边距

* {
    padding:0;/*清除内边距*/
    margin:0;/*清除外边距*/
}

3 .圆角边框，盒子阴影，文字阴影

3.1 圆角边框

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

border-radius:length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

3.2 盒子阴影（重点）

语法：

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

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
2. 盒子阴影不占用空间，不会影响其他盒子排列。

3.3 文字阴影

语法：

text-shadow: h-shadow v-shadow blur color;