失物不招领的前端学习（4）

盒子模型

页面布局的三大核心：盒子模型、浮动、定位。

1.盒子模型

1.1看透网页布局本质：

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

1.2盒子模型的组成：

1、定义：CSS盒子模型本质是一个盒子，封装周围的HTML元素。
2、组成部分：边框、内容、外边距、内边距。

1.3边框：（border）

1、组成部分：边框宽度、边框样式、边框颜色

语法：
border: border-width || border-style || border-color

2、边框样式参数：

eg.

3、边框的复合写法：

边框简写：
border: 1px solid red ; 没有顺序

边框分开写法:
border-top: 1px solid red ; （只设定上边框，其余同理）

eg.

1.4表格细线边框：

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

语法：
border-collapse：collapse；

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

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

1.6内边距：（padding）

1、定义：边框与内容之间的距离。

2、内边距复合写法：
padding属性（简写属性）可以有一到四个值。

当我们给盒子指定padding值后，发生了2件事情：
1、内容和边距有了距离，添加了内边距。
2、padding影响了盒子实际大小。
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

3、padding 不会撑开盒子的情况：
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子的大小。
eg.

1.7外边距：（margin）

1、作用：margin属性用于设置外边距，即控制盒子和盒子之间的距离。
2、简写：margin 简写方式代表意义与padding 完全一致。

eg.


3、外边距的典型应用：

外边距可以让块级盒子水平居中，但需要满足下列条件：
1.盒子必须指定了宽度。
2.盒子左右的外边距都设置为auto。

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

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

1、margin-left：auto；margin-right：auto；
2、margin：auto；
3、margin：0 auto；

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

1.8外边距合并：

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

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

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

eg.

1.9清清除内外边距：

在布局前，要清楚网页元素的内外边距。

语法：

这句话也是CSS的第一句代码。

注意：行内元素尽量只设置左右的内外边距，但转换为块级和行内块元素就可以设置上下内外边距了。

2.PS基本操作

3.圆角边框

1、作用：盒子变成圆角样式。

2、语法：

 border-radius:length;

eg.

3、原理：圆与边框的交集形成圆角的效果。

4、使用:

eg.

4.盒子阴影

1.作用：使用box-shadow属性为盒子添加阴影。

2.语法：

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

注意：

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

eg.

文字阴影

1.属性：text-shadow属性将阴影应用于文字。

2.语法：

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