双飞翼 | 易学教程

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

阅读更多关于 CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局虽然两者的实现方法略有差异，不过都遵循了以下要点： 1.两侧宽度固定，中间宽度自适应 2.中间部分在DOM结构上优先，以便先行渲染 3.允许三列中的任意一列成为最高列 4.只需要使用一个额外的<div>标签圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圣杯布局</title> <style type="text/css"> .header{ height:50px; background: #666; text-align: center; } .main{ /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/ padding:0 200px 0 180px; height:100px; } .middle{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; /

css中双飞翼布局

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 　　　　  */ .container{ width: 70%; margin: auto; } /* 　　　　  */ .content{ overflow: hidden; } /* 　　　　  */ .content .middle,.content .left,.content .right{ float: left; min-height: 200px; margin-bottom: -100000px; padding-bottom: 100000px; } /* 　　　　  */

三栏布局之双飞翼布局（两侧固定宽度，中间自适应）

阅读更多关于三栏布局之双飞翼布局（两侧固定宽度，中间自适应）

1、双飞翼布局双飞翼布局是由淘宝开发人员提出，和圣杯布局有一些相似 2、原理前四点都和圣杯布局一样 1.写结构，一个大盒子里放三个子元素，注意三个子元素的顺序：中-左-右 2.给三个子元素写float：left； 3.给左侧的盒子设置margin-left：-100%； 4.给右侧的盒子设置margin-left:-右侧盒子盒子宽度 5.给中间的盒子再放一个子元素，给这个子元素设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度或设置margin ： 0 右侧盒子的宽度 0 左侧盒子的宽度 6.别忘记给父元素清除浮动 7.给大盒子设置最小宽度代码： <style> .left{ width: 300px; height: 200px; background: pink; float: left; margin-left: -100%; } .center{ width: 100%; height: 300px; background:orange; float: left; } .right{ width: 200px; height: 200px; background: skyblue; float: left; margin-left: -200px; } .centerMain{ background: green; margin:0 200px 0

css 布局（圣杯、双飞翼）

阅读更多关于 css 布局（圣杯、双飞翼）

一、圣杯布局、左右固宽，中间自适应三列布局，中间宽度自适应，两边定宽；中间部分要在浏览器中优先展示渲染；具体步骤： 1.设置基本样式 2.圣杯布局是一种相对布局，首先设置父元素container的位置： 3.将主体部分的三个子元素都设置左浮动 4.设置main宽度为width:100%,让其单独占满一行 5.设置left和right 负的外边距 6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。代码如下： <!doctype html> <html> <head> <meta charset="utf-8"/> <title>圣杯布局</title> <style> body{ margin:0; } .box{ margin:0 auto; width:900px; height:300px; background-color:orange; padding:0 200px; } .left{ width:200px; height:300px; background-color:red; float:left; margin-left:-100%; position:relative; left:-200px; } .center{ width:100%; height:300px;

双飞翼布局

阅读更多关于双飞翼布局

三列布局双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同 <!DOCTYPE html> < html lang = "en" > < head > < style > . main , . left , . right { float : left ; min - height : 200 px ; height : 200 px ; width : 100 % ; } . main :: after { display : table ; content : '' ; clear : both ; zoom : 1 ; } . main { background : red ; } . content { padding - left : 200 px ; } . left { width : 200 px ; margin - left : - 100 % ; background : #DED68C ; } . right { width : 400 px ; margin - left : - 400 px ; background : #94BBDA ; } </ style > </ head > < body > < div class = "main" > < div class = "content" >

圣杯布局和双飞翼布局

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

一、圣杯布局(两边固定，中间自适应） html: middle </div> </div> </div> css: *{ } .container{ } .left,.middle,.right{ } .left{ } .middle{ } .right{ } 二、双飞翼布局 html css .right{ } .middle{ } .middleInner{ } 文章来源: 圣杯布局和双飞翼布局

经典三栏布局之圣杯、双飞翼、弹性布局

阅读更多关于经典三栏布局之圣杯、双飞翼、弹性布局

经典三栏布局之圣杯、双飞翼、弹性布局经典三栏布局之圣杯、双飞翼、弹性布局圣杯布局和双飞翼布局是前端工程师需要掌握的布局方式，两者功能相同，都是为了实现两侧宽度固定，中间宽度自适应的布局方式，此外，使用新增的 flex布局，可以使布局更加简单。双飞翼布局和圣杯布局虽然实现方式有所差异，但是基本上都遵循了以下几点：两侧宽度固定，中间宽度自适应中间结构在DOM上优先，以便于优先渲染下面依次介绍圣杯布局、双飞翼布局、弹性布局实现三栏布局圣杯布局一、搭建主体结构我们先搭建主体框架，将主体结构写出来 <div class="header"></div> <div class="container"></div> <div class="footer"></div> 我们将为左右预留出一定的空间，作为左右固定两栏的位置 .container{ padding-left:200px; padding-right:150px; } 这时，我们的主体结构变成这样了二、添加中、左、右三列接下来我们将左、中、右三列添加到主体框架中 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div>

html--双飞翼布局

阅读更多关于 html--双飞翼布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <style type="text/css"> *{ margin: 0; padding: 0; } body{ min-width: 600px; } /*头部脚部样式*/ #header,#footer{ border: 1px solid; background: gray; text-align: center; } /*三列的伪等高布局*/ #content .middle,#content .left,#content .right{ /*padding-bottom:10000px ; margin-bottom: -10000px;*/ height: 50px; line-height: 50px; float: left; } /*双飞翼布局*/

圣杯布局和双飞翼布局的理解和区别, 并用代码实现

阅读更多关于圣杯布局和双飞翼布局的理解和区别, 并用代码实现

作用: 圣杯布局和双飞翼布局解决的问题都是一样的, 就是两边定宽,中间自适应的三栏布局.中间栏要放在文档流前面有线渲染. 区别: 圣杯布局: 为了中间的内容不被遮挡,将中间的 div 设置了左右padding-left 和 padding-right 后,将左右两个 div 用相对布局position:relative并配合 left 和 right 属性,以便左右两栏 div 移动后不会遮挡住中间的 div. 双飞翼布局: 为了中间内容不被遮挡,直接在中间内部 div 创建子 div用于放置内容,在改 div 使用margin-left 和 margin-right为左右两个 div 留出位置. /**圣杯布局代码**/ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div id="hd"> Header </div> <div id="bd"> <div id="middle"> middle </div> <div id="left"> left </div> <div id="right"> right <

圣杯布局及双飞翼布局、弹性盒模型

阅读更多关于圣杯布局及双飞翼布局、弹性盒模型

圣杯布局及双飞翼布局主要用于解决左右两边盒子固定宽度。中间盒子宽度自适应的问题。圣杯布局： <!doctype html> <html> <head> <title>圣杯布局</title> <meta charset="utf-8"> <style> body { min-width: 800px; margin: 0; padding: 0; } .container { padding: 0 300px 0 200px; overflow: hidden; } .header { width: 100%; height: 100px; background-color: lightblue; } .footer { width: 100%; height: 50px; background-color: lightblue; } .middle, .left, .right { position: relative; } .middle { float: left; width: 100%; height: 100px; text-align: center; background: lightcoral; } .left { float: left; width: 200px; margin-left: -100%; left: -200px; height: 100px

订阅双飞翼