手把手教你理解圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是三栏布局的典型布局。

1.为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面，中间一栏最先加载,渲染出来(主要内容)。

2.两侧内容宽度固定,中间自适应，盒子随着内容而撑开。

圣杯布局代码展示：

通过浮动+定位+margin

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.content{/* 给左盒子留位置 */padding-left: 300px;/* 给右盒子留位置 */padding-right: 200px;/* 父级添加overfloat属性 清除浮动 让父盒子拥有高度 */overflow: hidden;} /* 三个盒子都要浮动 */.center,.left,.right{float: left;}.center{background-color: pink;/* 中间盒子宽度必须是百分之百 */width: 100%;height: 100px;}.left{background-color: skyblue;height: 100px;width: 300px;/* 重要理解 这里 margin-left是指当前左盒子的左边框相对于父盒子的右边框的距离*/margin-left: -100%;/* 重要理解 只有定位的属性才有left right 并且这个移动的方向是相反的*/right: 300px;/* 这个是相对于自身原来的位置 */position: relative;}.right{background-color: greenyellow;height: 100px;width: 200px;/* 重要理解: 因为父盒子设置了padding 因此可以直接不算左边的空白处*/margin-right: -200px;}footer{clear: both;}header,footer{background-color: oldlace;height: 100px;}</style>
</head>
<body><header><h1>头部</h1></header><div class="content"><div class="center"><h1>主区域</h1></div><div class="left"><h1>左区域</h1></div><div class="right"><h1>右区域</h1></div></div><footer><h1>底部</h1></footer>
</body>
</html>

双飞翼布局代码展示：

通过浮动+margin


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;font-size: 20px;}.header{width: 100%;height: 100px;background-color:pink;}.footer{width: 100%;height: 100px;background-color:gray;}.left,.right,.center{float: left;height: 380px;}.left{width: 200px;background-color: aqua;/* 将左盒子移动父级宽度的100% 与父级的左边框重合 */margin-left: -100%;}.right{width: 150px;background-color: plum;/* 将右盒子移动自身宽度的负距离 以达到右盒子右边界与父级右边界重合的效果*/margin-left:-150px;}.center{width: 100%;background-color: red;}.container{/* 给父级盒子清除浮动 让父盒子拥有高度*/overflow: hidden;}.content{/* margin:上右下左 设置左右距离 以腾出中间内容盒子的位置*/margin: 0 150px 0 200px;}</style>
</head>
<body><div class="header">header</div><!-- 主体部分 --><div class="container"><!-- 中间 --><div class="center"><!-- 嵌套盒子 与圣杯布局的不同之处--><div class="content">center</div></div><!-- 左 --><div class="left">left</div><!-- 右 --><div class="right">right</div></div><div class="footer">footer</div>
</body>
</html>

圣杯布局与双飞翼布局的优缺点：

圣杯布局优点：不需要添加再多添加一个dom节点（嵌套盒子）缺点：正常情况下是没有问题的，但是特殊情况下，当中间部分宽度小于左盒子的时候就会发生布局混乱。

双飞翼布局：优点：不会像圣杯布局那样变形，CSS样式代码更简洁缺点：多加了一层dom节点。

手把手教你理解圣杯布局和双飞翼布局相关推荐

[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
前端布局写法原理理解与总结+记忆（两栏布局、圣杯布局、双飞翼布局）
实现两栏布局 (左边固定,右边自适应,文档结构是一个父div包裹两个左右div,子元素height设置百分百自动撑满父元素) <div class="outer">&l ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
圣杯布局与双飞翼布局的理解
圣杯布局与双飞翼布局是前端开发中是经常用到的一种布局方式,掌握该方式对开发是非常有用的. 圣杯布局与双飞翼布局最终要实现的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 实现效果图 ...
圣杯布局、双飞翼布局的理解及对比
一.圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头.有尾.包三列,圣杯布局中间是有container大容器包裹着左中右区域的. <!--特点:有头.有尾.包三列(有个conta ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
圣杯布局和双飞翼布局的区别
相同点和不同点两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,并且中间部分在HTML代码中要写在前边,这样它就会被优先加载渲染. 主要的不同之处就是在解决中间部分被挡住的问题 ...

手把手教你理解圣杯布局和双飞翼布局

圣杯布局代码展示：

双飞翼布局代码展示：

手把手教你理解圣杯布局和双飞翼布局相关推荐

最新文章

热门文章