初入HTML5

在最开始接触HTML5的时候，你会遇到的大多是一些常见常用的属性以及属性值。它们分类广、品种杂且使用率高。到css各种样式的时候，你会接触到更多的东西，各种属性、选择器、盒子模型都是重点。那么，现在我们就看一下它们到底是什么。

列表

列表是很重要的一个块级标签。

分为有序列表ol、无序列表ul和定义描述列表dl，我们常会用到的就是无序列表ul。列表中的每一项都用li表示。

无序列表ul需要注意的是，列表中的每一项前面都会有一个符号，而我们在用到它时一般是不会要前面的符号的。这时就要用到 list-style：none；了，取消无用的符号。

 <ul>
     <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
 </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旋转配合。