1. CSS三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式丽结构近，就执行哪个样式。样式不冲突，不会层叠

1.2 继承性

CSS中的继承：字标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业

恰当的使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text、font、line这些元素开头的可以继承，以及color属性）

行高的继承性

body { font-size: 12px/1.5 Microsoft YaHei; } 行高可以跟单位也可以不跟单位如果子元素没有设置行高，则会继承父元素的行高为 1.5此时子元素的行高是：当前子元素的文字大小 * 1.5body行高1.5，这样写法最大优势就是里面子元素可以根据自己文字大小自动调整行高

1.3 优先级

选择器权重如下表所示：

选择器选择器权重继承 或者 *0,0,0,0元素选择器0,0,0,1类选择器、伪类选择器0,0,1,0id选择器0,1,0,0行内样式 style=""1,0,0,0!important 重要的无穷大

优先级注意点：

权重是有4组数字组成，但是不会有进位可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推等级判断从左向右，如果某一位数值相同，则判断下一位数值可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!importabt无穷大继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

2.盒子模型

页面布局要学习三个核心：盒子模型、浮动、定位，学习好盒子模型能非常好的帮助我们布局页面。

2.1 看透网页布局的本质

网页布局过程：

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

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

2.2 盒子模型组成

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4MQgdUcb-1593615035865)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630193311739.png)]

2.3 边框（border）

border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

border: border-width || border-style || border-color 属性作用bofder-width定义边框粗细，单位是 pxborder-style边框的样式，取值： solid实线边框、dashed虚线边框、dotted点线边框bofder-color边框颜色

边框简写：

border: 1px solid red; 没有顺序

边框的分开写法：

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

2.4 表格的细线边框

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

语法：

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

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

边框会额外增加盒子的实际大小，因此我们有两种解决方法：

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

2.6 内边距（padding）

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

属性作用padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距

padding 属性（简写属性）可以有一到四个值：

值的个数表达意思padding: 5px;1个值：代表上下左右都有5像素内边距padding: 5px 10px;2个值：代表上下内边距是5像素，左右内边距是10像素padding: 5px 10px 15px;3个值：代表上内边距5像素，左右内边距10像素，下内边距20像素padding: 5px 10px 15px 20px;4个值：代表上内内边距5像素，右内边距10像素，下内边距15像素，左内边距20像素，顺时针

当我们给盒子指定 padding 值之后，发生了2件事：

内容和边框有了距离，添加了内边距padding影响了盒子实际大小

也就是说：如果盒子已经有了宽度和高度，此时再指定内编剧，会撑大盒子。

解决方案：

如果要保证盒子跟效果图大小保持一致，则让 width / height 减去多出来的内边距大小 即可。

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

案例：新浪导航案例-padding影响盒子的好处

padding 内边距可以撑开盒子，我们可以做非常巧妙的运用

因为每个导航里面的数字不一样多，我们可以不用给每个盒子宽度，直接给padding最合适。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy98p6u3-1593615035867)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630195525515.png)]

相关取值：

上边框为 3 像素，颜色为 #ff8500下边框为 1 像素，颜色为 #edeef0盒子高度为 41 像素，背景颜色为 #fcfcfc文字颜色为 #4c4c4c

案例：小米导航案例修改-padding影响盒子大小计算

padding内边距可以撑开盒子，有时候，也会让我们去修改宽度

所以小米侧边栏这个案例，文字距离左侧的距离不应该用 text-indent 这样不精确

实际开发的做法是给 padding 值，这样更精确。

2.7 外边距（margin）

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

属性作用margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距

margin 简写方式代表的意义跟 padding 完全一致。

外边距典型应用（块级元素水平居中）

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

盒子必须指定了宽度（width）

盒子 左右的外边距 都设置为 auto

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

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

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

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

2.8 外边距合并

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

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

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距 margin-botton，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者，这种现象被成为 相邻元素垂直外边距的合并

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zcpOJSU-1593615035869)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630215428148.png)]

解决方案：

尽量只给一个盒子添加 margin 值

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYOcCEBX-1593615035871)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630215658507.png)]

解决方案：

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

还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面咱们再总结。

2.9 清楚内外边距

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

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

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内元素就可以了

3. PS基本操作

因为网页美工大部分效果都是利用 PS 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

文件 -> 打开：可以打开我们要测量的图片Ctrl + R：可以打开标尺，或者 视图 -> 标尺右击标尺，把里面的单位改为 像素Ctrl + 加号(+) 可以放大视图，Ctrl + 减号(-) 可以缩小视图按住空格，鼠标可以变成小手，拖动 PS 视图用 选区 拖动，可以测量大小Ctrl + D 可以取消选区，或者在 旁边空白处点击一下 也可以取消选区

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PTpbBnVv-1593615035872)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630232211173.png)]

4. 综合案例：

产品模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGnGNNKR-1593615035873)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200630232358399.png)]

快报模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3uFOfWY-1593615035874)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200701131138954.png)]

5. 圆角边框（重点）

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了

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

语法：

border-radius: length;

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

参数值可以为 数值 或 百分比 的形式如果是正方形，想要设置一个圆，把数值修改为 高度或者宽度的一半 即可，或者直接写为 50%如果是个矩形，设置为高度的一半就可以做[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P0TK0GSq-1593615035875)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200701132522468.png)]该属性是一个简写属性，可以跟四个值，分别代表 左上角、右上角、右下角、左下角分开写： border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

6. 文字阴影（重点）

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset; 值描述h-shadow必须。水平阴影的位置。允许负值v-shadow必须。垂直阴影的位置。允许负值blur可选。模糊距离（虚实）spread可选。阴影的尺寸（大小）color可选。阴影的颜色，一般采用 RGBAinset可选，将外部阴影(outset)改为内部阴影

注意：

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

7. 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color; 值描述h-shadow必须。水平阴影的位置，允许负值v-shadow必须，垂直阴影的位置，允许负值blur可选，模糊的距离（虚实）color可选，阴影的颜色。