CSS基础知识二
知识点导航
* 权重问题（深入）
+ 同一个标签携带多个类名并有冲突
+ !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 中有三种方式可以脱标：
- 浮动
- 绝对定位
- 固定定位
