双飞翼布局和圣杯布局

双飞翼布局和圣杯布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

双飞翼的布局与实现原理（推荐使用双飞翼布局）

双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

双飞翼布局代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.header,.footer{height: 200px;width: 100%;background-color: #00FFFF;}.content,.left,.right{height: 200px;float: left;}.container::after{content: "";display: block;clear: both;}.content{width: 100%;background-color: pink;}.left{width: 300px;background-color: red;margin-left: -100%;}.right{width: 300px;background-color: grey;margin-left: -300px;}.center{height: 200px;margin-left: 300px;margin-right:300px ;}body{min-width: 600px;}</style></head><body><div class="header">头部</div><div class="container"><div class="content"><div class="center">中间</div></div><div class="left">左边</div><div class="right">右边</div></div><div class="footer">尾部</div></body>
</html>

运行效果：

圣杯布局的实现原理

要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

好处：重要的内容放在文档流前面可以优先渲染

原理：利用相对定位、浮动、负边距布局，而不添加额外标签

圣杯布局代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.header,.footer{height: 200px;width: 100%;background-color: #00FFFF;}.center,.left,.right{height: 200px;float: left;}.left,.right{width: 300px;}.center{width: 100%;background-color: pink;}.left{background-color: red;margin-left: -100%;position: relative;left: -300px;}.right{background-color: lawngreen;margin-left: -300px;position: relative;left: 300px;}.container::after{content: "";display: block;clear: both;}.container{padding-left: 300px;padding-right: 300px;}body{min-width: 900px;}</style></head><body><div class="header">头部</div><div class="container"><div class="center">中间</div><div class="left">左边</div><div class="right">右边</div></div><div class="footer">尾部</div></body>
</html>

运行效果：

双飞翼布局和圣杯布局相关推荐

Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
DIV+CSS布局之圣杯布局与双飞翼布局
圣杯布局 & 双飞翼布局简单介绍一下什么是双飞翼布局和圣杯布局: 它们俩都是为了解决三栏布局问题,左右栏宽度固定,中间栏自适应(随着父盒子大小改变而改变).中间栏要放在中间以优先渲染.它们的 ...
html圣杯布局,css圣杯布局和双飞翼布局
双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 圣杯布局 html结构 center left right css 先写出大概的样式.article ...
【三栏式布局、双飞翼布局、圣杯布局】09
三栏式布局文章目录三栏式布局 1. 用calc函数实现三栏式布局 2. 双飞翼布局 3. 圣杯布局两边盒子固定宽度,中间盒子自适应的布局. 1. 用calc函数实现三栏式布局 <div c ...
前端布局写法原理理解与总结+记忆（两栏布局、圣杯布局、双飞翼布局）
实现两栏布局 (左边固定,右边自适应,文档结构是一个父div包裹两个左右div,子元素height设置百分百自动撑满父元素) <div class="outer">&l ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
双飞翼布局与圣杯布局完全解读
一.两种布局的目的使得左右两边的宽度不随着浏览器窗口的变化而变化,是固定的,只有中间的部分才可以随着窗口变化而变化. 二.两种布局的要点经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住 ...
基本布局，圣杯布局，双飞翼布局
1.圣杯布局圣杯布局就是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证可以优先渲染. 2.双飞翼布局双飞翼布局和圣杯布局基本是一致的,都是两边固定,中间自适应的三栏布局,主要 ...
你不知道的三列布局之圣杯布局和双飞翼布局（超详细）
前言三列布局相信大家都见过,像上面淘宝.豆瓣等很多平台界面都有使用.他们用到的是圣杯布局和双飞翼布局.圣杯布局和双飞翼布局是一些大厂可能问的问题,圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边 ...

双飞翼布局和圣杯布局

双飞翼布局和圣杯布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

双飞翼布局和圣杯布局相关推荐

最新文章

热门文章