1、伪元素
伪元素用于设置元素指定部分的样式。
比如说设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容
常见的伪元素如下图
常用伪元素
| p::after |
在每个 <p> 元素之后插入内容。 |
|
| p::before |
在每个 <p> 元素之前插入内容。 |
|
| p::first-letter |
选择每个 <p> 元素的首字母。 |
|
| p::first-line |
选择每个 <p> 元素的首行。 |
|
| p::selection |
选择用户选择的元素部分。 |
示例：
2、伪类
CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
常用伪类 ：
:hover 把鼠标放在链接上的状态
:nth-of-type()、:nth-of-child()等结构选择器
:checked、:disabled 等表单相关的伪类。
示例：
3、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
- 最基本的过渡属性例子
示例：
4、CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重等级:
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
5、CSS盒模型概述：CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。
下图为盒模型模型图。
6、一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：上(top)右(right)下(bottom)左(left)
边框相关属性：border-top(上边框) 、border-right(右边框)
border-bottom(下边框) 、border-left(左边框)
内边距相关属性：padding-top(上内边距) 、 padding-right(右内边距)
padding-bottom(下内边距) 、padding-left(左内边距)
外边距相关属性：margin-top(上外边距) 、 margin -right(右外边距)
margin -bottom(下外边距) 、margin -left(左外边距)
7、浮动(float)的三个属性值：
left：元素向左浮动
right：元素向右浮动
none：默认值，元素不浮动，并会显示在其在文本中出现的位置;
inherit：规定应该从父元素继承 float 属性的值。
通俗解释：浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear(清除浮动)的属性值。
8、清除浮动（clear）的三个属性值：
left：清除左侧浮动
right：清除右侧浮动
both：左右两边浮动
清除浮动的三个方法
1 额外标签法
在需要清除浮动效果的元素后添加一个无内容块级标签，并设置属性clear来清除浮动
示例：
2 伪元素清除浮动
在需要清除浮动效果的父元素上 通过::after的伪元素来设置清除浮动。需要注意的是伪元素默认行内元素，需要设置为块级元素才能达到效果。
示例：
3 通过给父元素设置overflow属性值为hidden或者auto来清除浮动
示例：
9、简单的表格如下
Table标签表示这是一个表格，tr标签为一行，th标签表示表头单元格，td标签表示数据单元格
10、 带边框、宽高的表格