等高布局
功能：让在同一行里的元素高度一直保持一致。也就是说当其他元素一旦改变高度时，在同一列的高度也会跟着变化，并且所有元素高度都是一样的。因为所有元素都放在一列，可能采取float浮动了，首先大家会想着清除浮动
然后在将其中一个的高度设成100%，另外的高度自定义，这样就可以实现等高了。但其实不是这样的，即使你让高度存在，但是父元素的高度还是0。可以看下图
实现方式：margin+padding
当margin-bottom设置负值时，相当于下面的元素相同的值设置margin-top。
如果我们设置margin-bottom的值刚好是上元素的高度，那么下元素会直接覆盖掉上元素
能够从图中可以看出，一个盒子真正被内容撑开的高度，实际是元素的高度和元素设置的margin值。当元素设置的margin值为负值时，盒子的高度也会减少。
当margin-bottom的负值越小，并且小于盒子内所有元素的高度时，那么盒子的内容高度就为零了
但是这是如果给元素设置了相同数值并且为正值的padding-bottom值，这样就与margin-bottom抵消，那么盒子实际的高度就是content+padding-margin值。此时又因为padding和margin的值是一样的。这样盒子不就完全被内容撑开了吗？
然后我们再加一个外部盒子加个overflow：hidden。那么盒子内的高度就只剩内容了。你可能会说，但是我么本来盒子就是靠内容撑起的呀，为什么还要那么麻烦，但是我么现在需要的是，如果多个元素并排放在一个盒子当中，如何实现同等高度呢。这是就需要，我们将每个元素的margin-bottom和paddingbottom设置数值要设置很大。
当有另外一个元素进入到同一行时，实际上我们并不是改变元素的高度，而是让padding区域暴露出来而已
左右两侧固定，中间自适应
1.BFC方式
2.定位
3.浮动
4.flex弹性布局
双飞翼布局
浮动+margin
原理：利用浮动，让三者不占空间，然后利用浮动的前后顺序，让中间元素排在第一，将其宽度设置100%。此时第一元素就会占据整行。两侧元素就会被并排挤在第二行。利用margin-left让第二行的元素能够上去第一行的位置，那么给第二个元素设置margin-left：-100%因为中间元素浮动的原因，所以自然会挤到第一行的首部，给第三个元素设置margin-left：-200px（200px是第三个元素的宽度）。此时第三元素就会在第一行的末尾。这是就已经形成了全部元素排列在一行了。然后如何让中间元素内容不占据整行，而是在两侧元素中间。这是就可以让中间元素里面的子元素设置一个margin，刚好左右腾出两侧元素的位置。此时就形成双飞翼布局了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
artical {
width: 1200px;
height: 200px;
}
.sectionA {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin-left: -100%;
}
.sectionC {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin-left: -200px;
}
.sectionB {
float: left;
width: 100%;
height: 200px;
}
.sectionB p{
width: 100%;
margin: 0 200px;
height: 100%;
background-color: #0000FF;
}
</style>
</head>
<body>
<artical>
<section class="sectionB">
<p>
</p>
</section>
<section class="sectionA">
</section>
<section class="sectionC">
</section>
</artical>
</body>
</html>
圣杯布局
float+margin+position
原理：与双飞翼的布局原理差不多一样，只不过我们这次改变的最大的父元素，让其设置margin，而不是在让中间元素的子元素设置margin了。然后让两侧元素使用定位去占据父元素设置margin之后让出的空位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
height: 200px;
margin: 0 200px;
background-color: #0000FF;
}
.sectionA {
position: relative;
left: -200px;
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin-left: -100%;
}
.sectionC {
position: relative;
right: -200px;
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin-left: -200px;
}
.sectionB {
float: left;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<section class="sectionB">
</section>
<section class="sectionA">
</section>
<section class="sectionC">
</section>
</div>
</body>
</html>
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
