5.1移动端浏览器
- 移动端浏览器基本以webkit内核为主，因此只需考虑webkit兼容性问题。
- 可以放心地使用H5标签和CSS3样式
- 同时我们浏览器的私有前缀只需要考虑添加webkit即可
5.2 CSS初始化normalize.css
移动端CSS初始化推荐使用normalize.css/
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的bug
- Normalize.css:是模块化的
- Normalize.css:拥有详细的文档
官网地址：http://necolas.github.io/normalize.css/
之后写移动端的页面将其引入就可以了
5.3 CSS3盒子模型box-sizing
- 传统模式宽度计算：盒子的宽度=CSS中设置的width+border+padding
- CSS3盒子模型：盒子宽度=CSS中设置的宽度width,里面包含了border和padding
- 也就是说，CSS3中的盒子模型，padding和border不会撑大盒子
<body>
<div></div>
<div></div>
</body><style>
div:nth-child(1) {
/* 传统的盒子模型 */
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid red;
/* box-sizing: content-box; 这是默认存在的传统的盒子模型*/
}
div:nth-child(2) {
/* 有了这句话，就让盒子变成CSS3盒子模型 */
/* padding和border不会再撑大盒子 */
/* 但是存在兼容性问题，低版本浏览器不支持，但是到了移动端可以放心大胆使用 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
</style>