学了前端这么久,还从未认真研究过布局,一直都是自己设计或者模仿着别人的网页。这次在网上看了多个博客,文章。
了解常见的三栏布局,所谓三栏布局,无非就是左,中,右三栏水平排列。
在这里的总结主要以代码的形式表示出来,还有一些我看到的讲解比较好的博客链接:
float布局
左右两边固定,中间自适应。
.left{
width: 100px;
height: 200px;
background-color: yellow;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: pink;
float: right;
}
.center{
background-color: red;
height: 200px;
margin-left: 120px; // 据左边右边框的距离 整个元素的大小是整个box的宽度
margin-right: 120px;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
对于设置float的元素,会脱离文档流,center盒子会无视这个元素,整个元素的大小会包括浮动的区域即撑满整个box。(但center盒子内的文本会为这个元素让位,使其环绕在浮动元素的周围)
缺点:中间部分最后加载,内容较多时影响体验
BFC规则
BFC不会和浮动元素重叠,将center设置为BFC可以使其宽度变为自适应的宽度。
.center{
background-color: red;
height: 200px;
margin-left: 120px;
margin-right: 120px;
overflow: hidden;
}
加上overflow: hidden;显示结果和上面一样。
圣杯布局
在页面的显示效果:左右两边固定宽度,中间容器自适应(根据容器大小自适应)。
实现:左、中、右三栏都通过float进行浮动,然后通过负值margin将左右栏进行调整。最外层设置margin使得中间栏内容不被覆盖。
(在实际开发中常用来做功能区域的划分。左边是一个导航菜单,右边是广告或者文章的列表,中间是主要的内容显示区域。)
body{
min-width: 640px; /* 2*220px+200px ?*/
}
.box{
padding: 0 220px 0 200px; //!!
}
.middle{
width: 100%;
height: 200px;
float: left;
background-color: red;
}
.left{
width: 200px;
height: 200px;
float: left;
margin-left: -100%;
position: relative; //!
left: -200px; //!
background-color: yellow;
}
.right{
width: 220px;
height: 200px;
float: left;
margin-left:-220px;
position: relative;
right: -220px;
background-color: pink;
}
<div class="box">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
若有什么不明白的可以参照一下链接,有详细的讲解:
* 关于圣杯布局-作者DotHide
* 简书-经典的圣杯布局
双飞翼布局
实现效果和圣杯模式相同,只是解决中间栏被遮挡问题的方式不同。
既然中间栏部分的内容会被遮挡,那么就在中间内部再加一个div,通过设置其margin来避开部分遮挡。
body{
min-width: 640px; /* 2*220px+200px */
}
.middle{
width: 100%;
float: left;
}
.box-inner{
margin-left: 200px; //!
margin-right: 220px; //!
height: 200px;
background-color: red;
}
.middle::after { //?middle后面要清除浮动
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left{
width: 200px;
height: 200px;
float: left;
margin-left: -100%;
background-color: yellow;
}
.right{
width: 220px;
height: 200px;
float: left;
margin-left:-220px;
background-color: pink;
}
<div class="box">
<div class="middle">
<div class="box-inner">
愿你半生出走,归来认识少年。不忘初心,方得始终。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
未处理中间栏的遮挡问题:
处理后的显示结果:
下面这篇文章详细介绍了圣杯布局 & 双飞翼布局两者之间的区别:
flex布局
flex布局现在受到越来越多前端人员的喜爱,所以熟练掌握flex布局非常重要,在这里我也有之前所总结的【css-flex布局】,不了解此布局的小伙伴可以先看一下。
flex: flex-grow flex-shrink flex-basis;
.box{
display:flex;
}
.middle{
height: 200px;
background-color: red;
flex-grow: 1; /*沾满剩余空间*/
}
.left{
height: 200px;
order:-1; /*将left放在最前面*/
background-color: yellow;
flex:0 1 200px;
}
.right{
height: 200px;
background-color: pink;
flex:0 1 200px;
}
<body>
<div class="box">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
* 深入理解css3中的flex-grow、flex-shrink、flex-basis
绝对定位
<style type="text/css">
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 200px;
background-color: red;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 200px;
background-color: yellow;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: pink;
height: 200px;
}
</style>
</head>
<body>
<p class="box">
<p class="middle">
愿你半生出走,归来认识少年。不忘初心,方得始终。
</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>