1.圣杯布局
主要:浮动 + margin-left + 相对定位
- 写一个大容器container,里面包含了middle,left和right,middle放在前面
- container下面的三个容器浮动,且写上高度200px
- 给middle宽度写上100%,此时left和right被挤到第二行,给left,right设置宽度200px
- 给left的margin-left设置为-100%,此时left回到第一行左边,right回到第二行左边
- 给right的margin-right设置-200px,此时right回到第一行右边
- 因为此时,left和right会压住middle
- 给container设置padding: 0 200px,给left和right留下空间
- 给left和right设置相对定位后,left模块的left值设置为-200px,回到为其留下的空间,同理right块设置right值为-200px
- 此时因为container因为子元素浮动,其高度会为0,为其增加overflow:hidden,使其变为BFC,显示正常高度
- 此时如果页面缩得很小会出现显示混乱问题,给contariner加上min-width属性,或者用双飞燕布局解决
为什么在container加padding,而不是在middle?
因为middle的宽度设置为100%,设置了padding也是占满全屏宽度,给大容器设置,才能给left和right留下位置
<style>
.container {
overflow: hidden;
padding: 0 200px;
min-width: 400px;
}
.middle {
background-color: yellow;
width: 100%;
}
.left {
background-color: blue;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right {
background-color: pink;
width: 200px;
margin-left: -200px;
right: -200px;
}
.container > div {
float: left;
height: 200px;
position: relative;
}
</style>
<body>
<div class="container">
<div class="middle">
1265416531635
</div>
<div class="left">
123
</div>
<div class="right">
456
</div>
</div>
</body>
2.双飞燕布局
主要:浮动(不用相对定位)
-
设置三个容器,middle,left,right三个模块,middle模块放于前面,中间再嵌套一个middle_in模块,主要的作用是middle宽度继承100%,而里面的模块用margin或者paading为left和right预留空间,解决了left和right占住中间元素位置的问题,并且也不用相对定位。
-
让middle、left、right左浮动,且left和right宽度设置为200px,middle宽度100%,此时left和right被撑到第二行。再为三者设置高度。
-
让middle_in继承高度100%,left模块margin-left设置为-100%,right的margin-left设置为-200px,此时它们已经位于第一行的左边和右边,且压住了middle模块
-
为middle_in设置padding或者margin解决被压住的问题
-
同理为container设置为BFC
<style> .container { overflow: hidden; } .container > div { float: left; height: 200px; } .middle { background-color: yellow; width: 100%; } .middle_in { background-color: red; height: 100%; margin: 0 200px; /* padding: 0 200px; */ } .left { background-color: blue; width: 200px; margin-left: -100%; } .right { background-color: pink; width: 200px; margin-left: -200px; } </style> <body> <div class="container"> <div class="middle"> <div class="middle_in"> 1265416531635 </div> </div> <div class="left"> 123 </div> <div class="right"> 456 </div> </div> </body>
3.flex布局实现
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
lex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
flex为一个非负数字n:该数字为flex-grow的值,
flex:n;= flex-grow:n;
flex-shrink:1;
flex-basis:0%;
设置一个大容器flexc,包含了center,left,right,给大容器设置高度,子元素会自动继承高度
给flexc设置display:flex,给left和right的高度固定200px
给center设置flex:1,其中flex-basis默认为0%,但是flex-grow的值为1,会自动撑开剩余空间
给三个模块设置order排序
<style>
.flexc {
display: flex;
height: 200px;
}
.centerc {
background-color: yellow;
flex: 1;
order: 1;
}
.leftc {
background-color: blue;
width: 200px;
order: 0;
}
.rightc {
background-color: pink;
width: 200px;
order: 2;
}
</style>
<body>
<!-- 弹性布局 -->
<div class="flexc">
<div class="centerc">
123
</div>
<div class="leftc">
456
</div>
<div class="rightc">
789
</div>
</div>
</body>