一.显示元素

1. 块级元素

独占一行；
宽度、高度、内外边距可以设置；
宽度默认和父级元素一样宽；
本质是一个容器盒子，里面可以存放块级元素、行内元素、行内块元素；

举例： div、h1-h6 、ul 、 li 、 ol

2. 行内元素(内联元素)

相邻的行内元素在一行上可以显示多个；
宽度和高度的设置是无效的；
默认宽度为它本身的宽度；
行内元素只能包含其他行内元素和文本； a 标签内不能含有a标签

举例： span 、a 、 strong 、em 、i

注意： a 标签内不能含有a标签，除非将外围的a标签强制转换为块级元素

3. 行内块元素

一行可以显示多个行内块元素，相邻的行内块元素之间存在空白的缝隙
默认宽度是它本身的宽度
高度、行高、外边距可以设置

举例：td 、input 、 img

二. 权重

！important —— 无限大

行内Style —— 1,0,0,0

id选择器 —— 0,1,0,0

类、伪类选择器 —— 0,0,1,0

元素、伪元素(标签) —— 0,0,0,1

*(通配符) —— 0,0,0,0

继承 —— 0,0,0,0

复合选择器权重计算：永远不会进位

   //属性选择器
   div[class^="icon-"]{ }   // 类名以 icon 6开头的
   div[class$="icon"] { }   // 类名以 icon 结尾的

三. 伪元素

::first-line 只适用于块级元素

   p::first-line {
       //为文本的首行添加样式
   }

::first-letter 只适用于块级元素

   p::first-letter{
       //为文本的首个字符添加样式
   }

::before 在某元素内容之前添加内容

   h1::before{     // 在h1 标题之前添加图片
       content: url(../i.png)
   }

::after 在某元素内容之添加内容

    h1::after{   // 在h1 标题之后添加字符串
        content:"结束"
    }

四. 伪类

:link

 //  设置未访问之前的样式
 a:link {
     color: black-
 }

:visited

 // 设置访问之后的样式
 a:vistited {}

:hover

 // 设置悬停时的样式
 a:hover { }    
 div:hover { backgroundColor:pink}

:active

 // 设置按下鼠标未弹起是的样式
 a:active {}

:focus

 // 设置获取焦点时的样式
 input:focus { }

五. 盒子模型

1. 标准的盒子模型

盒子总宽度 = width + padding + border + margin
盒子总高度 = height + padding + border + margin

padding 和border 会撑大标准盒子模型。

2. IE怪异盒子模型

盒子总宽度 = width + margin
盒子总高度 = height + margin
width/height 中包括了padding值和border值,设置padding值和border值，不会撑大盒子;只会向内缩小文本内容的空间。

3. box-sizing(css控制盒子模型)

content-box(默认值):元素的width、height 不包含padding，border 与标准盒子模型表现一致
border-box: 元素的width/height 包含 padding，border 与怪异盒子模型表现一致
inherit : 指定box-sizing 属性的值，应该从父元素继承

六. 空间塌陷

父子盒子空间塌陷(高度)
当父盒子和子盒子同时存在外边距，且两盒子之间没有缝隙的时候，两个盒子实际的外边距都为较大的那个。

兄弟盒子，空间塌陷(高度) 借鉴：blog.csdn.net/z020729/art…
如果两个兄弟盒子垂直外边距都为正，那么实际的外边距为两者中较大的那个；
如果两个兄弟元素垂直相接外边距值都为负，那么实际的外边距为两者中绝对值较大那个；

七. 动画的实现

1.transition(过渡动画)

2.animation(transition的升级版)

原理一致：补充中间帧。核心要点都是关键帧。

具体做法(参考MDN文档)： developer.mozilla.org/enUS/docs/W…

八. 浏览器的渲染

参考：blog.csdn.net/p1967914901… （该博主写的挺详细的）

Dom —— Html 构建 Dom 树(浏览器可以理解的结构)
Style —— CSS 构建 styleSheets(浏览器可以理解的结构)
Layout —— Dom + computedStyle = 布局树(只包含可见元素)
Layer —— 图层树 (处理页面滚动，复杂的3D转换，特定的节点生成对应的图层)
Paint —— 绘制(栅格化)
Show —— 合成，展示

CSS、CSS3