后端人员常用的前端知识

进入新公司接近两个月，让我这个后端人员做了两个月的前端开发。布局中总会踩坑，总结一些技巧分享一下。

1. 两个盒子模型

     布局之前先初始化一下样式，因为不同的浏览器会设置默认的一些样式，例如 body 的 margin、ul li 或者 ol li 的默认样式 。

      确定一下用哪个盒子模型，才能让自己设置的 margin、padding、border 跟自己想布局的那样展示出来。盒子模型如下图，中心的 content 是布局的地方，依次往外分别是 padding border margin。

第一种，为 W3C的标准盒子模型，特点： css 中设置的 width 就是content 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 120px；

 

第二种，为 ie盒子模型（我一般用这个），特点： css 中设置的 width 就是 content + padding + border 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 100px；

2. position 定位

     经常在面试的时候遇到。第一种，普通的 position 不设置的话默认为 static ，不会脱离文档流。第二种 relative 不会脱离文档流，本身位置会被保留，但是本身的元素会相对于原来文档流中的位置进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置，例子如下

    

        
1
        
2
        
3
    

第三种 absolute 会脱离文档流，本身位置不会被保留，本身的元素会相对于离它最近的 position 不是 static 的父元素进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置。一般常用的用法：外层元素相对定位，内层元素绝对定位，这样交替定位。水平垂直居中(top: 0;  left: 0;  right: 0;  bottom: 0;margin: auto;) 

第四种， fixed 会相对于界面固定，一般用于广告，导航栏，功能栏上。

3. 杂项

     font-size: 单位可以用 em；em 是利用离它最近的定义了 font-size 的元素尺寸的相对值；一般浏览器默认 font-size 默认 16px。

     头部声明是让浏览器用标准模式去解析 html ，这样才会统一，否则浏览器会用奇异模式解析，就是不同的浏览器使用不同的解析方式，这样结果就不同了；还声明这是使用 h5 解析，可以使用  audio video 等标签，可以连接摄像头等。