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”来实现居中的
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1. 加入 table 标签
  
  利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
2. 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3. 设置 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中较大的那个