知识点导航

* 权重问题（深入）
  + 同一个标签携带多个类名并有冲突
  + !important 标记 (尽量不要用)
  + 权重计算总结
* 盒模型
  + width
  + height
  + padding
  + border
  + margin
* 标准文档流
  + 块级元素和行内元素
  + 块级元素和行内元素的互转

一、权重问题（深入）<p>

同一个标签携带多个类名并有冲突<p>

与标签中类名顺序无关，只与css的顺序有关（红色）

! important 标记<p>

它的作用是把属性的权重提高到无穷大，尽量不要用

正确的：
font-size:60px !important;
错误的：
font-size:60px; !important; -->不能把 !important写在外面
font-size:60px important;   -->感叹号不能忘记

! important属性需要强调3点
1.它提升的是一个属性，而不是一个选择器
2.它无法提升继承的权重，该是 0 还是 0
3.它不影响就近原则

总结
!important 的作用就是将一个属性的权重乘以一个很大的数，但如果你原来权重是 0，无论怎么乘权重依旧是 0

权重计算总结<p>

注意 ! important 性质（尽量不用）

二、盒模型<p>

盒子中的区域<p>

一个盒子中主要的属性就 5 个：

width:     内容的宽度，不是盒子的宽度
height:    内容的高度，不是盒子的高度
padding:   内边距
border:    边框
margin:    外边距

width 和 height<p>

盒子的真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border
( 真实占有高度同理可得 ）

如果想要保持一个盒子的真实占有宽度不变，加 width 就要 减 padding，加 padding 就要减 width

padding<p>

padding区域是有背景颜色的。在 CSS 2.1中，background-color将填充所有 border 以内的区域

padding有两种书写方式：
第一种( 小属性 )：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
第二种( 综合属性 )：
padding: 30px 20px 40px 100px;
( 反人类的：上 右 下 左 )
padding: 30px 20px 40px; 等价于 padding: 30px 20px 40px 20px;
padding: 30px 20px ; 等价于 padding: 30px 20px 30px 20px;

border<p>

边框有三个要素：粗细 线性 颜色

书写方式 ( 综合属性 ):

border: 1px dashed red

按 3 要素拆开：

border-width: 1px;     -->边框宽度
border-style: dashed;  -->线性
border-color: red;     -->颜色

颜色不写默认为黑色，但是其他两个属性不写，边框显示不出来

所有的线性

但是，个别线性的类型在浏览器中会有细微差别，如果要求比较高，最好直接切图。比较稳定的有：solid、dashed、dotted

三、标准文档流<p>

宏观现象：从上到下，从左到右的布局方式

微观现象：

1.空白折叠现象
2.高矮不齐，底边对齐
3.自动换行

---

块级元素和行内元素<p>

在 CSS标准流 中，严格的将标签被分为两种：

1.块级元素
+ 霸占整行，不与其他任何元素并列
+ 可以设置 宽、高
+ 如果不设置宽度，默认为父亲的 100%

2.行内元素
+ 与其他行内元素并排
+ 不能设置 宽、高
+ 默认的宽度就是文字的宽度

在 HTML 中，标签被分为两类：

文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS 中的分类和 HTML 中的分类很像，就 p 不一样：
所有的文本级标签，都是行内元素，除了 p，p 是一个文本级的标签，但是它是一个块级元素；
所有的容器级标签都是块级元素

p 是文本级标签，但却是 块级元素

块级元素和行内元素的互转<p>

块级元素设置为行内元素：( 此时这个 div 与 span 无异 )

div { 
  display: inline; 
}

行内元素设置为块级元素：( 此时这个 span 与 div 无异 )

span{ 
  display: block
}

标准流中限制比较多，实现不了很多效果，所以我们要脱离标准流 ( 脱标 )，在 CSS 中有三种方式可以脱标：

1. 浮动

2. 绝对定位
3. 固定定位