目录
一、知识复习
二、权重问题深入
2.1 同一个标签，携带了多个类名，有冲突：
2.2 !important标记
2.3 权重计算的总结
三、盒模型
3.1 盒子中的区域
3.2 认识width、height
3.3 认识padding
3.4 border
作业：
一、知识复习
● 加粗，倾斜，下划线：
|
● 背景颜色、前景色：
|
● class和id的区别
class用于css的，id用于js的。
1）class页面上可以重复。id页面上唯一，不能重复。
2）一个标签可以有多个class，用空格隔开。但是id只能有id。
● 选择器
说IE6层面兼容的： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。
|
IE7能够兼容的：儿子选择器、下一个兄弟选择器
|
IE8能够兼容的：
|
● css两个性质：
1） 继承性。有一些属性给祖先元素，所有的后代元素都集成上了。
哪些属性能继承：color、font-、text-、line-
2） 层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制：
■ 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
■ 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
再看几道题目:
第1题：
第2题：
第3题：
第4题：
二、权重问题深入
2.1 同一个标签，携带了多个类名，有冲突：
|
和在标签中的挂类名的书序无关，只和css的顺序有关：
|
红色的。因为css中red写在后面。
2.2 !important标记
|
important是英语里面的“重要的”的意思。我们可以通过语法：
|
来给一个属性提高权重。这个属性的权重就是无穷大。
一定要注意语法：
正确的：
|
错误的：
|
!important需要强调3点：
1） !important提升的是一个属性，而不是一个选择器
|
所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;
2） !important无法提升继承的权重，该是0还是0
比如HTML结构：
|
有CSS样式：
|
由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
3）!important不影响就近原则
如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
! important做站的时候，不允许使用。因为会让css写的很乱。
现在，我们知道层叠性能比较很多东西：
选择器的写法权重，谁离的近，谁写在下面。
2.3 权重计算的总结
还要知道 ! important 的性质。
三、盒模型
3.1 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
盒模型的示意图：
代码演示：
这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
宽度和真实占有宽度，不是一个概念！！
3.2 认识width、height
一定要知道，在前端开发工程师眼中，世界中的一切都是不同的：
比如丈量一个包子多宽？前端开发工程师，只会丈量包子馅：
丈量稿纸，前端开发工程师只会丈量内容宽度：
丈量人脸，只会丈量五官：
下面这两个盒子，真实占有宽高，完全相同，都是302*302：
|
真实占有宽度= 左border + 左padding + width + 右padding + 右border+左margin+右margin
这两个盒子的盒模型图，见下表：
 |  |
小练习，大家自己写三个502*502的盒子
答案（答案有无穷多种，我们只写其中三种）：
|
这三个盒子的盒模型图：
 |  |  |
如果想保持一个盒子的真是占有宽度不变，那么加width就要减padding。加padding就要减width。
3.3 认识padding
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。
也就是说，background-color将填充所有boder以内的区域。
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性：
|
top上、right右、bottom下、left左。
这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。
快捷键就是pdt、pdr、pdb、pdl 然后按tab。
综合属性：
如果写了4个值：
|
上、右、下、左
空格隔开的，四个数字就是上、右、下、左。
也就是说，前端开发工程师眼中的顺序不一样。
老百姓：上下左右
强调开发工程师：上、右、下、左
如果只写3个值：
|
上、右、下、??和右一样
如果只写2个值：
|
也就是说，
|
等价于：
|
要懂得，用小属性层叠大属性：
|
对应的盒模型图：
下面的写法错误：
|
不能把小属性，写在大属性前面。
下面的题，会做了，说明你听懂了：
题目1，说出下面盒子真实占有宽高，并画出盒模型图：
|
真实占有宽度 = 200 + 20 + 40 + 1 + 1 = 262px
题目2，说出下面盒子真实占有宽高，并画出盒模型图：
|
padding-left:10px； 和padding-right:20px; 没用，因为后面的padding大属性，层叠掉了他们。
强调一点，padding-left 不是padding-left-width
|
第3题，我现在给你盒模型图，请写出代码，试着用最最简单的方法写
width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;
第4题：
width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;
一些元素，默认带有padding，比如ul标签。
所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：
|
*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
|
3.4 border
就是边框。边框有三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
|
所有的线型：
比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师，处女座的，追求极高的页面还原度，那么不能使用css来制作边框。
就要用到图片，就要切图了。所以，比较稳定的就几个：solid、dashed、dotted
border是一个大综合属性，
|
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left
按3要素拆开：
|
等价于：
|
现在心里要明白，原来一个border是由三个小属性综合而成：
border-width border-style border-color。
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
|
按方向来拆
|
等价于
|
按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：
|
等价于
|
工作中到底用什么？很简答：什么简单用什么？
写法：
|
写法：
|
border可以没有，
|
某一条边没有：
|
也可以调整左边边框的宽度为0：
|
作业：
