CSS布局 — 圣杯布局与双飞翼布局

CSS布局 -- 圣杯布局 & 双飞翼布局

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致. DEMO 稍微说明一下: html代码中 middle部分首先要放在container的最前部分.然后是left,right 1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到) 2.mid…

css中的圣杯布局和双飞翼布局

圣杯布局布局要求: 三列布局,中间自适应,两边定宽中间栏要在浏览器优先渲染允许任意列的高度最高用最简单的CSS.最少的HACK语句解释说明: 1.min-width:700px是为了当页面缩小到指定的700px的时候,页面内容宽度不再随着浏览器缩小.是为了电脑的正常浏览效果 2.注意到container设置的值0 220px 0 200px,上右下左,所以left 设置widh:200px,right设置width:220px 3.设置min-height:300px,是让三列…

双飞翼布局介绍-始于淘宝UED

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术.只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案. 尝试之路考虑以下DOM结构: <div id="page"> <div id="hd"></div> <div id…

双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术.只要巧妙组合,并加以灵活运用,就能"拼"出各种布局的实现方案. 尝试之路考虑以下DOM结构: <div id="page"> <div id="hd"></div> <div id="bd&quo…

HTML特殊布局--------双飞翼布局

今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100%的宽 float:left: 两边的盒子都float:left,定固定的宽:左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽: 以下是例子: <div class="box"/> <div class=&q…

CSS布局经典—圣杯布局与双飞翼布局

在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己孤陋寡闻了,以前在看资料的时候无意中看过圣杯布局和双飞翼布局这样的名词,只不过当时基础是在太差直接忽略了(当然现在也是在打基础,但是好歹相对几个月前已经有了质的改变).今天总结时再次看到这两个布局方法,当然再也不能错过了. 圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象…

CSS之圣杯布局与双飞翼布局

圣杯布局三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet"…

CSS经典布局-圣杯布局、双飞翼布局

圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物"的意思,不是一种对页面的形象表达.双飞翼据考源自淘宝UED,应该是一种页面的形象的表达. 圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负…

CSS 圣杯布局 / 双飞翼布局的实现

工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应的布局 1 , 圣杯布局  <header>三栏布局</header> <div class="container"> <div class="center column">center</div&g…

css布局记录之双飞翼布局、圣杯布局

双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1…

css布局笔记（三）圣杯布局，双飞翼布局

圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下  <!DOCTYPE html> <html> <head> <style> .con { padding-left: 150px; padding-right: 190px; } .left{ background: #E79F6D; width:150px; float:left; margin-left:…

CSS布局 — 圣杯布局与双飞翼布局

圣杯布局实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为相对定位后面会用到) middle设置 width:100% 占满一行此时middle占满一行,所以要把left拉到middle所在行的最左边,使用 margin-left:-100% 这时left拉回到middle所在行的最左边,但会覆盖middle内容的左端,要把middle内容拉出来,所以在…

CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定,中间宽度自适应 2.中间部分在DOM结构上优先,以便先行渲染 3.允许三列中的任意一列成为最高列 4.只需要使用一个额外的<div>标签圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf…

几种常见的css布局_l流体布局、圣杯布局、双飞翼布局

