今天所学内容（H5新标签、CSS3新特性、盒模型和过渡）
一、H5新标签
1、H5新增的一些标签（新特性都有兼容性，支持IE9以上版本）
例：
头部标签<header></header>
导航标签<nav></nav>
内容标签<article></article>
定义文档某个区域<section></section>
侧边栏标签<aside></aside>
尾部标签<footer></footer>
新标签的特点是：结构更明了，语义清晰，同时也可增加浏览器对标签的解析。
2、新增的多媒体标签有：
（1）音频<audio>
（2）视频<video>
二、CSS3新特性
新增了3个选择器分别是：
属性选择器、结构伪类选择器、伪元素选择器
1、属性选择器
（1）利用属性选择器就可以不用借助于类选择器语法：
例：input[value] {
color：red；
}
（2）属性选择器还可以选择属性=值的某些元素（重点）
例：input[type="text"] {
color：pink；
}
（3）属性选择器可以选择属性值开头的某些元素
例：input[class^=icon] {
color:bule;
}
（4）属性选择器可以选择属性直接为的某些元素
section[class$=data]{
color:yellow;
}
注意：类选择器、属性选择器、伪类选择器、权重尾10
2、结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，
常用于根据父级选择里面的子元素。
例
<ul>
<li>这是第1个孩子小li</li>
<li>这是第2个孩子小li</li>
<li>这是第3个孩子小li</li>
<li>这是第4个孩子小li</li>
<li>这是第5个孩子小li</li>
</ul>
（1）
/* 选择ul里面的第一个孩子小li */
ul li:first-child {
/* 颜色改成红色 */
color: red;
}
（2）
/* 选择ul里面的最后一个孩子小li */
ul li:last-child {
/* 颜色改成蓝色 */
color: blue;
}
（3）
/* 选择第几个孩子 */
ul li:nth-child(n) {
background-color: pink;
}
● n可以是数字，关键字和公示
● 如果是数字，就是选择第n个子元素，里面的数字从1开始......
● n可以使关键字：even偶数、odd奇数
3、伪元素选择器（重点）
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，
从而减缓HTML结构。
选择符 简介
：：before 在元素内部的前面插入内容
：：after 在元素内部的后面插入内容
注意：
①before和after创建一个元素，但是属于行内元素
②新创建的这个元素在文档中是找不到的，所以我们称之为伪元素。
③语法： element：：before{}
④before和after必须有content属性
⑤before在父元素内容前面创建元素，after在父元素内容后面插入元素。
⑥伪元素选择器和标签选择器一样，权重为1。
例：
<div>
爱你！！！
</div>
div::before {
content: '我';
color: red;
}
● 伪元素还有一个作用，可以清除浮动 ，下面代码示例：
/* 伪元素清除浮动 */
div::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
三、CSS3盒子模型
css3中可以通过box-sizing来指定盒模型
可以分为两种情况：
（1）box-sizing：content-box 盒子大小为 ：
width+padding+border（以前默认的）
（2）重点 box-sizing：border-box 盒子大小为width
如果盒子模型我们改为border-box。那么padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
①例：
/* 添加content-box盒模型的情况 */
div {
box-sizing: content-box;
width: 200px;
height: 200px;
margin: 100px auto;
border: 10px solid #666;
background-color: pink;
padding: 20px;
}
可以得出结论，添不添加content-box效果是一样的，会撑大盒子，盒子宽高度就等于width+padding+border。
②例：
/* 添加border-box盒模型的情况 */
div {
box-sizing: border-box;
width: 200px;
height: 200px;
margin: 100px auto;
border: 10px solid #666;
background-color: pink;
padding: 20px;
}
由此可知，添加了box-sizing：border-box 属性后，padding和border不在撑大盒子了。
四、过渡（重点）
过渡（transition）是css3中最具颠覆的特性之一，我们可以在不使用FLASH动画或JavaScript的情况下，当元素从一种样式变换成另一种样式时为元素添加效果。
过度动画：是从一个状态渐渐地过渡到另外一个状态，我们经常和hover一起搭配使用。
语法：
transition：要过渡的属性、花费时间、运动曲线、何时开始
1.属性：想要变化的css属性。宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了。
2.花费时间：单位是秒（必须填写），比如0.5s
3.运动曲线：默认是ease（可以省略）
4.何时开始：单位是秒（必须写单位），可以设置延时触发时间，默认是0秒（可以省略）。
● 记住过渡的口诀：谁做过渡给谁加
今天所学知识全部掌握，就是不太熟练，需要在练习巩固一下。
|
