css经常使用布局

1、三栏布局

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

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。

2、怪异盒模型

盒子模型通常分为标准盒模型（w3c标准）和怪异盒模型（IE标准）。大部分浏览器采用标准盒模型，而IE中则采用Microsoft本身的标准。

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

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

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

3、定位布局

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有效。

4、流布局

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

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

一、布局特色：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就致使若是屏幕太大或者过小都会致使元素没法正常显示】

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

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

5、浮动布局

float: left | right | none | inherit

left: 左浮动

right: 右浮动

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

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

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

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

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

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

6、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...^%$

7、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...

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