css布局

作者: lingfighting | 来源:发表于2016-12-15 18:38 被阅读71次

    按照是否相应浏览器宽度变化划分:

    固定宽度布局:body的width是一个固定值,当浏览器的窗口缩小时,底部出现滚动条。无论几栏布局,各栏的width都是事先设为定值。比较复杂的网站一般采用这种布局,例如:京东
    弹性(flex)布局:body的width不是一个固定的值,当浏览器窗口缩小时,浏览器里的内容宽度也相应收缩。网页为多栏布局时,即可都为弹性布局,也可部分固定宽度,部分弹性布局。一般用于简单网站,例如:谷歌
    响应式布局:设计师事先设计多种方案的布局,前段工程师根据媒体查询,获取当前浏览器的宽度,呈现不同的布局。一般用于多终端(PC、PAD、PHONE等)

    按照网页整体内容布局划分

    1. 单栏布局
      单栏布局,是指网页内容呈中心展示。如下图所示。

      注:在这里,设置width为固定宽度布局;设置max-width为弹性布局
      一栏布局
      一栏布局(通栏)
    2. 两栏布局
      浮动元素 + 普通元素margin

      两栏布局(一栏弹性)
      两栏布局(两栏都弹性)
    3. 三栏布局
      两侧两列固定宽度,中间列自适应宽度


    • 普通三栏布局
      html设计:
      <div id="content">
        <div class="menu">aside</div>
        <div class="aside">aside</div>
        <div class="main">content</div>
      </div>
    

    css设计:两边列宽分别左浮和右浮,中间区块设置左右margin,大小分别为左右列块宽度。普通三栏布局

    • 圣杯布局和双飞翼布局

    与上面普通三栏布局在html结构上不同。将呈现内容的区块放在两边列块的前面,浏览器优先解析该区块

    利用浮动 和负margin:对于相邻的浮动元素,如果因为空间不够导致第n个浮动元素下移,可以通过给第n个浮动元素设置 margin为负值,来让第n个元素上移,其中负值的数值等于第n个元素的
    宽度减去父容器被其他元素占用后还剩下的宽度,即第n个元素与其他元素折叠部分的宽度。浮动和负margin让元素上移实例

    圣杯布局和双飞翼布局的html结构不一样

    • 圣杯布局:两边栏位于父元素的margin上方,为了保证自适应宽度的父元素的宽度>左边栏的宽度,需要为父元素设置min-width
    • 双飞翼布局:两边栏位于上一兄弟元素(中间栏)的子元素的margin上方。只需要(中间栏)的子元素的margin大小就可保证(中间栏)的宽度永远>左边栏的宽度

    圣杯布局

    html设计:
    
     <div id="content"> 
          <div class="main">main</div>
         <div class="aside">aside</div> 
          <div class="extra">extra</div> 
    </div>
    
    css设计:
    
    #content:after{
    content: ''; /*8*/
    display: block; /*8*/ 
    clear: both; /*8*/
    } 
    /*父容器设置padding和margin都可使content区块两边出现空白,并且使content内容宽度变小,
    即,使main的内容宽度边小,此布局为弹性布局,
    当浏览器窗口缩小,content的内容宽度(main的内容宽度)小于左边列块的宽度,
    左边列宽将不会上移,布局将发生错乱。
    此时需要设置main的min-width为左边列块的宽度*/
     #content{
     padding-left: 100px; /*5*/ 
    padding-right: 150px; /*5*/ 
      /*margin-left: 110px;*/
    /*margin-right: 160px;*/
    } 
    .aside, .main, .extra{
     float: left; /*2*/ 
    }
     .aside{
     width: 100px; /*1*/ 
    height: 300px; /*1*/
     background: red; /*1*/ 
    /*浮动和负margin是元素上移。左边列宽上移后还需要移到main的右边*/
    margin-left: -100%; /*4*/ 
    /*相对定位*//*左右两个侧边栏仍然包裹在父容器里面,移动相对于自身宽度的位置,就先当于移动到了父容器的margin或者padding上方*/
    position: relative; /*6*/ 
    /*两边区块通过负margin上移后,再通过移动自身宽度的位置,实际占用的是父元素的margin*/
    left: -100px; /*6*/ 
    } 
    .extra{ 
    width: 150px; /*1*/
     height: 300px; /*1*/ 
    background: yellow; /*1*/
    /*浮动和负margin是元素上移*/
     margin-left: -150px; /*5*/ 
    /*相对定位*/
    position: relative; /*7*/
     left: 150px; /*7*/
     } 
    .main{ 
    height: 350px; /*1*/ 
    background: blue; /*1*/ 
    /*main的内容的宽度等于父容器内容的宽度*/
    width: 100%; /*3*/
     }
    

    圣杯布局实例

    双飞翼布局(和圣杯布局里,左右列块上移之前的步骤一样)

    圣杯布局中当浏览器窗口减小,使得main内容宽度减小,而左边列宽的负margin值与main内容宽度有关,main内容宽度减小到左边列块宽度以下,导致左边列宽不上移,布局出现混乱的问题,出现了双飞翼布局。
    双飞翼布局是基于圣杯布局出现问题的改进。浏览器窗口变小,左边列宽位置不发生变化的关键在与main的内容宽度,即aside的上一个元素main的宽度永远大于等于左边列块的宽度,就能保证布局不发生错乱。为此,双飞翼布局在html排列上做出了改变。

    html设计:

     <div id="content"> 
    <div class="main">
     <div class="wrap">main</div> 
    </div>
     <div class="aside">aside</div> 
    <div class="extra">extra</div> 
    </div>
    

    css设计:

    main内部多包裹了一层,需要实现的是wrap内容宽度变化,但是main内容宽度自动保持最小值。做法就是给wrap加margin(main的最小值是wrap两边margin和,始终大于左边列块的大小),实现左右列块在页面内容的两边排列。

     #content:after{
     content: ''; /*8*/
     display: block; /*8*/ 
    clear: both; /*8*/
     } 
    #content{ }
     .aside, .main, .extra{ 
    float: left; /*2*/ 
    }
     .aside{
     width: 100px; /*1*/
     height: 300px; /*1*/ 
    background: red; /*1*/ 
    margin-left: -100%; /*4*/
     }
     .extra{ 
    width: 150px; /*1*/ 
    height: 300px; /*1*/ 
    background: yellow; /*1*/ 
    margin-left: -150px; /*5*/ 
    }
     .main{
     /* background: blue; */ /*第1步添加,第7步注释掉*/
     /* height: 350px; */ /*第1步添加,第7步注释掉*/ 
    width: 100%; /*3*/
     } 
    .wrap{ 
    margin-left: 100px; /*6*/ 
    margin-right: 150px; /*6*/ 
    background: blue; /*7*/
     height: 350px; /*7*/
     } 
    

    双飞翼布局实例

    其他布局知识:

    • 水平等距排列
    • 浮动和负margin结合,是元素上移,必须都是浮动元素
    • 浮动元素的宽度根据内容自动收缩,所以必须设置宽高。若要实现宽度铺满父容器,需要使用width:100%(自身内容的宽度等于父容器内容的宽度)
    • 最好不要设置外部容器的宽高,使用内容的宽高撑开父容器
    • 浮动元素对margin:0 auto和text-align:center失效
    • 先根据页面结构写html,布局交给CSS
    • 写了float,一定要清除浮动
    • float不要与绝对定位一起使用
    • margin:0 auto和绝对定位一起使用无效
    • 文字的高度使用line-height好于height,可使单行文字垂直居中

    文章著作权归本人所有,转载须说明来源

    相关文章

      网友评论

          本文标题:css布局

          本文链接:https://www.haomeiwen.com/subject/powvmttx.html