前端常见布局方式
常见的布局方式
常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。
一列定宽一列自适应
定位布局
左边的宽度写死，右边盒子使用定位拉伸法实现，left等于左边盒子的宽度，right等于0
.left-box{ width:200px; }
.right-box{ position:absolute; left:200px; right:0; }
或者左边的定位写死宽度，右边的写padding-left等于左边的宽度（常用一点）
.left-box{ width:200px; position: fixed; height:100%; }
.right-box{ padding-left:200px;}
浮动布局
左边的宽度写死并且浮动，右边盒子写overflow:hidden;利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响
.left-box {
width: 200px;
height: 150px;
float: left;
background: #f22;
}
.right-box {
height: 200px;
overflow: hidden;
background: #cff;
}
两列定宽一列自适应上面的布局方式同样适用
常见的三列布局一般使用圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局
两者都属于三列布局，是一种很常见的页面布局方式，
三列一般分别是子列、主列和附加列，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。
圣杯布局
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
}
双飞翼布局
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。
其他的话还有
flex布局
Flexbox又叫弹性盒模型。它可以简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。
Flex布局是我最喜欢的布局，合理使用它能够大大减少布局方面的工作, 例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。
响应式布局
网页可以自动识别设备屏幕宽度，根据不同的宽度采用不同的CSS的样式，从而达到兼容各种设备的效果。
响应式布局使用媒体查询(CSS3 Media Queries), 根据不同屏幕分辨率采用不同CSS规则
流式布局
流式布常见的就是bootstrap了它提供了一套响应式，移动优先的流式栅格系统(grid system)，将屏幕分成12列来实现响应式的。它的实现原理非常简单，Media Query加上float布局
