总结:
主要通过设置 margin: -100%,使本来浮动在第二行的盒子,回到第一行,使这个元素可以和 width: 100% 的浮动盒子并列;
浮动 float 的原理:
(float,浮动,使元素的边界和相邻的同一个方向浮动的元素边界紧贴,如果没有相邻浮动元素,就和父元素边界紧贴。也就是说,设置了 float:left 的元素,会向左浮动,直到左边缘和同样设置了 float:left 的元素紧贴。如果左边没有浮动的元素,那么这个元素就会紧贴到父元素的边缘 )
margin-left: -100%的原理:实现步骤:
这里 100% 的百分比是相对于父元素的宽度而言的。元素设置了 margin-left: -100%,就会往左边移动父元素的宽度的100%
- 中间盒子宽度自适应,两边盒子固定宽度:先使中间盒子width:100%,占满第一行;两边盒子宽度固定。三个盒子都设置左浮动。此时,两边的盒子排到第二行
- 使两边的盒子排到第一行:左边盒子 margin-left: -100%,右边盒子margin-left:-100px;
- 需要调整中间盒子被覆盖的部分,使两边盒子和中间盒子不重叠: 调整父级内边距,使整体两边留出位置(padding-left:100pxpadding-right:100px 和两边盒子的宽度相等);两边盒子设置相对定位(position:relative),并移动盒子,使他们不与中间盒子重叠(左边盒子向左移动 left: 100px 。右边盒子向右移动 right:100px)
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~
事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。
圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现:
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/23f1909662254837bcc1f1bb231ca29d.jpg)
文章图片
双飞翼布局
通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。
注意:当你缩放页面的时候,宽度不能小于700PX,为了安全起见,最好还是给body加一个最小宽度!
如果你有了那么一点理解以后,我们来看看圣杯布局的实现:
第一步:给出HTML结构:
Header内容区中间弹性区
左边栏
右边栏
写结构的时候要注意,父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是width:100%。
第二步:给出每个盒子的样式
header{width: 100%;
height: 40px;
background-color: darkseagreen;
}
.container{ height:200px;
overflow:hidden;
}
.middle{width: 100%;
height: 200px;
background-color: deeppink;
float:left;
}
.left{ width: 200px;
height: 200px;
background-color: blue;
float:left;
}
.right{width: 200px;
height: 200px;
background-color: darkorchid;
float:left;
}
footer{width: 100%;
height: 30px;
background-color: darkslategray;
}
第三步:看此时的效果图
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/e9c13ebb00ce48a4b5f58cf59695d983.webp)
文章图片
(中间的三栏并没有在一行内显示)
大家可以看到,三栏并没有在父元素的一行显示,就是因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来。
那么如何让它们呈现出一行三列的效果呢?那就要让左边的盒子要到中间盒子的最左边,右边的盒子到中间盒子的最右边。换个想法,如果中间盒子不是100%的宽度,那么按照文档流,左边的盒子一定会在中间盒子的后面显示,接着显示右边的盒子。但是现在中间盒子是满屏了的,所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时,CSS的负边距(negative margin)该上阵了。
第四步:利用负边距布局
1.让左边的盒子上去
需要设置其左边距为负的中间盒子的宽度,也就是
.left {margin-left:-100%;
}
。这样左盒子才可以往最左边移动。2.让右边的盒子上去
需要设置其左边距为负的自己的宽度,也就是
.right {margin-left:-200px;
}
。这样右盒子才可以在一行的最右边显示出自己。第五步:看此时的效果图
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/5fa3b47ed10f4bdf9e3b68189d59e7b0.webp)
文章图片
实现固比固布局
到这里,是不是感觉很有成就感?但是很遗憾的告诉你,还没结束哦!
我们现在的确是硬性的实现了固比固布局。但是要记住,中间盒子是自适应的宽度,所以中间盒子里的内容会被左右盒子给压住一部分。
比如现在我给中间盒子加很多的内容,大家看看效果图:
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/62d4a3d557054f1b8109ca06ccbf3f71.jpg)
文章图片
中间盒子的内容被盖住
所以,我们的工作还没停止。
第六步:让中间自适应的盒子安全显示
首先:利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。代码如下:
.container{ padding: 0 200px;
}
这里的200px是左右盒子的宽度。效果如下:
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/201d77cfa790489ba3f4e6ab67c2edc4.jpg)
文章图片
利用父级的内边距将盒子往中间挤
我们可以看到,左右两边的内边距是有了,但是中间盒子上的内容还是被压着。
其次:给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置left和right值。代码如下:
.left{ position: relative;
left: -200px;
}
.right{position: relative;
right: -210px;
第七步:看最终效果图
![html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)](https://img.it610.com/image/info8/fbfa01e7295347e8945a8c983079e011.jpg)
文章图片
圣杯布局大功告成啦!
现在,圣杯布局终于搞定了,也实现了我们要的效果,左右侧的盒子固定,中间盒子自适应,而且中间盒子的内容完全不受影响。你是不是也懂了呢?
【html|圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)】
作者:森西悠然
链接:https://www.jianshu.com/p/f9bcddb0e8b4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少(今天见识到跳槽天花板!!)
- quill|Quill编辑器插入自定义HTML记录