HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实践的运用场景中因为布局品种多难以挑选。今日我花些时刻总结下自己对CSS布局的了解,剖析下了解各种布局的好坏,一起期望能共享给初入前端的朋友们一些在布局上的经历,假如有那些当地总结的欠好,欢迎我们纠正。言归正传,现在就来揭开各种布局的面纱。


单列布局

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

水平居中

水平居中的布局办法是最常见的一种,常常用于头部、内容区、页脚,它首要的作用是操控盒子在整个页面以水平居中的办法出现。

HTML与CSS布局技巧总结

运用margin:0 auto来完成

.child{width:800px; margin: 0 auto;}
1
优势:兼容性
下风:需求指定盒子 宽度

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;}

优势:完成起来简略,尤其是运用在呼应式布局中
下风:兼容性差,假如大面积的运用该布局可能会影响功率

笔直居中

HTML与CSS布局技巧总结

这边说的笔直居中是子容器无高的笔直居中,并非单行文本笔直居中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与CSS布局技巧总结

起浮布局

前段时刻我总结过关于两列起浮布局办法,这儿我就不再重新总结了,假如有爱好的朋友可以参阅前端时刻关于起浮布局的办法(总结)这篇博客

多列等分布局

多列等分布局常常出现在内容中,大都为同功用、同阶层内容的并排显现。
HTML与CSS布局技巧总结

HTML代码

<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</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与CSS布局技巧总结

HTML代码

<div class="row">
&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;

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

&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;

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

&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;/div&gt;

</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与CSS布局技巧总结

HTML代码

<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></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标签的运用

运用媒体查询

@media screen and (max-width: 480px){

     /屏幕小于480px的款式/

}

总结:这些布局办法有些常常用到,有些因为兼容性的问题在详细项目相中运用的状况相对较少,不过关于移动端来说,以上总结的布局都是有用。今日特意花些时刻来收拾这些布局,一是为了稳固常识,二是期望这些办法可以共享给前端的初学者,让他们对布局有更深化的了解,当然这些并非是CSS中的一切布局办法,今后发现有什么布局没有总结到的,我会持续更新、共享,假如哪位同行对布局办法有所弥补,或许发现博客中存在问题,欢迎彼此沟通。

分页阅读: 1 2