css常用布局

一、三栏布局

三栏布局实现的是中间自适应宽度，两边固定宽度的布局，中间栏要放在文档流前面，以实现优先渲染。圣杯布局、双飞翼布局都是三栏布局的效果只是实现的方式不一样。

1.圣杯布局

    <div id="container">
        <div id="main" class="col">
        #main
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>
    
    
    <style type="text/css">
        body {min-width: 550px;}
        .col {position: relative;float: left;}

        #container {padding: 0 190px 0 190px;}

        #main {width: 100%;height: 400px;background-color: #ccc;}

        #left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

        #right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
    </style>

这边col设置了浮动，然后将left,right定位到左右不负采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。 设置完成后，定位成功，但是main的内容会被遮盖，所以container中间设置了padding值。给所有col设置position: relative，再分别给左右栏添加left、right值，使他们定位到正确位置。

2.双飞翼布局

    <div id="container">
        <div id="main" class="col">
            <div id="main-wrap">
                #main
            </div>
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>
    
    <style type="text/css">
        body {min-width: 550px;}
        .col {float: left;}

        #main {width: 100%;height: 400px;background-color: #ccc;}

        #main-wrap {margin: 0 190px 0 190px;}

        #left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}

        #right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

    </style>

双飞翼的实现就比较简单了，为main添加子元素main-wrap并设置pading。与圣杯布局一样，一开始三个col都设置float: left,为了把left和right定位到左右部分，采用负边距，left部分margin-left: -100%，right部分margin-right: -190px。

二、怪异盒模型

盒子模型一般分为标准盒模型（w3c标准）和怪异盒模型（IE标准）。大部分浏览器采用标准盒模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

标准模式：
box-sizing:content-box;
盒子总宽度：width + padding（左右） +  border（左右） + margin（左右）

怪异模式：
box-sizing:border-box;
盒子总宽度： width（width已经包含了padding,border的值） + margin（左右）
　　

三、定位布局

css 有3种定位机制：普通流，浮动，绝对定位

普通流：元素的位置由元素在html中的位置决定。

position：static | relative | absolute | fixed

static: 静态，没有特别的设置，遵循基本的定位规定。z-index无效

relative: 相对定位，不脱离文档流，通过 TLBR（top,left,bottom,right）定位，z-index无效

absolute: 绝对定位，脱离文档流，通过TLBR定位，z-index有效。 选取其最近一个最有定位设置的父级对象进行定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

fixed: 固定定位，相对于浏览器的可视窗口来定位，z-index有效。

四、流布局

页面元素的宽度按照屏幕分辨率进行适配，整体布局不变。

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

五、浮动布局

float: left | right | none | inherit

left: 左浮动

right: 右浮动

none: 默认值。元素不浮动，并会显示在其在文本中出现的位置

inherit: 规定应该从父元素继承 float 属性的值

使用浮动，div会浮动于网页上方，为了不影响下方不需要浮动的div，要先清除浮动

clear:left;  不允许有向左漂浮的标签

clear:right; 不允许有向右漂浮的标签

clear:both;  不允许有任何方向漂浮的标签

六、flex布局

弹性布局（属于一维布局），给予容器控制内部元素的宽度、高度的能力。便于实现垂直居中的效果。

大部分浏览器都能支持，在webkit内核的浏览器需要加上-webkit前缀。

容器的6个属性：
flex-direction：row | row-reverse | column | column-reverse;  // 决定主轴的方向
flex-wrap：nowrap | wrap | wrap-reverse; // 决定项目换行的情况
justify-content： flex-start | flex-end | center | space-between | space-around; // 项目在主轴的对齐方式
align-items：  flex-start | flex-end | center | space-between | space-around; // 项目在交叉轴上的对齐方式
align-content： flex-start | flex-end | center | space-between | space-around | stretch; // 多根轴线的对齐方式，只有一根时则无效

flex-flow: <flex-direction> || <flex-wrap>; //flex-direction属性和flex-wrap属性的简写形式，


项目的6个属性：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

教程：http://www.ruanyifeng.com/blo...^%$

七、grid布局

网格布局（属于二维布局），可以跟flex结合使用。

兼容性没有flex好，不够普及

特点：

1）可以定义任意数量的行和列

2）行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式，可设置最大值和最小值

3）内部元素可以设置自己所在的行、列，还可以设置跨越几行、几列

4）可以设置内部元素的对齐方向

教程：http://blog.csdn.net/ceshi986...

源文档：

http://blog.csdn.net/yinmazuo...

http://blog.csdn.net/dong_pt/...

https://www.cnblogs.com/yanay...

http://blog.csdn.net/aozeahj/...

https://www.cnblogs.com/nuann...

理解的不正确的话，有错误请指教 ^ - ^