精华内容
参与话题
问答
  • 上周电话面试某游戏公司,开局第一个问题就是 圣杯布局双飞翼,我以前看过,不过没放在心上,当面试官问我的时候,我只能想起 是左右定宽,中间自适应, 我知道有5种实现该布局的方式,但是不知道圣杯与双飞翼是哪...

    1. 前言

    上周电话面试某游戏公司,开局第一个问题就是 圣杯布局与双飞翼,我以前看过,不过没放在心上,当面试官问我的时候,我只能想起 是左右定宽,中间自适应, 我知道有5种实现该布局的方式,但是不知道圣杯与双飞翼是哪一种,哎,回去看了这两个布局的资料,诶,发现,圣杯与双飞翼 是另外两种。本文首发于 www.catac.cn , 联系QQ: 2541511219

    2. 圣杯布局

    反正不管是圣杯还是双飞翼,最后结果都是如上图所示。

    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            </p>
        </div>
        <div class="left">
        <h4>left</h4>
            <p>oooooooooooooo
            00000000000000000
            ooooooooooooooo
            ooooooooooooooo
            000000000000000</p>
        </div>
        <div class="right">
        <h4>right</h4>
            <p>BBBBBBBBBBBBBB
            BBBBBBBBBBBBBBBBBB
            88888888888888888888</p>
        </div>
        </div>
    

    DOM上, 中间的放首位,然后是左边,右边。

    操作步奏:

    1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)

    2.middle部分 width:100%占满

    3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%

    4.这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 220px 0 200px

    5.middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px 同理,right也要相对定位还原 right:-220px

    6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px

    由于middle 宽度100%

    CSS 代码:

      .left,
        .middle,
        .right{ 
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container{
            padding:0 220px 0 200px;
            overflow: hidden;
        }
        .left{
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right{
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle{ 
            width: 100%;
            background: blue;
            word-break: break-all;
    
        }
    

    操作关键要点:

    在父元素container 中通过设置 padding 值来显示left 与right。

    父元素设置overflow:hidden,这个可是有讲究的,这是为了将整个块设置为BFC ,在计算BFC高度时,浮动元素也参与运算。

    • 这是没开启 overflow:hidden时,可见 高度为0

    • 在开启后,高度被子元素撑开。

    3. 双飞翼布局

    双飞翼布局是阿里提出来的,与 圣杯有以下三点区别

    1. 圣杯布局 需要 浮动与相对定位, 而 双飞翼 只需要浮动
    2. 圣杯布局 是通过父元素的 pddding 来为 left,right 预留空间, 而双飞翼 是通过 margin 来显示完整middle 的内容。
    3. 双飞翼 在middle中 加了一层 容器,所以Dom结构就不一样。
       <div class="middle">
        <div class="main-inner">
            <h4>main</h4>
            <p>HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            </p>
            </div>
        </div> 
        <div class="sub">
        <h4>sub</h4>
            <p>oooooooooooooo
            00000000000000000
            ooooooooooooooo
            ooooooooooooooo
            000000000000000</p>
        </div>
    
          <div class="extra">
        <h4>extra</h4>
            <p>BBBBBBBBBBBBBB
            BBBBBBBBBBBBBBBBBB
            88888888888888888888</p>
        </div>
    

    操作步奏

    1.html代码中,middle要放最前边,sub extra

    2.将middle,sub extra 都float:left

    3.将middle占满 width:100%

    4.此时middle占满了,所以要把sub拉到最左边,使用margin-left:-100% 同理 extra使用margin-left:-220px

    (这时可以直接继续上边圣杯布局的步骤,也可以有所改动)

    5.middle内容被覆盖了吧,除了使用外围的padding,还可以考虑使用margin,给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px

       .sub,
        .middle,
        .extra{ 
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background: red;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background: blue;
        }
        .middle{ 
            width: 100%;
        }
        .main-inner{ 
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: green;
            word-break: break-all;
        }
    

    3. BFC 块级格式化上下文

    在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下:

    浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

    为了便于理解,我们换一种方式来重新定义BFC。一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可:

    设置条件

    1、float的值不是none。

    2、position的值不是static或者relative。

    3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

    4、overflow的值不是visible

    BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

    怎么创建BFC

    要显示的创建一个BFC是非常简单的,只要满足上述4个CSS条件之一就行。例如:

    <divclass=“container”> 你的内容div>

    在类container中添加类似 overflow: scroll,overflow: hidden,display: flex,float: left,或 display: table 的规则来显示创建BFC。虽然添加上述的任意一条都能创建BFC,但会有一些副作用:

    1、display: table 可能引发响应性问题

    2、overflow: scroll 可能产生多余的滚动条

    3、float: left 将把元素移至左侧,并被其他元素环绕

    4、overflow: hidden 将裁切溢出元素

    因而无论什么时候需要创建BFC,都要基于自身的需要来考虑。对于本文,将采用 overflow: hidden 方式:

    .container { overflow: hidden;}

    再说两点

    BFC中盒子怎么对齐

    如前文所说,在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。W3C给出得规范是:

    在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。浮动也是如此(尽管盒子里的行盒子 Line Box 可能由于浮动而变窄),除非盒子创建了一个新的BFC(在这种情况下盒子本身可能由于浮动而变窄)。

    外边距折叠

    常规流布局时,盒子都是垂直排列,两者之间的间距由各自的外边距所决定,但不是二者外边距之和。

    <div class="container">
    	<p>Sibling 1 </p>
    	<p>Sibling 2 </p>
    div>
    

    对应的CSS:

    .container { 
    	background-color: red;  
    	overflow: hidden; /* creates a block formatting context */
    }
    p { 
    	background-color: lightgreen; 
    	margin: 10px0;
    }
    

    渲染结果如图:

    在上图中,一个红盒子(div)包含着两个兄弟元素(p),一个BFC已经创建了出来。

    理论上,两个p元素之间的外边距应当是二者外边距之和(20px)但实际上却是10px,这是外边距折叠(Collapsing Margins)的结果。

    在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算:

    1、两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

    2、两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

    3、两个外边距一正一负时,折叠结果是两者的相加的和。

    产生折叠的必备条件:margin必须是邻接的!

    BFC可以做什么呢?

    3.1 利用BFC避免外边距折叠

    BFC可能造成外边距折叠,也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件:两个相邻元素要处于同一个BFC中。所以,若两个相邻元素在不同的BFC中,就能避免外边距折叠。

    改进前面的例子:

    <div class="container">
    	<p>Sibling 1 </p>
    	<p>Sibling 2 </p>
    	<p>Sibling 3 </p>
    </div>
    

    对应的CSS:

    .container {  
        background-color: red;  
        overflow: hidden; /* creates a block formatting context */
    }
    p { 
        background-color: lightgreen; 
        margin: 10px0;
    }
    

    结果和上面一样,由于外边距折叠,三个相邻P元素之间的垂直距离是10px,这是因为三个 p 标签都从属于同一个BFC。

    修改第三个P元素,使之创建一个新的BFC:

    <div class="container">
    	<p>Sibling 1 </p>
    	<p>Sibling 2 </p>
        <div class="newBFC">
            <p>Sibling 3  </p>
        </div>
    </div>
    

    对应的CSS:

    .container {   
    	background-color: red;  
    	overflow: hidden; /* creates a block formatting context */}
    p {  
        margin: 10px  0;   
        background-color: lightgreen;
    }
    .newBFC { 
    	overflow: hidden;  /* creates new block formatting context */
    }
    

    现在的结果如图:

    因为第二个和第三个P元素现在分属于不同的BFC,它们之间就不会发生外边距折叠了。

    3.2 BFC包含浮动

    浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素,则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动,也能解决容器高度不会被撑开的问题。

    看个例子:

    < div class="container">    
      <div>Sibling</div>
    </div>
    

    CSS:

    .container { 
        background-color: green;
    }
    .container div { 
        float: left;  
        background-color: lightgreen; 
        margin: 10px;
    }
    

    在上面这个例子中,容器没有任何高度,并且它包不住浮动子元素,容器的高度并不会被撑开。为解决这个问题,可以在容器中创建一个BFC:

    .container {    overflow: hidden; /* creates block formatting context */}
    

    现在容器可以包住浮动子元素,并且其高度会扩展至包住其子元素,在这个新的BFC中浮动元素又回归到页面的常规流之中了。

    3.3 使用BFC避免文字环绕

    如上图所示,对于浮动元素,可能会造成文字环绕的情况(Figure1),但这并不是我们想要的布局(Figure2才是想要的)。要解决这个问题,我们可以用外边距,但也可以用BFC。

    First let us understand why the text wraps. For this we have to understand how the box model works when an element is floated. This is the part I left earlier while discussing the alignment in a block formatting context. Let us understand what is happening in Figure 1 in the diagram below:

    假设HTML是:

    <div class="container">
    	<div class="floated">    
        	Floated div  
        <div>
    	<p>  Quae hic ut ab perferendis sit quod architecto,   dolor debitis quam rem provident aspernatur tempora  expedita.  
        </p>
    </div>
    

    上图整个黑色区域表示 p 元素。p 元素没有移位但它叠在了浮动元素之下,而p元素的文本(行盒子)却移位了,行盒子水平变窄来给浮动元素腾出了空间。随着文本的增加,最后文本将环绕在浮动元素之下,因为那时候行盒子不再需要移位,也就成了图Figure1的样子。

    再回顾一下W3C的描述:

    在BFC上下文中,每个盒子的左外侧紧贴包含块的左侧(从右到左的格式里,则为盒子右外侧紧贴包含块右侧),甚至有浮动也是如此(尽管盒子里的行盒子 Line Box 可能由于浮动而变窄),除非盒子创建了一个新的BFC(在这种情况下盒子本身可能由于浮动而变窄)。

    因而,如果p元素创建一个新的BFC那它就不会再紧贴包含块的左侧了。

    3.4 在多列布局中使用BFC

    如果我们创建一个占满整个容器宽度的多列布局,在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC,它将总是占据其他列先占位完毕后剩下的空间。

    例如:

    <div class="container">
        <div class="column">
        	column 1
        </div>
        <div class="column">
        	column 2
        </div>
        <div class="column">
        	column 3
        </div>
    </div>
    

    对应的CSS:

    .column {  
        width: 31.33%;  
        background-color: green;   
        float: left; 
        margin: 1%;
        }
    .column:last-child {   
    	float: none;overflow: hidden;
    }
    

    现在尽管盒子的宽度稍有改变,但布局不会打破。当然,对多列布局来说这不一定是个好办法,但能避免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案,但这个办法可以用来说明元素在这些环境下的行为。

    展开全文
  • css经典布局——双飞翼布局

    万次阅读 2019-01-18 17:43:50
    圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局。 圣杯布局和双...

          圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局 。       

            圣杯布局双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。

    效果图

            原本录制了一个小视频,奈何不能上传到博客中,视频中通过缩放页面可以发现随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子宽度固定不变,即使页面宽度变小,也不影响我们的浏览。注意:为了安全起见,最好还是给body加一个最小宽度!

     双飞翼布局要求

    • header和footer各自占领屏幕所有宽度,高度固定。
    • 中间的container是一个三栏布局。
    • 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。
    • 中间部分的高度是三栏中最高的区域的高度。

    双飞翼布局的实现

    • left、center、right三种都设置左浮动
    • 设置center宽度为100%
    • 设置负边距,left设置负边距为100%,right设置负边距为自身宽度
    • 设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <style>
      body {
        min-width: 550px;
        font-weight: bold;
        font-size: 20px;
      }
      #header,
      #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
      }
      #container {
        overflow: hidden;
      }
      .column {
        text-align: center;
        height: 300px;
        line-height: 300px;
      }
      #left, #right, #center {
        float: left;
      }
      #center {
        width: 100%;
        background: rgb(206, 201, 201);
      }
      #left {
        width: 200px;
        margin-left: -100%;
        background: rgba(95, 179, 235, 0.972);
      }
      #right {
        width: 150px;
        margin-left: -150px;
        background: rgb(231, 105, 2);
      }
      .content {
        margin: 0 150px 0 200px;
      }
    </style>
    
    <body>
      <div id="header">#header</div>
    
      <div id="container">
        <div id="center" class="column">
          <div class="content">#center</div>
        </div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
      </div>
    
      <div id="footer">#footer</div>
    </body>
    
    </html>

    展开全文
  • 双飞翼布局和圣杯布局

    万次阅读 2019-06-23 11:37:33
    实现左右固定宽度 ,中间自适应的布局(中间先加载渲染), 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css</title> </head> <...

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
    双飞翼布局
    代码如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>css</title>
    	</head>
    	 <style type="text/css">
    	 	*{
    	 		margin:0;
    	 		padding: 0;
    	 	}
    	 	.main>div{
    	 	 float: left;
    	 	}
    	 	.left {
    	 		width: 200px;
    	 		background: red;
    	 		margin-left: -100%;
    	 	}
    	 	.right{
    	 		width: 200px;
    	 		background: blue;
    	 		margin-left: -200px;
    	 	}
    	 	.middle{
    	 		width: 100%;
    	 		background: yellow;
    	 	
    	 	}
    	 	.content{
    	 		margin-left: 200px;
    	 		margin-right: 200px;
    	 	}
    	 </style>
    	<body>
    	<div class="main">
    		<div class="middle">
    	 		<div class="content">
    	 		中间
    		 	</div>
    		 </div>
    		<div class="left">
    			左边
    		</div>
    		<div class="right">
    			右边
    		</div>
    	</div>
    	</body>
    </html>
    

    效果
    在这里插入图片描述

    圣杯布局
    (使用float布局框架 , 用margin为负值 , position: relative定位)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>css</title>
    	</head>
    	 <style type="text/css">
    	 	body{
    	 		min-width: 550px;
    	 	}
    	 	*{
    	 		margin:0;
    	 		padding: 0;
    	 	}
    	 	.header , .footer{
    	 		background: gray;
    	 		width: 100%;
    	 	}
    	 	.footer{
    	 		clear: both;
    	 	}
             .main{
             	height: 200px;
             	padding: 0 150px 0 200px;
             	background: greenyellow;
             	*zoom: 1;
             }
             .left , .center , .right{
             	float: left; 
             }
             .center{
             	width: 100%;
             	height: 200px;
             	background: red;
             }
             .left {
             	width: 200px;
             	height: 200px;
             	background: yellow;
             	margin-left: -100%;
             	position: relative;
             	left: -200px;
             }
             .right{
             	width: 150px;
             	height: 200px;
             	background: gainsboro;
             	margin-left: -150px;
             	position: relative;
             	left: 150px;![在这里插入图片描述](https://img-blog.csdnimg.cn/20190623214733790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70)
             }
    	 </style>
    	<body>
    		
    	<div class="header">
                 头部
    	</div>
    	<div class="main">
    		<div class="center">中间中间中间中间中间中间中间后</div>
    		<div class="left">左边</div>
    		<div class="right">右边</div>
    	</div>
    	<div class="footer">
    		底部
    	</div>
    	</body>
    </html>
    

    效果
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190623163922505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70**
    优点**
    (1)兼容性好,兼容若有主流浏览器,包括万恶的IE6
    (2)可以实现主要内容的优先加载
    在这里插入图片描述
    个人还是推荐使用双飞翼布局

    附:
    其实三列布局的方式还有很多 ,但也有各自的缺点
    1 如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置(否则是相对浏览器可视区域)这样会层级,页面控制相对麻烦
    2 用浮动布局的话, 中间层要做到先加载实现不了
    3 flex布局低版本浏览器有些还不支持

    展开全文
  • CSS中经典的双飞翼布局

    千次阅读 2016-05-09 11:16:34
    经典的兼容性好的双飞翼布局,中间列自适应,左右两列固定宽度的布局,如何实现,以及优点等

     

             

         笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局


       1.何谓双飞翼布局?


        简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是:


        左列和右列宽度恒定,中间列的宽度根据浏览器窗口的大小自适应。

     

        2.如何实现双飞翼布局?


        (1)首先我们要得到如下的布局样式:

          

           <div class="container">
             <div class="column" id="center_panel"></div>
             <div class="column" id="right_panel"></div>
             <div class="column" id="left_panel"></div>
         </div>
    
    
          可以看到我们在外层用一个类名为:container的大的div包裹。而内层分为了我们所说的三列
        
        但是注意,在整个dom结构中,主列位于最前面
    
    
       (2)让列开始浮动
        
        我们让列全部浮动起来
        .column{
         float:left
        }
        并设置
        .container{
        width:100%; 
        }
        .center_panel{
        width:100%;
        }
        于是在这种情况下,center_panel已经占据了整个container父元素的全部宽度,并且这个宽度是自适应的
       
       (3)如何实现左右列固定宽度
        
        在实现左右列固定宽度时,我们这里采用了margin负值
    
    
        首先,得到左列固定宽度,我们会有:
        
          #right_panel{
              
                 width:300px;
              
                 margin-left:-100%;
      
              }
           这里我们假设,固定宽度的左列宽度为300px,当margin-left:-100%之时,这个左边列会脱离自己所在行,向上一行浮动,
        
           效果为:
           此时我们实现了左列固定宽度,中间列自适应
           再次,我们根据同样原理,定义右列的浮动偏移(margin负值)
          
             #left_panel{
                 
                 width:300px;
       
                 margin-left:-300px;
        
                }
            这样,我们就实现了我们所需要的双飞翼布局,也就是中间列宽度自适应,左列和右列的宽度固定
            
            我们所得到的效果为:
         
            
         3.双飞翼布局的优点
          (1)兼容性好,兼容若有主流浏览器,包括万恶的IE6
      
          (2)因为在DOM中center_panel在三列结构的最前面,因此可以实现主要内容的优先加载
          

    展开全文
  • 双飞翼布局

    千次阅读 2018-06-05 12:27:33
    双飞翼布局一、什么是双飞翼布局双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现:就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 二、HTML布局...
  • 上边中间那块就是双飞翼布局,左右两边固定,中间自适应,在布局的时候需要注意一点。要先将middle这一块内容先书写,在它渲染完之后在书写left和right。 这样出来的结果就是left和right都跑到了middle的下边,接...
  • 文章目录什么是双飞翼布局双飞翼布局的特点怎么实现双飞翼布局完整代码展示双飞翼布局与圣杯布局的不同圣杯布局参考 什么是双飞翼布局 圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局 双飞翼布局的特点 ...
  • 题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 要求:允许增加额外的DOM节点,但不能修改现有节点...
  • 经典双飞翼布局的理解(难点解析) 首先,在学习双飞翼布局前先去看看盒子模型吧,这会对理解这篇文章有很大的帮助,也会有更加深入的理解。 我先罗列几个稍微比较难理解的问题吧,相信不少的新手小白会在这里碰壁,...
  • 等高布局: - 假等高: 原理:利用内外边距相抵消,注意父元素设置"overflow:hidden",列变宽,其他列等高变化 优点:结构简单,兼容所有浏览器 缺点:伪等高,需要合理控制margin和padding值配合 /*三列,把...
  • 1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局(左右固定,中间流动布局) 产生原因:以前实现左中右必须按照源顺序(在 DOM 中表现为先写 Left,然后 Middle,最后,Right)等,它将可能导致代码不够...
  • 三栏布局解决的问题 布局要求: 三列布局,中间宽度自适应,左右栏定宽 中间栏要在浏览器中优先渲染(放在文档流前面优先渲染) 允许任意列的高度最高 方法1:圣杯布局 步骤: 给三栏设置浮动,高度 给左右...
  • 圣杯布局,双飞翼布局及其优缺点

    千次阅读 2018-04-28 01:04:12
    圣杯布局与双飞翼布局的优点:利用布局,可优先渲染主要部分不同点: 圣杯布局:借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度,同一个杯子,非主要元素其只是占据了全部容器的padding值部分; ...
  • 一、圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头、有尾、包三列,圣杯布局中间是有container大容器包裹着左中右区域的。 &lt;!--特点:有头、有尾、包三列(有个container容器包裹:左、中、...
  • 圣杯布局和双飞翼布局都是实现的三栏布局,两边的盒子宽度固定,...比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局,源与淘宝的UED。通过缩放页面就可以发
  • 双飞翼布局中,有几点不是很懂,求大神点拨。 1.设置.inner margin-left很好理解,就是要让#inner里面的内容从网页中间开始显示,但是为什么要设置 margin-right呢?(我去掉对布局好像也没影响) 2.对于1 我...
  • 2.3双飞翼布局

    2018-10-11 21:55:03
    圣杯布局的改进版 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style...
  • 理解双飞翼布局

    2017-07-05 12:49:48
    双飞翼布局主要解决俩问题:1、三列布局,中间宽度自适应,两边定宽; 2、中间栏要在浏览器中优先展示渲染。 在css布局中,有三种技术是经常被使用的: (1)浮动 (float) (2)负边距 (negative margin) (3)...
  • 【ibokan】双飞翼布局实现代码

    千次阅读 2014-02-25 20:24:16
    双飞翼布局是淘宝UED由国外圣杯布局优化而来的经典三栏布局解决方案,具有中栏html结构靠前且宽度自适应,侧栏宽度固定,且允许任何一栏为最高高度等优点。实现原理是先将中栏放好,然后让紧随其后的左右两栏利用...
  • 为了实现经典的左右边列宽度一定,中间列宽度自适应,可以采用早期的圣杯布局,之后的改良效果为双飞翼布局,这里介绍了圣杯布局,并比较了圣杯布局与双飞翼布局之间的区别
  • 圣杯布局与双飞翼布局的实现&区别

    千次阅读 2015-10-11 17:08:28
    圣杯布局与双飞翼布局的目的都是为了实现三列等高布局,并且左右两列定宽,中间一列宽度自适应。下面分别讨论一下: 1、圣杯布局 首先解释一下此布局和圣杯没有一毛钱关系~~~我也不知道为啥就叫这个名字了,不过看...
  • 方法一:圣杯布局 1.设置基本样式 为了高度保持一致给left main right都加上min-height:130px。 2.圣杯布局是一种相对布局,首先设置父元素container的位置:    实现效果是左右分别空出200px和300px区域,...
  • 双飞翼布局 双飞翼布局,是一种页面布局的形象的表达。具体表现形式为 两边顶宽,中间自适应宽度的三栏布局,中间栏要放在HTML文档流的最前,优先渲染 实现方式 float 浮动流 页面基本布局很简单,总共有三栏...
  • css布局双飞翼布局圣杯布局flex,float 目录双飞翼布局 (三列布局,高度铺满,两边定宽,中间自适应)三栏等高布局 (高度不定,但是等高)圣杯布局flex圣杯布局float 双飞翼布局 (三列布局,高度铺满,两边定宽,...
  • 圣杯布局和双飞翼布局两者是差不多的,最早来自 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 在国内则是由淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播 都是为了实现一个两侧宽度...
  • 双飞翼布局-完整代码

    2018-06-16 14:25:35
    双飞翼布局圣杯布局的区别 1.俩种布局方式都是把主列放在文档流最前面,使主列优先加载。 2.两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。 3.两种布局方式的不同之处在于...
  • 布局实现的目的 1.三列布局,两端固定高度,中间栏自适应。 2.中间栏优先渲染。 3.任意栏高度自由不限制。 效果展示 布局实现 一.圣杯布局 1.由于要实现中间栏先渲染,所以需要将center放置前面。 <div class=...

空空如也

1 2 3 4 5 ... 20
收藏数 3,437
精华内容 1,374
热门标签
关键字:

双飞翼布局