自己总结了下常见得布局(其实有些用的比较少,但是面试题容易考)
-
两列布局
左边固定右边自适应(内容高度记得写min-height,不然高度太小底部会留白) 左右常用方法: 1.calc计算右边宽度 2.左边脱离文本流,右边不要写宽度自动占满父级,然后margin-left给左边留空间
-
双飞翼布局
方法:为了实行重要的先加载,左右dom结构是 中 左 右 1.中左右全部浮动,中间宽度100%,左右200px 2.左边用margin: -100% //100%是继承父级的100% 可以强行把左边挤上去 右边margin: -200px //同理强行挤上去,但是挤到右边 3.可以看到中间被遮住一部分,所以往中间在加个div,并设置 margin: 0 200px; 就可以隔出距离,这个div作为真正的中间
-
圣杯布局:
方法:同双飞翼一样的道理,唯一不同的是通过父级的padding来隔出
距离。然后将左右两边通过相对定位去占那个空白,所以他们共同的
父级不能设置宽度100%;
1.–同上
2.–同上
3.父级添加padding: 0 200px;左右添加相对定位,左 left :-200px;
右right : -200px;4.上下左右居中布局:
元素高度可变,需要元素内部元素水平垂直居中(主要是垂直)方案
1:通过display:table实现,给最外部元素display:table,同时添加一个次外层元素,设置display:table-cell,vertical-align: middle;这时第三层的元素即可垂直居中。
<div class="container">
<div class="box">
<span></span>
</div>
</div>
.container {
display:table;
width:50%;
height:50vw;
margin: 0 auto;
}
.box {
display: table-cell;
vertical-align: middle;
background: gray;
}
.box > span {
display: block;
width: 20px;
height: 20px;
background: #ff0000;
margin: 0 auto;
}
2:通过flex布局,容器元素设置为justify-content:center,align-items:center;
3:通过grid布局,容器元素设置为justify-content:center,align-items:center;
4:通过position + transform(margin)实现,如果使用margin则需要知道子元素的宽高且这个宽高不可变(这是由于magin如果设置为百分比是基于父元素的widht来计算的),如果使用transform则没有这个限制(transform的值是基于元素本身的widht和height来计算的),但又一点兼容的问题(推荐使用transform的方式)
<div class="container">
<div class="box">
</div>
</div>
.container {
background: yellow;
width:50%;
height:50vw;
margin: 0 auto;
}
.box {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
//transform: translate(-50%, -50%);
background: green;
}