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.瀑布流布局：瀑布流布局