HTML与CSS布局技巧总结

很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。

单列布局

<div class="parent"><div class="child"></div>
</div>

水平居中

水平居中的布局方式是最常见的一种，常常用于头部、内容区、页脚，它主要的作用是控制盒子在整个页面以水平居中的方式呈现。

使用margin：0 auto来实现

.child{width:800px; margin: 0 auto;}

优势：兼容性好
劣势：需要指定盒子宽度

1.使用table来实现

.child{display: table; margin: 0 auto;}

优势：不需要父容器parent，只需要对自身进行设置
劣势：IE6、7需要调整结构

2.使用inline-block和text-align来实现

.parent{text-align: center;}
.child{display: inline-block;}

优势：兼容性好
劣势：需要同时设置子元素和父元素

3.使用绝对定位absolute来实现

使用绝对定位来实现水平居中布局有两种情况，一种子容器无宽度，另一种子容器有宽度。无宽度可以用一下代码，如果是有宽度，则可以设置margin-left负值为容器宽度的一半。

.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}

优势：无需设置容器宽度，在移动端可以使用
劣势：兼容性差，需要IE9及以上浏览器的支持

4.使用flex布局来实现

flex有两种方法来实现水平居中，父容器设置display：flex，一种直接在父容器中设置justify-content属性值center。第二种在子容器中使用margin： 0 auto

.parent{display: flex; justify-content: center;}

.parent{display: flex;}
.child{margin: 0 auto;}

优势：实现起来简单，尤其是使用在响应式布局中
劣势：兼容性差，如果大面积的使用该布局可能会影响效率

垂直居中

这边说的垂直居中是子容器无高的垂直居中，并非单行文本垂直居中line-height

1.使用绝对定位absolute来实现（同水平居中的使用方法，优劣一样）

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

2.使用flex来实现

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

3.使用display：table-cell来实现

.parent{display: table-cell;vertical-align: middle;height: 400px;}

总结：将水平居中和垂直居中两种布局方法相互的结合起来就可以实现水平居中布局。这边只举一个用绝对定位来实现水平垂直居中布局的方法，别的方法大家可以尝试自己练习。（以下介绍各种布局时都是基于上面水平和垂直居中的方法，所有对于它们的优劣就不再分析。）

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

多列布局

多列布局也是非常常见的，适用于一侧定宽，另一侧自适应的布局。

浮动布局

前段时间我总结过关于两列浮动布局方法，这里我就不再从新总结了，如果有兴趣的朋友可以参考前端时间关于浮动布局的方法（总结）这篇博客。

多列等分布局

多列等分布局常常出现在内容中，多数为同功能、同阶级内容的并排显示。

HTML代码

<div class="parent"><div class="column">1</div><div class="column">2</div><div class="column">3</div><div class="column">4</div>
</div>

1.使用flex来实现多列布局

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

2.使用table来实现多列布局

.parent{display: table; table-layout: fixed; width: 100%;}
.column{display: table-cell; padding-left: 20px;}

3.使用float来实现多列布局

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

提示：使用table和float实现多列布局的时候需要注意，如果要设置背景颜色则必须将.column盒子作为父容器在其里面添加一个子容器，在设置背景颜色，如果直接在.column容器中设置背景颜色会由于padding而无法产生盒子之间的间距。

九宫格布局

HTML代码

<div class="parent"><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
</div>

1.使用flex来实现九宫格布局

.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}

2.使用table来实现九宫格布局

.parent{display: table; table-layout: fixed; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

全屏布局

HTML代码

<div class="parent"><div class="top"></div><div class="left"></div><div class="right"></div><div class="bottom"></div>
</div>

使用绝对定位实现全屏布局

html,body,.parent{height: 100%; overflow: hidden;}.top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}.left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}.right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}.bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

响应式布局

meta标签的使用

<meta name="viewport" content="width=device-width, initial-scale=1"/>

使用媒体查询

@media screen and (max-width: 480px){/*屏幕小于480px的样式*/
}

总结：这些布局方法有些经常用到，有些由于兼容性的问题在具体项目相中使用的情况相对较少，不过对于移动端来说，以上总结的布局都是实用。今天特意花些时间来整理这些布局，一是为了巩固知识，二是希望这些方法能够分享给前端的初学者，让他们对布局有更深入的了解，当然这些并非是CSS中的所有布局方法，以后发现有什么布局没有总结到的，我会继续更新、分享，如果哪位同行对布局方法有所补充，或者发现博客中存在问题，欢迎相互交流。

HTML与CSS布局技巧总结相关推荐

优秀Html和CSS布局技巧文章整理
前端网: Html+Css布局技巧 (1) 前端网: html+css布局(2) 酷客: CSS 布局:40个教程.技巧.例子和最佳实践慕课网: 史上最全Html和CSS布局技巧 bingkingb ...
asp.net 网页做一个浮动层_你们要的HTML、CSS布局技巧：如何规范搭建网页架构？
白天有知友邀请回答"如何规范布局网页结构"的问题,知乎上这类问题还挺多,我认为单就深入了解布局规范都足够说上一个月的,今天我就不论大范围,挑选小米网站首页的部分区块布局来讲解吧! ...
CSS布局技巧之——各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
php css布局技巧,最全的CSS开发常用技巧
css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各 ...
HTML+CSS布局技巧及兼容问题【阅读季】
在IE6和IE7中,行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线. IE6 下去掉 input等元素的边框 border: 0 none; 所有浏览器都可以了边框 ...
收藏！40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
前端：40 个 CSS 布局技巧
CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的时间. ...
css布局方式_收藏！40 个 CSS 布局技巧
简介:CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的 ...
HTML与CSS布局技巧总结,Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)...
一.单列布局 1.水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,chi ...

HTML与CSS布局技巧总结

HTML与CSS布局技巧总结相关推荐

最新文章

热门文章