1.流体布局: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>流体布局</title> <style type="text/css"> .left { float: left; width: 100px; height: 200px; background: red; } .right { float: righ…

CSS 之圣杯布局&双飞翼布局

圣杯布局和双飞翼布局是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应中间部分在DOM结构上优先,以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的<div>标签圣杯布局 1.结构: <div id="header"></div> <div id="container"> <div id="c…

css两栏布局、圣杯布局、双飞翼布局

最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .left { float: left; width: 100px; height: 100px; background-color: red; } .box1 .right { margin-left: 100px; height: 100px; background-color: green; }…

CSS（五）圣杯，双飞翼布局

双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; float: left; } .content{ padding: 0 200px; } .left{ height: 200px; width: 200px; background: blue; float: left; margin-left: -100%; } .right{ width: 200px; he…

CSS布局之圣杯布局和双飞翼布局

其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容middle放在container的最前面,然后是left.right 1.将三者均设置 float:left 2.将middle的宽度设置为 width:100%; 使得middle占满一行 3.将left放在middle所在行的最左边,给left设置 margin-left:-100%; 4.l…

CSS中的圣杯布局与双飞翼布局

一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2.2,设置两侧盒子(左.右)的宽度 ,使其宽度固定: 2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键: 2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子的宽度: 2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都…

css布局 -双飞翼布局&圣杯布局

一,双飞翼布局左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局<…

CSS圣杯布局、双飞翼布局详解

三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: 两侧定宽,中间自适应主要内容优先渲染圣杯布局 <div class="container"> <div class="main">main</div> <div class="left">left…

CSS经典布局——圣杯布局与双飞翼布局

一.圣杯布局和双飞翼布局的目的实现三栏布局,中间一栏最先加载和渲染两侧内容固定,中间内容随着宽度自适应一般用于PC网二.圣杯布局的实现技术要点: 设置最小宽度min-width 使用float布局,注意清除浮动使用margin负值对三栏整体区域设置左右内边距,宽度为left和right的宽度,避免内容重叠使用定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta ch…

中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

一.引子最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局相关的点整理了一下,前后捋顺,遂有了如下的文章. 为了满足页面多列布局的需要,早期人们多用table布局,但渐渐人们发现这种布局的劣势,就是要等页面加载完才能渲染,而且table写起来代码较大,样式也不要控制,于是人们寻求CSS+HTML的方式(但也不能说table就弃用了,在展现表格的时候tabl…

CSS_圣杯布局和双飞翼布局

参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http://www.imooc.com/wenda/detail/254035 博客:http://www.cnblogs.com/imwtr/p/4441741.html 理解: 圣杯布局和双飞翼布局均可以实现一个三栏布局:中间栏先加载,然后是左栏,右栏:左右两栏宽度固定,中间栏宽度自适应(会根据浏览器的…

【布局】圣杯布局&双飞翼布局

背景随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块放在dom树前面,那么浏览器在做重绘的时候不久有限显示了吗?"机制的开发者们开始围绕者这个方向进行了dom的优化,于是诞生了两种著名的布局方式,圣杯布局和双飞翼布局直奔主题两种布局的背景就不讲了,直接上代码圣杯布局 [JsFiddle]https://jsfiddle.net/zwwill/p…

css双飞翼布局

双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而left与right就是鸟的"翼"了,鸟想要平衡地飞翔就要把主体位置给摆正确,然后在"翼"的作用下开始起飞.布局也是一样的,我们也要先把主体给摆好,然后再合理地调整双翼,这样整体动作才会比较和谐. 双飞翼布局的效果图如下所示: HTML代码如下所示: <div clas…

css居中方法与双飞翼布局

居中类型方法对应属性水平垂直水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的参考脱离文档流 3-1.设置相对偏移量50% 3-2.使用平移设置水平偏移量适当修改 3-3.此属性是当对于子元素位置平移,括号值正值向右平移,负值向左平移水平 margin: 0 auto ; display: inline-block; text-align: center; position: r…

CSS3之圣杯布局和双飞翼布局

圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title>    <!--3 设置中间盒子的宽度等于容器的宽度(100%)--&…

div+css实现双飞翼布局

本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右下图是效果图我们来看下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="…

css的圣杯布局

圣杯布局和双飞翼布局实现的效果是一样的. 代码解析: 1.四个section,container,main,left,right.其中那个container为父容器. 2.main,left,right均左浮动. 3.main的宽度为100%. 4.设置left的margin:-100%. 5.设置rightd margin:-200px; 6.设置父容器的内边距padding:0px 200px 0px 200px. 7.设置left的positon:relative;left:-200px.…

【CSS布局 — 圣杯布局与双飞翼布局】的更多相关文章