双飞翼 | 易学教程

双飞翼布局（练习）

阅读更多关于双飞翼布局（练习）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; padding: 0; } .bigbox .one { margin: 0 200px 0 300px; background: red; height: 500px; } .bigbox .two { background: blue; width: 300px; height: 500px; position: absolute; left: 0px; top: 0; } .bigbox .three { background: pink; width: 200px; height: 500px; position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="bigbox"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </body> </html> 来源： https://www.cnblogs.com/mrluobiao/p/6736358

css三列布局之双飞翼pk圣杯

阅读更多关于 css三列布局之双飞翼pk圣杯

三列布局：两边定宽，中间自适应！看到这个问题，我第一眼想的就是两边定宽float左右，中间加一个margin宽度自适应或者直接设一个overflow：hidden触发bfc机制，这样也可以，看上去也没什么问题，但是html中div的顺序却是 <div class = "left"></div> <div class = "right"></div> <div class = "main"></div> （就用class名字来代表它的位置）通常我们的主体内容是放在main里面的，但是在html的顺序中确是最后加载，因为如果最先加载main，main占据整行下面的left，right就不会自己浮动上去，所以这样肯定是不完美的！所以接下来我们介绍的两种方式就是完美的实现这种布局，让main最先加载，而且完美的解决兼容性问题。第一种叫做圣杯布局：思路是main left right全部float：left，这样，main就会不再具有块级元素的特性main的宽度设置100%同时，此时给left设置一个margin-left：-100%，给right设置一个margin-right：-它自身的宽度，这样我们就硬性的把它们放到了一行上，但是实际上此时left和right是覆盖在了main的两边，这样肯定是不行的！因为会遮盖一些我门想要展示的东西！所以我们还需要做一些事情

圣杯布局与双飞翼布局

阅读更多关于圣杯布局与双飞翼布局

圣杯布局与双飞翼布局圣杯布局双飞翼布局圣杯布局和双飞翼布局都是非常好用的布局方式。两者的功能相同，都是实现一个三栏布局，其中两侧宽度固定，中间宽度自适应，又叫做固比固布局。圣杯布局有3中实现方式： ①不要求优先渲染中间(class=‘center’)部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圣杯与双飞翼</title> <style> body{ margin: 0; } .box{ width: 100%; } .left,.right{ float: left; width: 200px; height: 200px; background-color: #FF8C00; } .center{ float: left; width: calc(100% - 400px); height: 200px; background-color: #90EE90; } .box:after{ display: block; content: ''; clear: both; } </style> </head> <body> <div class="box"> <div class="left">left</div> <div class="center">center</div> <div

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

阅读更多关于 CSS中的圣杯布局与双飞翼布局

　一，圣杯布局　　1,什么是圣杯布局? 　　　所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局　　2，构建圣杯布局的步骤：　　　　2.1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）；　　　　2.2，设置两侧盒子（左、右）的宽度，使其宽度固定；　　　　2.3，设置中间盒子的宽度为100%，这是中间盒子宽度自适应的关键；　　　　2.4，设置容器的 padding-left 和 padding-right 属性，属性值分别为左盒子的宽度和右盒子的宽度；　　　　2.5，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；　　　　2.6，设置左盒子的 margin-left 属性为 -100% ；　　　　2.7，通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域；　　　　2.8，设置右边盒子的 margin-left 属性为负的自身的宽度；　　　　2.9，同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域；　　　　2.10，最后一步就是给容器设置一个最小宽度 min-width 属性，防止它缩小后变形。　　3，具体示例如下 <style> *{ margin: 0; padding: 0; } .left, .right{ width: 200px; height: 200px;

css双飞翼布局

阅读更多关于 css双飞翼布局

今天，在一个论坛中无意看到了一同胞的回复，称楼主的三列布局为“双飞燕”布局，一开始很诧异，寻思了半天，真有这种布局么？不解与疑惑中，于是便去请教了度娘。然而，在百度中的解释多数是关于下棋一方面的技术与技巧，我更疑惑了。。。专业术语并非“无中生有”，既然有这个说法，我想必定会有他的来源与出处。于是，感觉告诉我要继续。查看众多资料，总算是皇天不负有心人，终于找到了关于布局“双飞燕”的这么个说法。我晕，其实真正的术语并不叫“双飞燕”，而是“双飞翼”，估计是那哥们回帖的时候还在做梦吧……呵呵开头侃了半天，现在咱言归正传吧！双飞翼布局是一种比较灵活的布局，始于淘宝UED，玉伯提出的，当然他着重介绍的是双飞翼栅格布局。　　本文着重讲解常用三栏布局。通俗一点讲，可以把三栏比作一只鸟，main部分相当是于鸟的身体，而left与right就是鸟的“翼”了，鸟想要平衡地飞翔就要把主体位置给摆正确，然后在“翼”的作用下开始起飞。布局也是一样的，我们也要先把主体给摆好，然后再合理地调整双翼，这样整体动作才会比较和谐。先看一下常规效果：为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如： <div class="wrap"> <div class="main">main</div> <div class="left">left</div> <div class="right"

CSS布局之--淘宝双飞翼布局

阅读更多关于 CSS布局之--淘宝双飞翼布局

淘宝的页面布局中，最经典的应该是它的【子列】【主列】【附加列】这三个概念。通过查看淘宝店铺页面的DOM结构及其CSS可以发现：淘宝使用的左中右三列布局采用的方式与我们平常有很大差别。一般我们是下面这种做法： <div class="sub">子列</div> <div class="main">主列</div> <div class="extra">附加列</div> 然后，对于sub main extra 分别设置宽度为190 550 190及float:left，并调好边距。这种做法，我相信会一点CSS的都已经知道了。它的特点是：页面在被浏览器解析时，按照子主附加的顺序进行加载。如果仔细看淘宝店铺的DOM结构发现，淘宝在DOM中是按主列子列扩展列的顺序书写的，此时网页被浏览器解析时，按照主子附加的顺序进行加载 —— 也就是我们常说的”重要的内容先加载”。这种结构会更好一些。它的结构大概如下： <div class="grid-s5m0e5"> 　　<div class="col-main">我是主列</div> 　　<div class="col-sub">我是子列</div>　　<div class="col-extra">我是附加列</div> </div> 以上DOM，grid-s5m0e5是一个布局框，然后其中分包含了col-main col-sub

双飞翼布局模式

阅读更多关于双飞翼布局模式

今天再看面试题的时候，偶然看到要去左右200px像素，中间自适应，并且中间部分要优先显示。也就是是再布局方面，需要先写中间部分，再写两侧部分，这样才能达到先显示中间的效果。 1.利用浮动 main div{ float: left; } .left{ width: 200px; background: blue; margin-left: -100%; } .right{ width: 200px; background: rgb(110, 108, 108); margin-left: -200px; } .mx{ width: 100%; background: chartreuse; } <div class="main"> <div class="mx">中</div> <div class="left">左</div> <div class="right">右</div> </div> 2.利用定位 .box{ position: relative; height: 40px; width: 100%; overflow: hidden; } .box-center{ height: 40px; width: 100%; padding-left: 200px; background: deeppink; } .box-left{ position: absolute;

圣杯布局 vs 双飞翼布局

阅读更多关于圣杯布局 vs 双飞翼布局

圣杯布局实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:left , position:relative (因为相对定位后面会用到） middle设置 width:100% 占满一行此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px 同理，right要拉到middle所在行的最右边，使用 margin-left:-210px ， right:-210px 实现代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> body { text-align: center;; } #demo { margin: auto; } #header, #footer { height: 50px;

圣杯布局和双飞翼布局

阅读更多关于圣杯布局和双飞翼布局

圣杯布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent { overflow: hidden; padding: 0 100px; } .middle { float: left; height: 100px; width: 100%; background-color: green; } .left { /* 以便申明 left 属性 */ position: relative; /* 移出当前界面，注意和 parent 中的 padding-left 配合正好 */ left: -100px; float: left; height: 100px; width: 100px; background-color: red; /* 上移一行 */ margin-left: -100%; } .right { position: relative; right: -100px;

多栏布局

阅读更多关于多栏布局

水平方向－三栏布局 1.浮动布局简介：左边固定宽度后左浮动，右边固定宽度后右浮动 .float .left{ float: left; width: 200px; background-color: yellow; } .float .right{ float: right; width: 200px; background-color: green; } .float .center{ background-color: pink; } <section class="float"> <div class="left">left</div> <div class="right">right</div> <div class="center"> 这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局 </div> </section> 但是，这种布局方式有个缺点：当中间的内容很多时，将会出现“字围”效果，如下图所示解决办法：创建一个BFC来解决上面的问题。众所周知创建BFC的条件有： 1

订阅双飞翼