【2018-05-04 圣杯布局 and 双飞翼布局，display:flex】的更多相关文章

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

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

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

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

中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 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 理解: 圣杯布局和双飞翼布局均可以实现一个三栏布局:中间栏先加载,然后是左栏,右栏:左右两栏宽度固定,中间栏宽度自适应(会根据浏览器的…

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 1.将三者均设置 float:left 2.将middle的宽度设置为 width:100%; 使得middle占满一行 3.将left放在middle所在行的最左边,给left设置 margin-left:-100%; 4.l…

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

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

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…

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之圣杯布局与双飞翼布局

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

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

圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <!--圣杯布局:--> <!--1 搞一个容器,里面放三个盒子--> <!--2 设置两侧盒子的宽度 固定--> <!--3 设置中间盒子的宽度等于容器的宽度(100%)--&…

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

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

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

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

几种常见的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中的圣杯布局与双飞翼布局

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

2018-05-04 圣杯布局 and 双飞翼布局，display:flex

看到一个神奇的布局,啥都不说了 直接贴代码 要让main在中间,left在左边,可以通过Flex容器下的项目的属性“order”属性来设置:对于order属性:定义项目的排列顺序,越小越靠前,默认为0. .通过项目属性flex-grow设置main的放大比例,将空余的空间用main来填充,使三个项目不满一整行:默认为0,也就是对剩余空间不做处理. 通过项目属性flex-basis 设置left和right的固定宽度 这样就实现了我们的目标,是不是很简单?这就是flex布局的魅力...…

EZ 2018 05 04 NOIP2018 模拟赛（十二）

这次的试卷应该是激励我们一下的,链接 然后大家的分数就都很高,然后我就210被一群秒A T2的240大佬爆踩 掉了5rating但Rank竟然发杀了 X_o_r dalao && YZC dalao 论写暴力的重要性 T1 真心水,直接DFS爆搜即可 O(2^n)不会超,n大了之后可以DP,签到题不解释 CODE #include<cstdio> using namespace std; typedef long long LL; const int N=20; int n,a…

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

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

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

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

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

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

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

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

css经典布局之双飞翼

经典的两个布局方式有圣杯布局和双飞翼布局,圣杯布局主要用在国外,双飞翼布局是淘宝的UED团队开发的,优化了圣杯布局.   主要解决页面分不同列显示的问题,   一般只做页面的时候,我们分三部分,左边,中间,右边,但是浏览器加载页面时,是从上到下加载,但我们需要先加载中间部分,这个时候就需要我们好好布局了, <style>      .left{float:left; width:150px;margin-left:-100%;padding-bottom:9999px;margin-botto…

css多种方式实现双飞翼布局

圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .container{ paddin…

CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元素 浮动无法影响伸缩容器,但是如果内联伸缩容器 设置了浮动,元素将会以块级伸缩容器显示. 伸缩容器的 margin 与其内容的 margin 不会重叠 项目构建,会将新版语法构建成老板语法 主轴在水平方向时,元素要换行,但是子元素没有 width,此时,使用换轴(父元素加 flex-directio…

CSS布局——三栏布局

说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处理页脚上,采用的是清除浮动方式.在处理边栏的方式上也基本一致,唯一的不同是html结构以及处理中间栏的方式不一样.现在试着用自己的语言来描述下这两个布局. 一.三栏布局 --Marchew 这个三栏布局方式是在csdn看别人的圣杯布局时推荐的链接里的,据说是圣杯布局的原始形态,由外国人Marchew…

CSS的flex布局和Grid布局

一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex 是一种新型的布局方式,使用该布局方式可以实现几乎所有你想要的效果.但是要注意其浏览器的兼容性,flex 只支持 ie 10+,所有还是要根据你的项目情况使用(没错,我们要…

Flex布局【弹性布局】学习

先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以遇到了很多问题,自己花费了太多时间去解决问题,今天就拿其中一个比较让我头疼的问题来引出今天的话题 当时在初识html.css的时候,遇到了水平排放的问题,当然这个一下子就查出来了,使用 float ,但是使用了 float 会使子元素脱离父元素的布局,父元素的高度会变成 0 ,从而根本展示不出来 这…

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三列布局之双飞翼pk圣杯

三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也没什么问题,但是html中div的顺序却是 <div class = "left"></div> <div class = "right"></div> <div class = "main"&g…