前端开发之CSS基础知识05-H5新增选择器特性即input理解

html5新增标签：

header 头部
nav 导航栏
footer 底部
article 文章
section 文档节点
aside 侧边

输入框候选栏：
<input type="text" list="start">
<datalist id="start">
<option value="a1"></option>
<option value="a2"></option>
<option value="a3"></option>
<option value="a4"></option>
<option value="a5"></option>
</datalist>

html 新增表单：

input：
email
tel 电话
url
number
range 拖动滑块
time
date
month 月份
week 第几周

新增表单属性:
预输入，点击时删除: <input type = "text" placeholder = "张三">

input框自动获取光标. <input type="text" autofocus = "autofocus">

多文件上传<input type="file" name="" id="" multiple>
<br />
不能为空<input type="text" required >

音乐视频控件:
注：source标签时为了让浏览器自动选择兼容性最好的格式，不同浏览器的兼容性格式不相同，避免格式不对不能播放
<audio autoplay="autoplay" controls="" loop> controls工具栏 loop循环 autoplay自动播放
<source src="../../Music/酷狗音乐/HQ/Alan Walker - Fade.mp3">
<source src="../../Music/酷狗音乐/HQ/Alan Walker - Fade.mav">
<source src="../../Music/酷狗音乐/HQ/Alan Walker - Fade.ogg">
</audio>

CSS3新增位置选择器伪类元素：从1开始

li:first-child{

}
li:last-child{

}
li:nth-child(even){ 所有偶数

}
li:nth-child(odd){ 所有基数

}
li:nth-child(2){ 选择第二个

}

li:nth-child(3n){ 从1开始,每第三个
background-color: red;
}

CSS3伪类元素。before and after：

before 在。。前面。。
在盒子内部的左边，加上内容

div::before{
content:"你好"
}

after 在。。侯敏啊

.div01::after{
content: "18岁";
}

CSS3盒模型：
在 CSS2当中，如果给了一个已经设置过宽高的盒子，设置padding或border,那么盒子的宽高会自动延长。

但是在 CSS3中，只要添加依据 box-sizing:border-box;那么盒子的宽高就会成为内缩模式，即在原来宽高的情况下，减少盒子本上的宽高，达到和总宽高一致