css布局总结

一. web布局的类型

• 静态布局，就是将width,height设为定值，元素将不会随屏幕的大小而改变，若屏幕尺寸小于定义的宽高，则可使用滚动条查阅被遮掩部分。对于移动设备，单独设计一个布局，使用不同的域名。
• 自适应布局，一般是将width,height设为百分比类的单位，使其元素大小可以随着页面的大小而变化。但是其布局的样式在各种页面还是使用的同一模板。
• 响应式布局，在自适应布局的基础上通过媒介查询，为web端，iPad端，手机端（主要是web端和手机端），设置不同的样式模板，在不同的终端下，同一网站界面风格不一样。响应式布局
• 弹性布局，弹性布局是css3引入的强大布局方式。具体可参看深入理解flex ; flex布局教程-阮一峰； flex布局教程-实例篇 ; flex属性简写规则
  这几种布局类型的具体区别可看这篇文章：css几种布局的区别

二 . 布局常用到的属性

• display[block(块级元素可设置宽高，padding，margin属性)，inline（不可设置宽高，内外边距只有左右边距有效）,inline-block（呈现为inline对象但可设置宽高，内外边距，）,none（隐藏）]
• box-sizing(可定义盒模型的类型) ,其值有三种：content-box,border-box,inherit,(其实也就是自己可以定义盒模型到底是标准盒模还是怪异盒模型)。
• position(static,relative,fixed,relative,absolute) 可实现多种布局。
• float(left,right) 常用
• flex，css3布局新属性，目前主流浏览器都支持

三 . 几种常见布局

• 1.水平居中
  (1)margin:0 auto;(常用)
  (2).parent{text-align:center;}
.child{display:inline-block}（多元素水平居中）
  (3)display: flex; justify-content: center;

• 2.垂直居中
  可参看： 垂直居中
  (1)单行文本垂直居中：使用line-height;
  (2)垂直居中一张图片：使用line-height和vertical-align:middle;
  (3)块级元素垂直居中：

  .parent{position:relative} .child{position:absolute;top:50%;transform:translate(0,-50%);}  

  (4)绝对定位结合margin: 

.parent{position:relative} .child{position:absolute;top:0; bottom:0;margin:auto},

  (5)利用position和负边距

.parent{position:relative}    .child{position:absolute;top:50%;margin-top:负的元素自身高度的一半}。  

  (6)flex实现

.box { display: flex; align-items: center;}

• 3.水平垂直居中
  (1)

    .center {        position: absolute;        top: 50%;        left: 50%;        -ms-transform: translate(-50%,-50%);        -moz-transform: translate(-50%,-50%);        -o-transform: translate(-50%,-50%);        transform: translate(-50%,-50%);     }

(2)

.center {    margin: auto;    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;  }  

(3)

.center {  display: flex;  justify-content: center;  align-items: center;}

具体可参考 translate与定位；8种居中

• 4.两列定宽，中间自适应
  (1)圣杯布局 圣杯布局
  (2)双飞翼布局 双飞翼布局
  (3)flex布局 flex布局

• 5.左列定宽，右列自适应

(1)

.left{float:left;width:100px;}.right{margin-left:100px;}

(2)

.parent{display:flex;}.left{width:100px;}.right{flex:1;} 

• 6.多列等分
  html结构如下所示

<div class="parent">    <div class="column">1</div>    <div class="column">1</div>    <div class="column">1</div>    <div class="column">1</div></div>

(1)

.parent{margin-left:-20px}/*假设列之间的间距为20px*/.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

(2)

.parent{display:flex;}.column{flex:1;}.column+.column{margin-left:20px;}

• 7.等高列布局：等高列布局；

• 8.瀑布流布局：瀑布流布局