1.marigin负值的使用
- 让每个盒子的margin往左侧移动-1px,正好压住相邻盒子边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果灭蝇定位，则加相对定位（保留位置），如果有定位，则加z-index）
2.文字围绕浮动元素
巧妙的运用浮动元素不会压住文字的特性。
-
html5新增语义化标签
这些标签主要是针对搜索引擎的，在IE9中需要把这些元素转换为块级元素。移动端更喜欢使用这些标签。这些标签只是基础的部分。
- header：头部标签
- nav：导航标签
- article：内容标签
- section：定义文档某个区域
- aside：侧边栏标签
- footer：尾部标签
-
html中新增的多媒体元素
- video：只支持三种视频格式MP4、WebM、Ogg～尽量使用MP4格式。
<video src="文件地址" controls="controls"></video>2. audio: 音频，支持ogg,map3格式等～尽量使用MP4格式。
可通过设置Muted属性来静音播放视频。
-
html新增的input类型
但是这些input必须放在form表单中进行验证。
| 属性值 | 说明 |
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入的必须为URL类型 |
| type="date' | 限制用户输入的必须为日期类型 |
| type="time" | 限制用户输入的必须为时间类型 |
| type="month" | 限制用户输入的必须为月类型 |
| type="week" | 限制用户输入的必须为周类型 |
| type="number" | 限制用户输入的必须为数字类型 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
-
html新增的表单属性
| 属性 | 值 | 说明 |
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。一般情况下都设置成off |
| multiple | multiple | 可以多选文件提交 |
-
css3新增属性
新增的css3特有的兼容性问题，ie9+才有支持。
新增选择器和盒子模型以及其他特性。
-
css3新增下选择器
- 属性选择器：属性选择器也有权重. ！！[ ]
类选择器、属性选择器、伪类选择器权重都是10。
| A[att] | 选择具有att属性的A元素 |
/*必须是input,但是同时具有value这个属性，选择这个元素 [] */
<input type="text" value="请输入用户名">
<input type="text">
<style>
input[value]{
color:pink
}
</style>| A[att = "val"] | 选择具有att属性且属性值为val的A元素 |
<input type="text" name="" id="">
<input type="password" name="" id="">
<style> input[type=text]{
color:pink
}
</style>| A[att^="val"] | 匹配具有att属性且值为val开头的A元素 |
| A[att$="val"] | 匹配具有att属性且值以val结尾的A元素 |
| A[att*="val"] | 匹配具有att属性且值中含有val的A元素 |
2. 结构伪类选择器
first-child ：伪类来选择父元素的第一个子元素
p:first-child:表示选择任何元素的第一个子元素的 <p> 元素
last-child ：选择所有父元素的最后一个子元素
nth-child(n)：选择所有父元素的第n个子元素
nth-child(n):字母只能是n，n可以是数字、关键字和公式。n从0开始自增。
odd，even,2n,2n+1,n+5,5n等,-n+5,前5个
p:first-of-type指定类型p的第一个
p:last-of-type指定类型p的最后一个
p:nth-of-type(n)指定类型P的第n个
前三个和后三个区别：
<style>
/* 说明下这样设置为什么没有反应的原因。nth-child会把所有的盒子都排列序号，
执行的时候先看：nth-child(1)之后回去再看前面的div
*/
section div:nth-child(1){
color: greenyellow;
}
/* nth-of-type会把指定元素排列序号，执行的时候首先去看div指定的元素，之后回去看：nth-of-type(1)第几个孩子*/
section div:nth-of-type(1){
color: greenyellow;
}
</style>
<body>
<section>
<p>第一个</p>
<div>第二个</div>
<div>第三个</div>
</section>
</body>3.伪元素选择器（重点）：伪元素是父亲的孩子。
利用css创建新标签元素，而不需要html标签，从而简化html结构。
before,after创建一个元素，但是属于行内元素。新创建的这个元素在文档树中是找不到的，所以叫伪元素。
语法：element::before{}
before和element必须有content属性。before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。伪类选择器和标签选择器一样，权重是1。
伪元素的应用场景：
- 伪元素字体图标
- 伪元素清除浮动：可以看作是额外标签法清除元素的一个升级。
/* 通过伪元素生成一个新盒子放在浮动的元素后面,插入的元素必须为块级元素，但是伪元素是行内元素，而且必须指定content */ .clearfix:after{ content: ''; display: block; height: 0; 不想看见这个盒子 clear: both;清除浮动的核心代码 visibility: hidden;不想看见这个盒子 }
.clearfix::before,.clearfix:after{
content: '';
/* display: table; 转换为块元素并在一行显示*/
display: table;
}
.clearfix:after{
clear: both;
}4. css3盒子模型
box-sizing指定盒模型，有2个值可选：content-box和border-box，这样计算盒子大小的方式就发生了改变。
（1）box-sizing:content-box盒子大小为width+padding+border（以前默认的）
（2）box-sizing:border-box盒子大小为width大小。
如果盒子模型我们改为box-sizing：border-box，那么padding和border就不会撑大了盒子。（前提padding和border不会超出width的宽度）
5.css3的filter
filter属性将模糊或颜色偏移等图形效果应用于元素。
filter：blur(5px);blur模糊处理，数字越大越模糊。
6.css3过渡
谁来过渡给谁加！
过渡动画：是从一个状态渐渐过渡到另外一个状态。（IE9以下版本不适用）
transition:要过渡的属性、花费时间、运动曲线、何时开始；
（1）属性：想要变化的css属性，宽度高度背景颜色和内外边距。all表示所有
（2）花费时间：单位是s
(3)运动曲线：默认是ease
（4）何时开始：单位是秒，可以设置延迟触发时间。默认是0s
9440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
