双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解

html>

圣杯布局

*{margin: 0;

padding: 0;}

body{width: 100%;

margin: 0 auto;

height: 800px;}

.middle,.left,.right{float: left;}

.head,.foot{background: pink;

height: 100px;

text-align: center;

line-height: 100px;

font-size: 32px;

float: left;

width: 100%}

.main{padding-left: 300px;

padding-right: 250px;}

.middle{background: red;

height: 600px;

width: 100%;}

.left{background: yellow;

width: 300px;

height: 600px;

margin-left: -100%;

position: relative;

left: -300px;}

.right{background: blue;

height: 600px;

width: 250px;

margin-left: -250px;

position: relative;

right: -250px;}

这是页面的头部

这是页面主体的中间

这是页面主体的左侧

这是页面主体的右侧

这是页面的尾部

html>

双飞翼布局

*{margin: 0;

padding: 0;}

body{width: 100%;

margin: 0 auto;

height: 800px;}

.head,.foot{width: 100%;

float: left;

text-align: center;

line-height: 100px;

height: 100px;

background: pink;

font-size: 32px;}

.main,.left,.right{float: left;

height: 600px;}

.main{width: 100%;}

.left{width: 300px;

background: yellow;

margin-left: -100%;}

.right{background: blue;

width: 250px;

margin-left: -250px;}

.main-continer{margin-left: 300px;

margin-right: 250px;

background: red;

height: 600px;}

这是页面的头部

这是页面主体中间部分的容器

这是页面主体的左侧

这是页面主体的右侧

这是页面的尾部

可以这样理解吗

圣杯布局左右两部分所占的位置实际是中间最大div内的左右padding(内边距)；

双飞翼布局左右两部分所占的位置实际是中间最大div中的子元素div左右margin(外边距)。

那这个既然效果都是一样的，在实际开发中有什么区别呢？

双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解相关推荐

【布局】圣杯布局双飞翼布局
背景随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码 "如果三排布局能将中间的模 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
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页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
flex布局、圣杯布局以及双飞翼布局
Flex布局 (弹性盒布局) 1.flex弹性盒布局一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...
双飞翼布局与圣杯布局完全解读
一.两种布局的目的使得左右两边的宽度不随着浏览器窗口的变化而变化,是固定的,只有中间的部分才可以随着窗口变化而变化. 二.两种布局的要点经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住 ...

双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解

双飞翼HTML圣杯布局,关于圣杯布局与双飞翼布局的理解相关推荐

最新文章

热门文章