CSS页面布局常见问题总结

在前端开发中经常会碰到各种类型布局的网页，这要求我们对css网页布局非常熟悉。其中水平垂直居中布局，多列布局等经常会被使用到，今天就来解决一下css布局方面的问题。

水平垂直居中的几种方法

说到水平垂直居中布局我们一般会立马想到以下几种情况：

实验参数设置

<div class="container">
    123
    <p class="inner">456</p>
    <span class="inner">789</span>
    <img class="inner" src="img/1.jpg">
</div>

未脱离文档流时

文本元素

/*方法一：*/
/*配合单行文字使用*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
    line-height:400px;
}
/*方法二：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
}
.container:after{
    display:inline-block;
    content:"";
    height:100%;
    vertical-align:middle;
}

行内元素

/*方法一：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
/*方法二：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
}
.container:after{
    display:inline-block;
    cotent:"";
    height:100%;
    vertical-align:middle;
}

块状元素

/*方法一：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
/*方法二：*/
/*配合多行文本使用*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.inner{
    width:200px; /*需要给子元素一个宽度*/
    margin: auto;
}

替换元素

常见的替换元素有：<img> <input> <textarea> <select> <button>

/*方法一：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
}
.container:after{
    display:inline-block;
    cotent:"";
    height:100%;
    vertical-align:middle;
}
.inner{
    vertical-align:middle;
}
/*方法二：*/
.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.inner{
    vertical-align:middle;
}

水平垂直居中的终极方法：

.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    /*以下是个各种兼容代码*/
    /* 老版本语法: 比较少用*/
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
}

优点：同样的代码解决各种问题

缺点：IE8及以下不兼容

脱离文档流时

行内元素、块状元素、替换元素

由于行内元素加上position:absolute;之后会生成一个块级框，与块状元素类似，其高宽可控

/*当知道子元素高宽时*/
.container{position:relative;}
.inner{
    position: absolute;
    width:100px;
    height: 50px;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-25px;
}
或者
.inner{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:200px;
    height:设置为适当的高度;
    margin: auto;
}
/*当子元素高宽未知时*/
.inner{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

常见的几种页面布局

固定布局

负边距除去列表右边框

<style type="text/css">
#div1 { width: 580px; height: 380px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; }
.box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; }
#div2 { margin-right: -20px; /*通过在外面包裹的div上添加负边距，除去列表的右边框*/}
</style>
<div id="div1">
    <div id="div2">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

双飞翼布局

1. 三列布局，中间宽度自适应，两边定宽；
2. 中间栏要在浏览器中优先展示渲染；
3. 允许任意列的高度最高；
4. 要求只用一个额外的DIV标签；
5. 要求用最简单的CSS、最少的HACK语句；

body,html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; }
#container { width: 90%; margin: 0 auto; height: 100%; }
#header,#footer { height: 12.5%; background: deepskyblue; }
#main { height: 75%; }
#center,#left,#right { height: 100%; float: left; }
#center { width: 100%; background: lightgreen; }
#left { background: lightcoral; width: 20%; margin-left: -100%; }
/*左侧设置margin-left: -100%;使得left移上去*/
#right { background: lightblue; width: 20%; margin-left: -20%; }
/*右侧设置margin-left: -20%;使得right在右侧*/
#main-inner { margin: 0 20%; }
/*双飞翼布局和圣杯布局的区别在于是否有main-inner块，如果没有可直接通过设置
#center{padding: 0 20%;}
#left{position:relative;left:-leftwidth;}
#right{position:relative;right:-rightwidth;}
</style>
<div id="container">
    <div id="header">
        header
    </div>
    <div id="main">
        <div id="center">
            <div id="main-inner">
                center
            </div>
        </div>
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</div>

流式布局

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用布局方式。

缺点：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定(现在用em,rem)，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

弹性布局

由于前人总结的很好，我就不造轮子了

一劳永逸的搞定 flex 布局

由于flex是css3的属性，低版本浏览器不兼容

瀑布流布局

masonry实现瀑布流布局

具体使用方法可参考官网教程

响应式布局

@media screen and (max-width:320px){ /*视窗<=320px*/
  /*css code */
}
@media screen and (min-width:769px)and(max-width:1000px){ /* 769px<=视窗<=1000px */
  /*css code */
}

清除浮动的几种方法

空标签

<div style="clear:both;"></div>

优点：简单明了

缺点：增加无意义的空标签，违背了结构表现分离，给后期维护带来了问题。

利用BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

以下元素会生成BFC：

根元素
float属性不为none
overflow不为visible
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex中任何一个

after伪类样式

给父元素增加clearfix类即可,推荐使用

.clearfix:after{
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

参考文章：

1. CSS3与页面布局学习总结（四）——页面布局大全
2. 一劳永逸的搞定 flex 布局