前言
三栏布局:两边定宽,中间宽度随窗口大小的改变而改变的布局方式。
正文
圣杯布局:
主要利用负外边距和相对定位实现。负外边距在另一篇博文中介绍https://blog.csdn.net/weixin_39006917/article/details/105193451
接下来详细介绍圣杯布局的设计
1.HTML中添加三个div元素
<body>
<div class="main">中</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
2.为元素添加CSS
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body{
padding-left:100px;/*左内边距*/
padding-right:200px;/*右内边距*/
}
.left{
background: coral;
width:100px;/*对应body的padding-left值*/
height:100%;
float: left;
}
.main{
background: lightblue;
width:100%;
height:100%;
float: left;
}
.right{
background: gray;
width:200px;/*对应body的padding-right值*/
height:100%;
float: left;
}
从.left、.main、.right三个样式代码中看到,每个都加入了float:left,上述CSS还不能实现最终的三栏布局。
两边的空白为.body设置的左右内边距。由于.main的宽度width:100%,使得后面两个div被“挤”到了下方。
3.将左栏移动到窗口最左侧
.left{
background: coral;
width:100px;
height:100%;
float: left;
margin-left:-100%;/*向浮动方向移动,直到到达其父元素body内容的最左侧*/
}
在前面CSS的基础上加入语句margin-left: -100%,意味着将该元素朝着浮动方向(左)移动,直到到达其父元素body内容的最左侧。效果图:
此图没有包含右栏的效果,仅讨论左栏。可以看到左栏成功移动到body内容的最左侧,并覆盖了一部分中栏。接下来,加入相对定位,使左栏移动到中栏的左侧,即窗口的最左侧,覆盖body元素的padding-left。
.left{
background: coral;
width:100px;
height:100%;
float: left;
margin-left:-100%;
position: relative;/*相对定位*/
left:-100px;/*将左栏相对于原位置向左移动100px*/
}
相对定位中的left:30px可以理解为:移动后的元素与其移动前的空间左侧相距30px,也就是将元素向右移动30px。若left属性值为-30px,则可以理解为向左移动,与right: 30px等效果。
4.将右栏移动到窗口最右侧
.right的设计同.left,最终CSS样式代码如下
.right{
background: gray;
width:200px;
height:100%;
float: left;
margin-left:-200px;/*向浮动方向移动200px*/
position: relative;
right:-200px;/*向右移动到窗口最右侧*/
}
这里的margin-left:-200px会使右栏在body内容区内向左侧移动200px,移动后右侧仍然会有body设置的200px右内边距的空白。再用相对定位,使右栏最终移动到窗口最右侧。
最终效果: