bootstrap和圣杯布局

Bootstrap

Bootstrap:是一种css框架，其中包含了很多写好了的样式和布局。 引用Bootstrap直接引入一个外部的bootstrap的文件即可

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
复制代码

栅格系统

栅格系统：就是可以直接不同屏幕的大小可以自己定义css样式来控制元素的所占父元素的宽度，也可以移动自己，或者移动自己影响后面的布局。

自己实现了部分栅格系统：

1. 在不同的media屏幕大小下设置样式，算出100%中12份，每一份的宽度，乘以自己的宽度大小就可以实现了
2. 每一个row清除浮动，和设置负margin来抵消每一个div的padding让在div里面的div元素再次可以对齐
3. 移动是通过相对定位设置left和right，还有设置margin来控制的

圣杯布局

让中间自适应俩边定宽

先让中间浮动在前面，定宽的俩边在后面。然后让前面的margin-left：-100%，第二个margin-left：-100px在中间元素的俩边，然后让中间的内容独立起来，设置padding或者在里面写一个子元素。再让俩边的定位移动就可以实现了。

转载于:https://juejin.im/post/5c12723f6fb9a049c30b1ecd