后端人员常用的前端知识
进入新公司接近两个月，让我这个后端人员做了两个月的前端开发。布局中总会踩坑，总结一些技巧分享一下。
1. 两个盒子模型
布局之前先初始化一下样式，因为不同的浏览器会设置默认的一些样式，例如 body 的 margin、ul li 或者 ol li 的默认样式 。
确定一下用哪个盒子模型，才能让自己设置的 margin、padding、border 跟自己想布局的那样展示出来。盒子模型如下图，中心的 content 是布局的地方，依次往外分别是 padding border margin。
第一种，为 W3C的标准盒子模型，特点： css 中设置的 width 就是content 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 120px；
<style>
div{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#div1{
width: 100px;
height: 100px;
padding: 5px;
border: 5px solid yellow;
background-color: red;
}
</style>
<body>
<div id="div1"></div>
</body>
第二种，为 ie盒子模型（我一般用这个），特点： css 中设置的 width 就是 content + padding + border 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 100px；
2. position 定位
经常在面试的时候遇到。第一种，普通的 position 不设置的话默认为 static ，不会脱离文档流。第二种 relative 不会脱离文档流，本身位置会被保留，但是本身的元素会相对于原来文档流中的位置进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置，例子如下
<style>
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container{
width: 800px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
#div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
#div2{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
left: 10px;
}
#div3{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</body>
第三种 absolute 会脱离文档流，本身位置不会被保留，本身的元素会相对于离它最近的 position 不是 static 的父元素进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置。一般常用的用法：外层元素相对定位，内层元素绝对定位，这样交替定位。水平垂直居中(top: 0; left: 0; right: 0; bottom: 0;margin: auto;)
3. 杂项
font-size: 单位可以用 em；em 是利用离它最近的定义了 font-size 的元素尺寸的相对值；一般浏览器默认 font-size 默认 16px。
<!DOCTYPE html> 头部声明是让浏览器用标准模式去解析 html ，这样才会统一，否则浏览器会用奇异模式解析，就是不同的浏览器使用不同的解析方式，这样结果就不同了；还声明这是使用 h5 解析，可以使用 audio video 等标签，可以连接摄像头等。
