zoukankan      html  css  js  c++  java
  • 圣杯布局以及双飞燕布局(栅格)

    部分转自:什么是圣杯布局、双飞翼布局?

    圣杯布局和双飞翼布局解决的问题是一样的,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染

    但是圣杯布局和双飞翼布局在实现方式上有一点差别。

    圣杯布局的来历是2006年发在a list part上的这篇文章: 
    http://alistapart.com/article/holygrail 
    双飞翼布局介绍-始于淘宝UED: 
    http://www.imooc.com/wenda/detail/254035

    圣杯布局

    1. 三者都设置向左浮动。
    2. 设置中间的宽度为100%。
    3. 设置负边距margin-left。左部分设置-100%,.右部分设置-width px。
    4. 设置容器的padding值给左右两部分留出空间。
    5. 设置左右部分为相对定位。左部分left的为-width,右部分right为-width。

    HTML

    <div id="container">
        <!--先写中间部分-->
        <div id="main" class="col"></div>
        <div id="left" class="col"></div>
        <div id="right" class="col"></div>
    </div>

    主体main放置在最前面可以优先加载。

    CSS

    body {min-width: 550px;} 
    .col {position: relative;float: left;} #container {padding: 0 190px 0 190px;} #main {width: 100%;height: 400px;background-color: #ccc;} #left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;} #right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}

    圣杯布局有个问题,当面板的中间部分比两边的子面板宽度小的时候,布局就会乱掉。

    圣杯布局

    双飞翼布局

    HTML

    <div id="container">
        <div id="main" class="col">
            <div id="main-wrap"></div>
        </div>
        <div id="left" class="col"></div>
        <div id="right" class="col"></div>
    </div>

    与圣杯布局相比,双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题,这也是两者实现方式最大的不同点。

    CSS

    body {min-width: 550px;}
    .col {float: left;}
    
    #main {width: 100%;height: 400px;background-color: #ccc;}
    
    #main-wrap {margin: 0 190px 0 190px;}
    
    #left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}
    
    #right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

    与圣杯布局一样,一开始三个col都设置float: left,为了把left和right定位到左右部分,采用负边距,left部分margin-left: -100%,right部分margin-right: -190px

    之后就是处理main中内容的遮盖问题,只需设置main-wrap的左右外边距即可解决。

    相比圣杯布局,双飞翼不必设置左右栏的position: relative,也不必设置左右left、right值,只需#main多添加一个子元素包含,相应的padding换成margin。总的说来简单不少。

    双飞翼布局的好处:

    1. 主要的内容先加载的优化;
    2. 兼容目前所有的主流浏览器,包括IE6在内;(就一个针对ie6的清除浮动hack:_zoom: 1;)
    3. 实现不同的布局方式,可以通过调整相关CSS属性即可实现。(可搭配实现一套栅格化布局系统)

    什么是栅格化布局:

    简单点说就是:像ps中的参考线一样,用若干水平参考线和垂直参考线将画布(网页)分割成若干份以便于布局排版。当然这个水平参考线和垂直参考线并不是随便拉的而是有规律的。

    标准的栅格化公式

                                          W = c * n + g * (n - 1) + 2 * m

    在实际操作过程中,我们会省略掉最左边和最右边的那两个外边距,也就是说w1的宽度才是总宽度。

                                                w1=(c + g) * n - g

    写模板与是有讲究的,为了尽可能减少代码且发挥代码最大的公用性,我们可以使用父级控制子级。每次布局结构不同时,我们只修改父级样式名就可以实现布局变换。

    如果我们要求布局如下:

    回到前面的公式中,我们套用下公式可得出:190=(c+10)*n-10,化简后:200=(c+10)*n此时,cn是未知的,所以可以有推算出几种组合(注意:n是正整数!)。

    例:c=190,n=1c=90,n=2c=40,n=4c=30,n=5c=15,n=8等。如果让c=30,此时父级样式名为:grid-c2-m0s5,如果让c=40,此时父级样式名为:grid-c2-m0s4

    这个要看个人喜好了,如果习惯c=30。有了父级样式后,我们来改造下css样式即可实现灵活布局了。

    html:

    <div class="col grid-c2-m0s1 clearfix">
      <div class="col-main">
        <div class="main-wrap">grid-c2-m0s1</div>
      </div>  
      <div class="col-sub">sub=30</div>
    </div>

    css:

    双飞翼:

    .col-main{float:left;width:100%;height:50px;}
    .main-wrap{background:#666;height:100%}
    .col-sub{float:left;height:50px;background:#ccc;}

    栅格:

    /*两列  左主右侧*/
    .grid-c2-m0s1{}
    .grid-c2-m0s1 .main-wrap{margin-right:40px}
    .grid-c2-m0s1 .col-sub{width:30px;margin-left:-30px}

    有了这些模板库后,当我们页面布局需要变动时直接修改父级class即可实现对应布局

  • 相关阅读:
    混合现实开发教程unity2017
    Intro to Airplane Physics in Unity 3D – 2017 and 2018
    Unity Awards 2018最佳资源
    ambiguous
    Unity2018.3全新Prefab预制件系统深入介绍视频教程+PPT+Demo源码
    Android Studio 集成开发工具教学视频 + 项目实战安卓多SDK接入与集成
    Unity下一轮最大的变革-Entity Component System & C# Jobs System
    使用unity开发游戏时如觉得游戏声音太吵,点Mute Audio
    SQL Delta实用案例介绍
    经典批处理实现自动关机(BAT)
  • 原文地址:https://www.cnblogs.com/coderL/p/7885503.html
Copyright © 2011-2022 走看看