CSS圣杯布局

竹青虫

前端/CSS

发布于：Jun 28, 2020

圣杯布局

圣杯布局实现的问题：三列布局，两边定宽，中间列自适应。

首先是DOM文档的布局，外面一个盒子里面3个小盒子

<div id="container">
    <div id="center">中间的</div>
    <div id="left">左边的</div>
    <div id="right">右边的</div>
</div>

先给最外面的大盒子设置样式

#container {
    background-color: pink;
    height: 700px;
    padding: 0 200px 0 100px;
}

可以看到最外面的container填充了整个页面，而且设置了右边200px左边100px的内边距，就像挖了2列空，但是因为背景颜色也在padding显示所以看得不是很清楚。

接下来我们给中间列的center盒子设置样式

#center {
    width: 100%;
    height: 600px;
    float: left;
    background-color: blue;
}

可以看到因为设置了宽度100%和左浮动他自动填充满了整个父级元素container的内容部分，而我们上一步挖的内边距也显示出来了，同时左边和右边列的盒子被挤下去了因为左浮动宽度又100%。

接下来我们设置left和right的样式

#left {
    float: left;
    width: 100px;
    height: 600px;
    background-color: rebeccapurple;
}

#right {
    float: left;
    width: 200px;
    height: 600px;
    background-color: lightgray;
}

可以看到left和right因为左浮动和宽度不够被挤下来了，但是我们需要的效果是left和right位于我们挖好的2个内边距中去。

这里我们可以利用margin-left属性把下面的盒子提上来

在父元素和子元素中，margin-left属性指的是父级元素的左内边距线到子元素的左外边距线。

在这里我们的父级元素是container，而container的左内边距线就位于蓝色部分左边框的位置，而子元素是我们的left元素，左外边距线位于紫色快的左边框的位置，所以，现在子元素left的margin-left就是内容的宽度蓝色块的宽度。

假设蓝色块宽度为800px，那么将紫色快的左外边距设置为-800px就能将父元素左内边距线和子元素左外边距线重叠在一起，而我们css设置了蓝色块为100%，那么子元素left的左外边距现在就是100%，只要我们将左外边距设置为0就能把他提上来，怎么设置为0呢，办法就是-100%

所以我们给left紫色快加上margin-left:-100%

我们可以看到由于子元素left的左外边距线与父元素container的左内边距线的距离margin-left值为0 所以紫色块被提了上来

那么接下来我们需要left相对于自身往左移动自身宽度的距离，相对自身移动用相对定位最合适了。

#left {
    position: relative;
    left: -100px;
    
    margin-left: -100%;
    float: left;
    width: 100px;
    height: 600px;
    background-color: rebeccapurple;
}

那么我们就剩下right灰色块没提上来了，那么根据前面父子元素的margin-left所指可以得出：margin-right的值为子元素的右边框和父元素的右padding内侧的距离

也就是我们灰色块右边框与蓝色块右边框的距离

我们可以将margin-right的值设置为-200px将其提上来

#right {
    margin-right: -200px;
    float: left;
    width: 200px;
    height: 600px;
    background-color: lightgray;
}

自此完成了圣杯布局，其实圣杯布局其中重要的便是对外边距的理解。

可能还有些同学不太懂灰色快提上来的部分，可以继续看下去

接下来讲一个例子

.content{
    width: 500px;
    height: 500px;
    padding: 100px;
    background-color: greenyellow;
}
.son{
    float: right;
    width: 100px;
    height: 100px;
    background-color: hotpink;
    margin-right:0px;
}

<div class="content">
	宽500，高500，外边距100
	<div class="son">右浮动，宽100，高100，外边距0</div>
</div>