初入HTML5
在最开始接触HTML5的时候，你会遇到的大多是一些常见常用的属性以及属性值。它们分类广、品种杂且使用率高。到css各种样式的时候，你会接触到更多的东西，各种属性、选择器、盒子模型都是重点。那么，现在我们就看一下它们到底是什么。
列表
列表是很重要的一个块级标签。
分为有序列表ol、无序列表ul和定义描述列表dl，我们常会用到的就是无序列表ul。列表中的每一项都用li表示。
无序列表ul需要注意的是，列表中的每一项前面都会有一个符号，而我们在用到它时一般是不会要前面的符号的。这时就要用到 list-style：none；了，取消无用的符号。
1 <ul>
2 <li>第一项</li>
3 <li>第二项</li>
4 <li>第三项</li>
5 </ul>
CSS常用选择器
css修改页面样式时，必须使用选择器进行包裹。
选择器{
属性1：属性值2；
属性2：属性值2；
}
常用选择器：
| 选择器名 | 写法 |
| 标签选择器 | HTML标签名{} |
| 类选择器（class选择器） | .class名{} |
| ID选择器 | #ID名{} |
| 通用选择器 | *{} |
| 并集选择器 | 选择器1，选择器2，选择器3，...选择器n{} 多个选择器之间逗号分隔 |
| 交集选择器 | 选择器1选择器2...选择器n{} 多个选择器之间紧挨着，没有分隔 |
| 后代选择器 | 选择器1 选择器2 ... 选择器n{} 空格分隔 |
| 子代选择器 | 选择器1>选择器2>...>选择器n{} |
选择器优先级：
1.css生效的第一规则是“近者优先”！！即，那个选择器作用于最里层标签，则这个选择器生效。
2.当选择器作用于同一层时，可以根据选择器的优先级权重进行累加计算。
ID选择器*10 + class选择器*10 + 标签选择器*1
注意：并集选择器，相当于多个选择器拆开写，因此并集选择器不参与权重累加。
3.当做用于同一层，而且选择器优先级完全相同时，谁写在后面谁生效。（后来者居上）
CSS常用文本属性
font-weight：字体粗细。bold-加粗、normal-正常、lighter-细体；也可以使用100-900的数值，400表示normal，700表示bold。
font-style：字体倾斜。italic-倾斜、normal-正常
font-size：字号。可以写px单位，也可以用%表示。
font-family:字体系列（字体族）。可以直接写字体名，也可以写字体系列名；常用的字体系列有：serif-衬线体 sans-serif 非衬线体
line-height:行高。可以使用px单位、可以直接写数字（表示默认行距的几倍）、也可以写百分比（表示默认行距的百分比）。行高的重要作用：让单行文字在父容器中垂直居中！
text-align：设置区域内的行级元素的水平对齐方式；
letter-spacing：字符间距，字与字之间的间距。
text-decoration:文本修饰。常用与去掉超链接的下划线。
overflow:设置超出区域的文字如何显示；
auto，默认效果。文字少不显示滚动条，文字超出时显示垂直滚动条；
hidden，无论蚊子多少都不显示滚动条，文字超出时将隐藏不显示；
scroll，无论文字多少都会显示垂直、水平两根滚动条；
white-space: nowrap; 设置中文，行末不断行显示。
text-overflow: ;设置行末多余文字的显示方式。
【设置行末显示省略号的方法（三行代码，缺一不可）】
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
CSS常用背景属性
background-color:背景色。
background-image:背景图。使用url("")选择图片路径。当背景图和背景色同时存在时，背景图会覆盖背景色。
background-repeat:背景图的重复方式。repeat-平铺（默认）； no-repeat-不平铺 ；repeat-x-沿x轴平铺 ；repeat-y-沿x轴平铺
background-position:背景图偏移量。
background缩写形式：background-color | background-image | background-repeat | background-attachment | background-position
伪类选择器
：link - 未访问状态
：visited - 已访问状态
：hover - 鼠标指上状态
：active - 激活选定状态（鼠标线点下未松开）
注意：当超链接多种伪类状态共存时，必须按照link-visited-hover-active的顺序排列，否则会导致某些状态不能生效。
CSS盒子模型
margin:外边距
①只写一个值时，表示四周的外边距都是这个值；
②写两个值：第一个表示上下，第二个值表示左右；
③写三个值：分别表示上、右、下，左边默认表示右边；
④写四个值：分别表示上、右、下、左，顺时针方向。
⑤margin: 0px auto; 设置块级元素在父容器中水平居中！！！！很重要！！！
padding:内边距,属于div区域，但不能往里面写东西。
①只写一个值时，表示四周的外边距都是这个值；
②写两个值：第一个表示上下，第二个值表示左右；
③写三个值：分别表示上、右、下，左边默认表示右边；
④写四个值：分别表示上、右、下、左，顺时针方向。
设置padding后，将导致div可见区域被撑大！！使用时必须注意div所占的实际大小。
border：边框
共接收3个属性：边框的宽度、边框的样式、边框的颜色。
边框样式不能省略，其他两个可以省略。但是原则上一般三个属性都要写。
三个属性的顺序可以随意颠倒，没有先后要求。
- 如果当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子和父盒子的上边线重合，而导致两个盒子同时下来。
【解决办法】
1、给父容器添加一定的padding-top。会导致父容器产生不必要的padding区域。不推荐使用！！
2、给父容器添加一定的上边框（border-top）。会导致父容器产生不必要的边框域。不推荐使用！！
3、给父容器或子容器添加float属性；
4、给父容器添加overflow。推荐！对页面布局不会产生影响。
border-radius:圆角。
共接收8个属性值，分别表示：x轴（左上、右上、右下、左下）/Y轴（左上、右上、右下、左下）
box-shadow:盒子阴影。
共接收六个属性值，用空格分隔；
①水平阴影距离（必选）：可正可负。正数右移，负数左移。
②垂直阴影距离（必选）：可正可负。正数上移，负数下移。
③阴影模糊半径（可选）：只能为正数，默认为0。数值越大，阴影越模糊。
④阴影扩展半径（可选）：可正可负，默认为0。数值增大，阴影扩大；数值减小，阴影缩小。
⑤阴影颜色（可选）：默认为黑色。
⑥内外阴影（可选值）：默认为外阴影。inset 表示内阴影。
eg：box-shadow: 0px 0px 10px 0px red inset;设置为外面一周的阴影。
盒子模型分类
1.标准盒子（W3C盒子）：我们设置的宽度和高度仅仅包含content区域。再添加padding和border时，会导致盒子的可视区域增大；box-sizing: content-box; 使用标准盒子，默认。
2.IE盒子（怪异盒子）：我们设置的宽度和高度包含content+padding+border；添加padding和border会导致content区域被压缩，盒子的可视区域不会增大；box-sizing: border-box;
CSS定位
1.相对定位 relative：
定位机制：①相对定位是相对于自己原来的位置进行定位；当top等属性不设置时，元素位置不会发生任何变化；②相对定位不会释放掉自己原来的位置，也不会影响文档中其他元素。
2.绝对定位 absolute：
定位机制： ①相对于第一个有定位的祖先元素进行定位。（即，第一个使用relative、absolute、fixed定位的祖先元素） ②如果祖先元素都没有定位，则相对于浏览器的左上角进行定位；但是，如果要使用绝对定位，都要先给父容器使用相对定位。③使用绝对定位的元素，会从文档流中彻底删除！原有空间被释放。
3.固定定位 fixed：
定位机制：①固定定位永远相对于浏览器窗口进行定位。②固定定位会将元素彻底从文档流中删除，原有空间释放；③固定定位的元素不随滚动条的滚动而滚动!
CSS3过渡、变换
- transition：过渡属性，共接收四个属性值：
①参与过渡的CSS样式属性。可以指定为all/none；
②过渡需要多长时间完成。通常0.3s 0.5s。
③过渡的样式效果。常选ease！！！
④过渡延时几秒后开始。可以省略不写。
- transform变换属性：
translate(100px,100px) 平移，分别表示X/Y轴，Y轴不写默认为0.
scale(1.5) 缩放，只写一个值，表示X/Y都进行缩放。
rotate(180deg) 旋转 默认绕Z轴转。单位不能省略。
skew(40deg) 倾斜 表示沿X轴、Y轴倾斜多少度。只写一个值表示沿X轴倾斜。
transform-origin：定义变换起点，常用于与rotate旋转配合。
