这是我参与更文挑战的第5天,活动详情查看: 更文挑战
前述
今天看到一个css题目,说你能用几种方式来实现css左右定宽,中间自适应布局?恰好好久没写布局了,今天通过几种布局方式巩固一下,加深印象。
我下面分别使用圣杯布局、双飞翼布局、Flex布局和绝对定位布局实现
圣杯布局
圣杯布局是一种三列,左右栏固定,中间栏边框自适应的网页布局
特点:
采用float浮动
三列布局,中间宽度自适应,两边定宽;
中间元素要在html结构中处于开头;
html代码如下:
<div class="container">
<!-- mian要放开头 -->
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.container {
min-width: 600px;
overflow: hidden;
padding: 0 200px;
box-sizing: border-box;
}
.left,
.main,
.right {
float: left;
min-height: 100px;
}
.left {
position: relative;
left: -200px;
margin-left: -100%;
width: 200px;
background: green;
}
.main {
width: 100%;
background: blue;
}
.right {
position: relative;
right: -200px;
margin-left: -200px;
width: 200px;
background: red;
}
</style>
效果如下:
解析:
- 这里的
.main
使用了width:100%
,会导致.left
和.right
会换行,所以.left
的margin-left:100%
(margin-left百分比相对的是父元素),.right
的margin-left: -200px
(200px刚好是自身的宽度)实现在同一行 .container
的padding
刚好与.left
和.right
的长度一样,方便.left
向左方向,.right
向右方向,相对定位移动自身宽度的长度,避免遮挡到.main
- 然后
.container
需要设置min-width
,因为.left
的margin-left
是100%
,相对的是父元素,如果.container
宽度变小,则.main
宽度也会变小,如果小于.left
的宽度,则不足以和.main
在一行,.left
则会换行
这里是讲自己的理解,话糙了一点,如果看不懂,自己可以复制代码,自己去看看,会了解的更深。
双飞翼布局
双飞翼布局也是一种三列,左右栏固定,中间栏边框自适应的网页布局
解决问题也和圣杯布局类似,也是采用三栏全部float浮动,左右两栏加上负margin,跟中间栏div并排,形成三栏布局。主要不同是在解决 “中间栏div内容不被遮挡”方式不一样。
html代码如下(注意⚠:HTML结构发生改变, 多了div.content)
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.main {
width: 100%;
background: blue;
}
.content {
margin: 0 200px;
}
.left,
.main,
.right {
float: left;
min-height: 100px;
}
.left {
margin-left: -100%;
width: 200px;
background: green;
}
.right {
margin-left: -200px;
width: 200px;
background: red;
}
</style>
和圣杯布局主要区别:
.main
内部多了子元素div.content
- 子元素
div.content
里用margin-left
和margin-right
,去保证不被.left
和.right
遮挡 .left
,.right
不需要使用定位去避免遮挡.main
Flex布局
<div class="container">
<!-- 注意是left main right -->
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<style>
.container {
display: flex;
min-height: 100px;
}
.left {
flex-basis: 200px;
background: green;
}
.main {
flex: auto;
background: blue;
}
.right {
flex-basis: 200px;
background: red;
}
</style>
解析:
- flex布局,弹性布局,可以简便、完整、响应式地实现各种页面布局,未来的布局的首选方案(当然如果你要考虑ie,另说)
.main
使用flex
属性,.left
和.right
使用flex-basis
属性flex
属性是flex-grow
(如果有剩余空间,是否扩大),flex-shrink
(如果空间不够,是否压缩) 和flex-basis
(本身的空间大小)的简写,默认值为0 1 auto
。后两个属性可选flex属性
有两个快捷值:auto (1 1 auto)
和none (0 0 auto)
,这里使用的是auto
,如果有剩余空间,则扩大,如果空间不够,则压缩
absolute 布局
absolute
绝对定位的元素的位置与文档流无关,因此不占据空间。
这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分。
<div class="container">
<!-- 注意是left main right -->
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<style>
.container {
position: relative;
}
.left,
.main,
.right {
min-height: 100px;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: green;
}
.main {
margin: 0 200px 0 200px;
background: blue;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: red;
}
</style>
解析:
.main
使用margin
避免被.left
和.right
遮挡.left
和.right
使用absolute
定位,不占据文档流
总结:
推荐使用:flex布局 > absolute布局 = 双飞翼布局 > 圣杯布局
首选flex布局,因为这是未来的布局方式的首选方案,属性方便设置,实用,好理解;
absolute布局和双飞翼布局适中,圣杯布局不好理解(对我来说);
大家都可以了解下,正所谓技多不压身嘛。