前端布局之圣杯布局
前端布局之圣杯布局
- 圣杯布局
今天学习圣杯布局，以下是自己的总结和练习。
圣杯布局
圣杯布局是一种三列布局，两边定宽，中间自适应的布局。
圣杯布局的原理:
当子元素处于浮动状态时，设置负margin，子元素会覆盖到兄弟元素上
方法一： 利于BFC元素与浮动元素不会相互覆盖的特性实现圣杯布局。
先写出三个盒子：
清除样式，添加宽高和背景色
*{margin: 0;padding: 0;}.left{width: 220px;height: 100px;background-color: blue;}.center{height: 100px;background-color: yellow;}.right{width: 220px;height: 100px;background-color: red;}
现在三个盒子出来了，然后给左盒子添加左浮动，右盒子添加右浮动。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！