CSS（三大特性、盒子模型、PS基本操作、解惑）

1.CSS的三大特性

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

1.1层叠性

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

层叠性原则：

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

1.2继承性

现实中的继承：继承了父亲的性

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

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

行高的继承

body{
 font : 12px/1.5 '微软雅黑';
}

• 行高可以跟单位，也可以不跟
• 1.5就是当前元素文字大小的1.5倍

1.3优先级

当同一个元素有多个选择器，就会有优先级的产生

• 如果选择器相同，执行层叠性
• 选择器不同，根据选择器权重执行

选择器	权重
继承 或者 *	0,0,0,0
元素（标签）选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=“”	1,0,0,0
!important 重要的	无穷大

优先级注意点：

1. 权重是由4组数字组成，但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
3. 等级判断从左到右，如果某一位数值相同，则判断下一位数值
4. 继承权重为0，如果元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0

<style>
        /* 父亲的权重是100 但继承权重为0 而标签为1 所以是标签里的格式  */
        /* 所以我们看标签到底执行哪个样式，就先看这个标签有没有被直接选出来 */
        #father {
            color: pink;
        }

        p {
            color: blue;
        }
</style>
<div id="father">
        <!-- 文本颜色为蓝色 -->
        <p>你还是很好看</p>
</div>

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

• div ul li -----> 0,0,0,3
• .nav ul li -----> 0,0,1,2
• a:hover -----> 0,0,1,1
• .nav a -----> 0,0,1,1

2.盒子模型

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

2.1看透网页布局的本质

网页布局过程

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

核心：用CSS摆盒子

2.2盒子模型组成

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

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

2.3盒子的边框

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

语法：

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

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

border-style: solid;    实线
border-style: dashed;   虚线
border-style: dotted; 点线

复合写法：

border: 1px solid red;   没有顺序

边框分开写法：

border-top: 1px solid red;

2.4表格的细线边框

border-collapse属性控制浏览器绘制表格的方式，他控制相邻单元格的边框，相邻边框合并在一起

语法：

border-collapse:collapse

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

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

2.5内边距

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

上下左右

简写：

值的个数	表达意思
padding:5px	一个值，代表上下左右都是5px
padding:5px 10px	两个值，代表上下是5px 左右是10px
padding:5px 10px 20px	三个值，代表上5px 左右10px 下20px
padding:5px 10px 20px 30px	四个之，代表上5px 右10px 下20px 左30px 顺时针

padding也会额外增加盒子的实际大小

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

2.6外边距

盒子与盒子之间的距离

上下左右

margin简写方式与padding一样

2.7外边距的典型应用

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

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

.header {width: 900px; height: 200px; margin: 0 auto;}

常见的写法：

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

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

2.8外边距合并

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

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

当上下相邻的两个块元素相遇时，如果上面的元素有下边距，下面的元素有上边距，则他们两个之间的垂直距离并不是之和，而是取两者之间的较大值，这种现象称为相邻块元素垂直外边距的合并

**解决方法：**尽量只给一个盒子添加margin值

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

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

解决方案：

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

还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题

2.9清除内外边距

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

* {
	padding: 0;
	margin: 0;
}

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

3.PS基本操作

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

• 文件 打开
• Ctrl+R 打开标尺
• 右击标尺，把单位改为像素
• 放大或缩小图片
• 用选区拖动，可以测量大小

4.解惑：

4.1.布局为什么不用盒子，我只想用div

标签都是有语义的，要用合适的标签，比如产品标题用h，大量文字段落用p

4.2.为什么用这么多的类名

类名就是给每个盒子起了个名字，就可以更好地找到这个盒子，选取盒子更容易，后期维护更方便

4.3.到底用margin还是padding

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有简单的方法实现

4.4自己做没思路

布局有很多实现方式，同学们可以开始先模仿，然后再做出自己的风格

最后，一定要多运用辅助工具，比如屏幕画笔，ps等等

适的标签，比如产品标题用h，大量文字段落用p

4.2.为什么用这么多的类名

类名就是给每个盒子起了个名字，就可以更好地找到这个盒子，选取盒子更容易，后期维护更方便

4.3.到底用margin还是padding

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有简单的方法实现

4.4自己做没思路

布局有很多实现方式，同学们可以开始先模仿，然后再做出自己的风格

最后，一定要多运用辅助工具，比如屏幕画笔，ps等等