您现在的位置是：网站首页> 编程资料编程资料

结合CSS3的布局新特征谈谈常见布局方法CSS3哪些新特性值得称赞

2021-09-05 1011人已围观

简介 这篇文章主要结合CSS3的布局新特征谈谈常见布局方法，进行一次基于CSS2、3的各种布局的方法总结，感兴趣的小伙伴们可以参考一下

一、常见的页面布局

在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一种最合理的，结构清晰的布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。

1、T型布局

这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。
Segmentfault的主页就是T型布局的。由于网页太长了，没有截取底部。

2、国字型布局

国字型布局下最上面是网站的标题以及横幅广告条，接下来是网站的主要内寄，左右分列一些小条内容，中问是主要部分，与左右一起罗列到底，最下方是网站的一些基本信息、联系方式、版权声明等。
案例图片来自腾讯11年的一道前段笔试题，有兴趣的同学可以去看一下。2011腾讯前端面试稿

3、POP布局

POP布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见：漂亮吸引人。缺点就是速度慢。
人大的主页就类似这种布局。

4、左右布局型

顾名思义，就是网页主体分为左右两大块，多见为后台管理系统页面。一般左右布局型的页面需要做到两列等高。

如：

5、上下布局型

参见苹果的官网，类似于整屏显示的网页都为上下布局。

二、如何实现——常见的布局方法

关于布局的类型就先说这么多，下面来总结一下上述的布局怎么来实现。下面提一下大家应该都很熟悉的两大布局方法。圣杯布局和双飞燕布局。其实这两种方法一般多用国字型布局上。就是针对三行三列布局的。进行相应的改造也可以用在T字型布局上。用这两种方法可以很好地解决主体部分优先加载的问题。

1、圣杯布局

基础布局：

XML/HTML Code复制内容到剪贴板
  1. <div id="header">div>  
  2. <div id="main">div>  
  3. <div id="footer">div>  

重点来看main部分的代码

CSS Code复制内容到剪贴板
  1. "text/css">   
  2.     #main {   
  3.         overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/  
  4.         zoom: 1;/*低版本ie下:触发haslayout属性,修整由子元素浮动引起的高度塌陷问题*/  
  5.         /*将主体部分左右侧预留出左右边栏大小的空白位置*/  
  6.         padding: 0 300px 0 220px;    
  7.     }   
  8.     .m_content, .m_leftside, .m_rightside {   
  9.         float: left;   
  10.         /*目的是将左右侧边栏拉回*/  
  11.         position: relative;   
  12.     }   
  13.     .m_content {   
  14.         width: 100%;   
  15.     }   
  16.     .m_leftside {   
  17.         width: 220px;   
  18.         /*由于m_content占据了100%空间，所以需要用负的margin值将左边栏拉回*/  
  19.         margin-left: -100%;   
  20.         /*将主体部分预留的左侧补白区域填充满*/  
  21.         left: -220px;   
  22.     }   
  23.     .m_rightside {   
  24.         width: 300px;   
  25.         /*用负的margin值将右边栏拉回自身大小个像素单位*/  
  26.         margin-left: -300px;   
  27.          /*将主体部分预留的右侧补白区域填充满*/  
  28.         left: 300px;   
  29.     }   
  30.   
  31.   
  32. "main">   
  33.     "m_content">这里是主体
  
  •     "m_leftside">这是左侧边栏
    •   
  •     "m_rightside">这是右侧边栏
    •   
    •   
  •   

    • 以上就是圣杯布局方法，基本思路是运用浮动加定位的方法，缺点是代码较复杂，不能模拟三栏等高效果。

    2、双飞燕布局

    布局的效果跟圣杯的一样，代码有所不同。双飞燕布局的代码更加简单，只是多加了一个div用来布局。
    基础布局部分代码一样。

    main部分：

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "main">   
    4.     "m_content">   
    5.            
    6.         "m_c_wrap">这里是主体
      
  •     
    •   
  •     "m_leftside">这是左侧边栏   
  •     "m_rightside">这是右侧边栏   
  •   
  •   

    • 了解了以上两种布局的方法后，很多布局都能写得得心应手了。但是应对多栏等高布局还有点欠缺。那么现在来谈谈多栏等高布局的方法。

    3、多栏等高布局

    这里详细总结了等高布局的八大方法 Click，我再谈谈实际项目中比较常用的，或者说比较简单的三种方法。

    图片模拟

    比如我们需要做一个上图的布局，那么需要截取这样一个侧边的小图片对侧边和内容部分包裹的元素进行背景平铺，用来模拟出侧边栏的高度跟内容高度一致的视觉效果。

    4、table布局

    只需要将需要等高的若干栏设置display属性为table-cell；若其中一列希望是自适应宽度，还需将父元素的display设置成table，width为100%。

    代码如下：

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "main">   
    4.     "m_content">
      
  •     "m_rightside">
    •   
  •    

    • 5、padding补白

    这是前不久在网上看到的一种办法，实质就是为栏目添加一个足够大的padding-bottom值，将栏目撑开，然后再添加相同大小的负的margin-bottom值将内容移动回来。注意要在负盒子上加上overflow: hidden的属性。

    代码如下：

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "main">   
    4.     "m_content">
      
  •     "m_rightside">
    •   
  •   
  •   

    • CSS2的布局方法总结得到这里就告一段落了。现在来看看CSS3新增的布局方法。

    一、Flex布局

    因为书面上的解释比较抽象，我这里就尽量说得简单通俗一点。

    要进行flex布局，需要定义一个flex容器，然后再处理其子项目。只要一个容器被定义为flex容器，那么其子元素都称作它的子项目。

    flex布局的基本思想是通过flex容器来伸缩控制子项目的宽度和高

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：css3 border旋转时的动画应用CSS border虚线边框属性教程CSS中使用border来创建三角形的基本方法讲解CSS3 flex布局之快速实现BorderLayout布局深入浅析css3 border-image边框图像详解实例讲解CSS3中的border-radius属性详解CSS3中border-image的使用CSS3使用border-radius属性制作圆角css border属性的使用方法和技巧

    下一篇：CSS3+Sprite实现僵尸行走动画特效源码 CSS3 steps属性制作僵尸行Sprite动画特效源码纯CSS3实现的人物行走动画特效源码

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网