CSS高级学习-1
优先级
权值
标签权值为1，类权值为10，ID权值最高为100。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
层叠
内联式 > 嵌入式 > 外部式
重要性
为某些样式设置具有最高权值，使用!important。
p{color:red!important;}
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。
用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。
这时样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
但!important优先级样式是个例外，权值高于用户自己设置的样式。
布局模型
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
流动模型
流动模型，流动（Flow）是默认的网页布局模式。网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
浮动模型
使用float:left;/float:right;使块状元素可以并排显示。
层模型
层布局模型就像图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
层模型有三种形式：
1、绝对定位(position: absolute)
为元素设置层模型中的绝对定位。
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
2、相对定位(position: relative)
为元素设置层模型中的相对定位，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
3、固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
使用规范
1、参照定位的元素必须是相对定位元素的前辈元素。
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
特殊效果
水平居中
使用text-align:center来进行居中设置，但是当被设置元素是块状元素时，此设置不起作用。
-
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
-
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
-
加入 table 标签
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
-
设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
-
设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
-
垂直居中
-
父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
-
父元素高度确定的多行文本
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
在父元素设置此样式时，会对inline-block类型的子元素都有用
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
不用添加多余的无意义的标签，但兼容性不是很好，不兼容 IE6、7，而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
单位
| 单位 | 描述 | 使用场景 |
|---|---|---|
| px | 绝对单位，页面按精确像素展示 | |
| em | 相对单位，基准点为父节点字体的大小 | 前端行业做移动端会普遍默认用rem或em,可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果 em是指字体高度 浏览器默认1em=16px, |
| rem | 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算 | CSS3新加属性，chrome/firefox/IE9+支持 |
| vw | 视窗宽度，1vw等于视窗宽度的1% | |
| vh | 视窗高度，1vh等于视窗高度的1% | |
| vmin | vw和vh中较小的那个 | |
| vmax | vw和vh中较大的那个 |
