1.左中右布局
一行内有三块,左右固定,中间内容随着宽度收缩而进行变化
思路:左浮动,右浮动,中间内容padding 左右
<div>
<div style={{ float: 'left', width: '100px' }}>左边</div>
<div style={{ float: 'right', width: '100px' }}>右边</div>
<div style={{ paddingLeft: '100px', paddingRight: '100px' }}>这是content</div>
</div>
2:单列布局水平居中
行内一块,水平居中,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)
a: 使用inline-block 和 text-align实现
.parent{text-align: center;}
.child{display: inline-block;}
优点:兼容性好;
缺点:需要同时设置子元素和父元素
b: 使用margin:0 auto来实现
.child{width:200px;margin:0 auto;}
优点:兼容性好;
缺点:需要指定宽度,并且是块元素
c.使用table实现
.child{display:table;margin:0 auto;}
优点:只需要对自身进行设置
缺点:IE6,7需要调整结构
d.使用绝对定位实现
.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}
缺点:兼容性差,IE9及以上可用
e.使用flex布局实现
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;display:block}
缺点:兼容性差,如果进行大面积的布局可能会影响效率
3.垂直居中
a.inline-block实现
“inline-block依赖型元素”,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识.
在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,
故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
b.使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
c.使用flex实现
.parent{display:flex;align-items:center;}
4.水平垂直全部居中
a.利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
b.利用vertical-align和height实现
.child{height:200px;line-height:200px}
c.利用绝对布局
.child{
width: 200px;
height:200px;/*元素的高度*/
position: absolute;
left: 50%;/*配合margin-left的负值实现水平居中*/
margin-left: -100px;/*值的大小等于元素宽度的一半*/
top:50%;/*配合margin-top的负值实现垂直居中*/
margin-top: -100px;/*值的大小等于元素高度的一半*/
}
缺点:宽高必须已知
d.利用table属性
.parent {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
.child {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}
优点:
这种方法不会像前面的两种方法一样,有高度的限制,此方法可以要据元素内容动态的改变高度,从而也就没有空间的限制,元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
缺点:
不足之处呢?这种方法只适合现代浏览器,在IE6-7下无法正常运行;而且较前两者而言,结构也更复杂。
5.多列布局左列定宽,右列自适应
该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局
a.利用float+margin实现
.left{float:left;width:100px;}
.right{margin-right:10px}
b.使用flex布局实现
.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}
6.右列定宽,左列自适应
a.使用flex布局
.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}
7.两列定宽,一列自适应
a.利用flex实现
.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}
8.两侧定宽,中栏自适应
a.利用flex实现
.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
b.利用float+margin实现
.left{width:100px;float:left;}
.center{width:100%;margin-left:100px;margin-right:100px;}
.right{width:100px;float:right;}
9.一列不定宽,一列自适应
a.利用flex实现
.parent{display:flex;}
.right{flex:1;}
10.多列等分布局
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>
a.利用flex实现
.parent{display:flex;}
.column{flex:1;}
b.使用float实现
.column{float:left;width:25%;box-sizing:border-box;}
11.九宫格布局
html结构
<div className="parent">
<div className="row">
<div className="item" />
<div className="item" />
<div className="item" />
</div>
<div className="row">
<div className="item" />
<div className="item" />
<div className="item" />
</div>
<div className="row">
<div className="item" />
<div className="item" />
<div className="item" />
</div>
</div>
a.使用flex布局实现
.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}
b.使用table布局实现
.parent {
display: table;
table-layout: fixed;
width: 100%;
}
.row {
display: table-row;
}
.item {
display: table-cell;
width: 33.3%;
height: 200px;
}
网友评论