一，CSS继承
文字相关的样式可以被继承
例 : color line-height font-style font-size font-weight
布局相关的样式不能被继承 （默认行为）
通过设置inherit值，可以改变默认的继承方式。
二，CSS优先级
相同样式优先级
当设置相同样式时，后写的优先级较高，但不建议出现重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，后引入的优先级高。
单一样式优先级
style行间> id> class> tag> *> 继承（inherit）
1000 100 10 1
！important 权重 > 10000（建议不要乱用，非规范写法）
场景 ： 紧急情况下使用。
标签+类的权重 > 单类
群组和单一样式？
群组选择器与单一选择器的权重相同，靠后写的优先级高。
层次选择器
权重 ：把对应的数值加起来
约分 ： 把相同的选择器约掉
建议 ： 层次选择器最好不要超过三层
三，CSS盒子模型
1，盒子 ：
content < padding < border < margin
内容 内填充 边框 外填充
padding ： 内填充（内边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
margin ： 外填充 （外边距）
写了一个值 ： 20px （上右下左）
写了两个值 ： 20px 30px （上下 左右）
写了三个值 ： 20px 30px 20px（上 左右 下）
写了四个值 ： 20px 20px 20px 20px(上 右 下 左)
注 :1. 背景颜色会填充到margin以内的区域。
背景图 ： 默认背景图会平铺border padding content区域。
只有一张背景图时，从padding区域开始添加（默认行为）
2，文字只会在content区域
3，padding属性不可以出现负值，margin属性可以出现负值。
2，box-sizing？
box-sizing属性
content-box（默认值）： 整个盒子的宽 = content（width）+ padding + border
border-box ： 整个盒子的宽 = content（width-padding-border）+ padding +border
应用场景 ：
1，可以省略一些计算的环节。
2，可以针对100%的换算。
3，盒子模型的问题
1，margin叠加的问题
只会出现在上下margin中，左右是不存在margin叠加问题的。
特点 ： 会取叠加中较大的值。
解决方法：
1.BFC规范（以后介绍）
2.想办法只给一个元素添加间距
2，margin传递的问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递的问题的
特点 ： margin-top会导致父容器与子容器一起向下移动。
解决方法 ：
1.BFC规范（比较推荐）
2.给父容器加边框（不太推荐）
3.margin换成padding（将子容器的margin属性改为父容器的padding属性）
4，盒子的应用
1，margin ： 0 auto（实现容器的左右居中，上下不行）
上下居中方法 ： 1.position 2.transition 3.flex（以后学习）
文字居中方法 ： 左右居中（text-align ： center） 上下居中 （line-height ： height）
2，当一个盒子不写宽度的时候？
盒子的宽度默认与父容器的宽度相同，
并且当设置padding，border，margin的时候，盒子的content会从新计算。
三，PS的简单学习
1，对图像进行放大缩小 ： alt+鼠标滑轮
2，工具栏中的第二个 ：矩形选框工具（测量尺寸大小）
3，通过信息面板，可以查看到测量的尺寸大小（在窗口菜单可以找到，需要把单位改为像素）
四，overflow（溢出隐藏）
给盒子一个固定大小后，当盒子里的内容比较多的情况下，就可能产生溢出的现象。
溢出隐藏 ：
hidden ： 溢出部分隐藏
scroll ： 容器出现下拉页面
auto ： 自动化（未超出时为hidden，超出后变为scroll）
overflow-x ：hidden；
overflow-y ： scroll；（可以对容器的x，y分别设置溢出属性）
盒子嵌套实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 /* #box1{width: 350px ;height: 350px;border: 1px black dashed;padding: 30px;}
9 #box2{
10 border: 5px blue solid;
11 padding: 20px;
12 background: #f6f6f6;
13 }
14 #box3{
15 background: #ffa0df;
16 padding: 40px;
17 }
18 #box4{
19 border: 1px white dashed;
20 padding: 3px;
21 }
22 #box5{
23 border: 1px white dashed;
24 padding: 49px;
25 }
26 #box6{
27 border: 5px #fcff00 solid;
28 height: 100px;
29 background: #96ff38;
30 } */
31 #box1{
32 width: 400px;height: 400px;
33 border: 1px black dashed;
34 }
35 #box2{
36 border: 5px #d7effe solid;
37 margin: 30px;
38 background: #f6f6f6;
39 }
40 #box3{
41 background: #ffa0df;
42 margin: 20px;
43 border: 1px #ffa0df dashed;
44 }
45 #box4{
46 margin: 40px;
47 border: 1px white dashed;
48 }
49 #box5{
50 border: 1px white dashed;
51 margin: 3px;
52 }
53 #box6{
54 height: 100px;
55 margin:49px;
56 border: 5px #fcff00 solid;
57 background: #96ff38;
58 }
59 </style>
60 </head>
61 <body>
62 <div id="box1">
63 <div id="box2">
64 <div id="box3">
65 <div id="box4">
66 <div id="box5">
67 <div id="box6">
68
69 </div>
70 </div>
71 </div>
72 </div>
73 </div>
74 </div>
75 </body>
76 </html>
盒子嵌套实例
原文地址：https://www.cnblogs.com/lykpy/p/12318529.html