DW的知识点

1、盒模型

     内容区、内边距（内填充）、边框、外边距

2、行内元素&块级元素  

（1）行内元素与块级元素直观上的区别。

      行内元素会在一条直线上排列，都是同一行的，水平方向排列。

      块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

（2）块级元素可以包含行内元素和块级元素。行内元素只能包含其他行内元素和文本。

（3）行内元素与块级元素属性的不同，主要是盒模型属性上。

     行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

行内元素与块级元素之间的相互转化：display  行内元素（inline）、块级元素（block）、行内块级元素（inline-block）

3、浮动 float

     清除浮动的几种常见的方法：

（1）直接为父元素设置高度；

（2）在父元素结束标签之前添加额外的元素，设置clear:both的样式；

（3）使用伪元素（推荐）

（4）通过触发BFC方式，实现清除浮动 overflow:hidden;

（BFC(Block formatting context)直译为"块级格式化上下文"。是一个完全独立的渲染区域，计算BFC高度时，浮动元素也会参与计算 ）

4、定位 position   (top、right、bottom、left)

static   默认

relative   相对定位   

absolute   绝对定位

fixed    固定定位

5、CSS简单的选择器

     *（通配符）、元素选择器、class选择器.、id选择器#

6、CSS分组和嵌套选择器

     分组选择器：同时为多个元素设置相同的样式；

     嵌套选择器：通过多个选择器嵌套匹配元素；

7、CSS组合选择器

    （1）后代选择器：用空格将2个选择器隔开，表示上下级关系；

    （2）子元素选择器：用>将2个选择器间隔开，表示父子关系；

    （3）相邻兄弟选择器：用+将2个选择器间隔开，可选择紧接在另一元素后的元素，且二者有相同父元素；

    （4）后续兄弟选择器：用~将2个选择器间隔开，选取所有指定元素之后的相邻兄弟元素

8、CSS伪类：CSS伪类是用来添加一些选择器的特殊效果。

      :link      ：未访问的链接的样式

      :visited  ：访问过的链接的样式

      :hover  ：设置鼠标滑过时候的样式

      :active   :已选中的链接的样式

       :first-child 伪类来选择元素的第一个子元素

       :last-child 伪类来选择元素的最后一个子元素

      :first-of-type  指定类型元素中的第一个

      :last-of-type 指定类型元素中的最后一个

      :nth-of-type(n) 指定类型元素中的第n个