14 CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

语法：选择器:伪元素{attr:value;}

CSS 类也可以使用伪元素：选择器.class:伪元素{attr:value;}

(1)CSS2 - :before 伪元素

h1:before{
     content:url(images/logo.gif);
}

(2)CSS2 - :after 伪元素

h1:after{
     content:url(images/logo.gif);
}

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。
content 的内容一般可以为四种：

content:none 该值是默认值，不插入内容。
content:"string" 插入文本。
content:attr(属性) 插入标签属性值。
content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。

15 块级元素和行内元素

块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有

~

、

等，其中
标签是最典型的块元素。
块级元素特点：
- 总是从新行开始
- 高度，行高，外边距以及内边距都是可以控制的
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有< a >、、、、、< del >、< s >、< ins >、、等，其中标签最典型的行内元素。

行内元素的特点：
- 和相邻行内元素在一行上。
- 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或则其他行内元素。（a特殊）
 
 注意：
 1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
 2. 链接里面不能再放链接。
16 行内块元素(inline-block)

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。
17 CSS 三大特性

层叠、继承、优先级
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是：子承父业。
CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

使用了 !important声明的规则。
考虑权重时，需要注意的一些点：
- 继承样式的权重为0。
- 行内样式优先。
- 权重相同时，CSS遵循就近原则。
18 盒子模型（CSS重点）

CSS三大模块：盒子模型、浮动、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子边框（border）
```
语法：border : border-width || border-style || border-color 
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)
```
19 实现居中

1 外边距实现盒子居中
满足两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）
 然后给元素左右的外边距都设置为auto。
```
例如：.header{ width:960px; margin:0 auto;}
```
2 文字盒子居中
- 文字水平居中是 text-align: center
- 盒子水平居中左右margin 改为 auto
20 盒子模型布局稳定性

按照优先使用宽度（width）、其次使用内边距（padding）、再次外边距（margin）。
width > padding > margin
原因：
- margin 会有外边距合并还有 ie6下面margin 加倍的bug，所以最后使用。
- padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
- width 没有问题，我们经常使用宽度剩余法高度剩余法来做。
21 盒子阴影
```
语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
```
22 浮动(float)

CSS的定位机制有3种：普通流（标准流）、浮动和定位。
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。

23 定位(position)

position 属性值分为四种：
- static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
- relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
- absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
- fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index的特点：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性

CSS6 | 青训营笔记

14 CSS 伪元素

15 块级元素和行内元素

~

16 行内块元素(inline-block)

17 CSS 三大特性

18 盒子模型（CSS重点）

19 实现居中

20 盒子模型布局稳定性

21 盒子阴影

22 浮动(float)

23 定位(position)