CSS排版

块级元素【div p h1 ul li form 】: 元素独占一行，有序纵向排列；可设置宽高
行内元素【a label span br …】: 元素都在一行，有序横向排列；不可设置宽高，margin padding 都没用，默认高度就是元素内容的自身高度

display:block;  // 元素显示为块级元素
display:inline; // 元素显示为行内元素
display:inline-block; // 元素显示为内联元素，可像块级元素设置宽高，可像行内元素排列在一行

display:table; // 像table布局那样处理不是 table的元素	
display:flex; // flex 弹性布局

position:static; // 静态定位，静态定位就是按照标准流的方式显示，静态定位的元素不会受到 top， bottom， left， right 影响。
position:relative; // 相对定位，占有空间位置；以自身位置为基准；一般【子绝父相】
position:absolute; // 绝对定位，不占空间位置；没有父盒子，子盒子以浏览器左上角为基准；有父盒子，以父盒子左上角为基准；类似于浮动
position:fixed; // 固定定位，相对于 浏览器窗口大小，常用来设置 背景图片撑满

float:left/right;
1.设置了浮动的元素，脱离标准流（脱标）。
2.行内元素设置浮动可以设置宽高。
3.块级元素设置浮动可以在一行显示。

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。
一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动。

清除浮动的常用方式【设置在父盒子上】：

.clearfix:after {
    content: "";
     /*设置内容为空*/
     height: 0;
     /*高度为0*/
     line-height: 0;
     /* 行高为0*/
     display: block;
     /*将文本转为块级元素*/
     visibility: hidden;
     /*将元素隐藏*/
     clear: both/*清除浮动*/
 }

 .clearfix {
     zoom: 1;
     /*为了兼容IE*/
 }

【浏览器引擎前缀】

-webkit-transition:width 2s;
-moz-transition:width 2s;
-o-transition:width 2s;
transition:width 2s;

其实上述的 css 代码会执行的只有一条，浏览器只会响应其中的一条，然后忽略其它几条。 你是不是会感到疑惑，一个 transition 属性会有这么多种写法，-webkit- 、-moz- 、-o- 这些都是什么呢？还是说这些不是一种属性。 -webkit- 、-moz- 、-o- 这些其实就是我们这里要讲到的前缀。这里的前缀是浏览器引擎前缀（ Vendor prefix ），它是浏览器公司在新的或者是正在实验中的 CSS3 功能变为 CSS3 规范之前，提供一种对该功能的支持方式。我们介绍一下这些浏览器引擎前缀：

-moz- ：Firefox 等使用 Mozilla 引擎的浏览器。
-webkit- ：Safari 、 Chrome 等使用 Webkit 引擎的浏览器。
-o- ：Opera 浏览器早期。
-ms- ：IE 和 Edge 等 。

浏览器引擎前缀的使用方法也一目了然，将前缀放到属性名前即可。这些前缀并非都是需要的，因为有些属性已经被大部分浏览器所支持。但是一般情况下加上这些前缀是不会有问题的，只要记得把不带前缀的放在最后一条即可。

【伪类选择器】

E:root // 该选择器选择文档的根节点，效果和设置 html 相同

E:nth-child(n) // 该选择器选择 E 元素父元素的第 n 个子元素。
// n 有两种取值：n 取值为整数；这些子元素不一定是同种类型
// n 取值为表达式；当取值为表达式时，变量只能使用 n，并且 n 从 0 开始依次加一，即取值为表达式时，选择器选择多个值，[n=0,1,2,3...]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。
// 使用表达式时，CSS3 提供了两个特殊值：odd 和 even。odd 相当于 2n+1 ，even 相当于 2n。

E:nth-last-child(n) // 从后往前
E:nth-of-type(n) // 元素选择的是与 E 相同类型的兄弟元素
E:nth-last-of-type(n) // 从后往前
E:last-child // 该选择器选择 E 元素的父元素的最后一个子元素；注意：注：该选择器需要满足父元素的最后一个元素和 E 才会选取，否则不会选取

E:first-of-type // 该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。
E:last-of-type

E:only-child // 该元素选择的是 E 是其父元素唯一的子元素
E:only-of-type // 该选择器选择的是 E 是其父元素唯一的子元素类型
E:empty // 该选择器选择的是空元素。
E:target // 该选择器选择的是一个 id 与 当前 url 匹配的元素
E:not(s)  // 该选择器匹配不符合参数选择器 s 描述的元素
E:enabled & E:disabled // 该选择器匹配的是元素的可用和禁用状态
E:checked // 该选择器一般用于 radio-button 或 checkbox，选择它们的 checked 状态：