美文网首页
多栏布局

多栏布局

作者: Artifacts | 来源:发表于2019-10-11 23:08 被阅读0次

一、布局的几种方式

  • 静态布局

页上的所有元素的尺寸一律使用px作为单位
1.布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，
如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端
2.设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分
优点:这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。

  • 流式布局

流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统网格系统

  1. 布局特点
    屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
  2. 设计方法
    使用%百分比定义宽度，高度大都是用px来固定住
    缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示

  • 自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，
页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

  • 响应式布局

  1. 布局特点
    每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
  2. 设计方法
    媒体查询+流式布局。
    优点：适应pc和移动端，如果足够耐心，效果完美。
    缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
    （2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

  • 弹性布局（rem/em布局）

  1. rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素
  2. 使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
  3. 浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，
    CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，
    因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

结论

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

两栏布局

  • 1、左侧固定宽度，右侧自适应


方法一： 左侧设置float:left，右侧设置margin-left为左侧的宽度。右侧不能设置float:left。

<!doctype html>      
<html>      
    <head>      
        <style type="text/css">      
            #left{      
                width:500px;      
                height:300px;      
                float:left;     
                background:red;      
            }      
            #right{      
                height:300px;     
                margin-left:500px;  
                background:blue;      
            }      
        </style>      
    </head>      
    <body>      
        <div id="left"></div>      
        <div id="right"></div>      
    </body>      
</html>

方法二： 左侧设置float:left，右侧设置overflow:hidden。
利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            #left{    
                width:500px;    
                height:300px;    
                float:left;   
                background:red;    
            }    
            #right{    
                height:300px;     
                overflow:hidden;  
                background:blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

方法三： 左侧设置绝对定位，右侧设置margin-left为左边的宽度。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            body{  
                margin:0;  
            }  
            #left{    
                width:500px;    
                height:300px;    
                position:absolute;  
                left:0px;  
                top:0px;  
                background:red;    
            }    
            #right{    
                height:300px;     
                margin-left:500px;  
                background:blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

方法四： 父元素设置display:flex,右侧设置flex:1

<!doctype html>      
<html>      
    <head>      
        <style type="text/css">      
            body{  
                display:flex;  
            }  
            #left{      
                width:500px;      
                height:300px;    
                background:red;      
            }      
            #right{      
                height:300px;     
                flex:1;  
                background:blue;      
            }      
        </style>      
    </head>      
    <body>      
        <div id="left"></div>      
        <div id="right"></div>      
    </body>      
</html>

  • 2、右侧固定宽度，左侧自适应


方法一： 左侧设置margin-right为右侧的宽度，右侧设置float:right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            #left{  
                height:300px;  
                margin-right:300px;  
                background:red;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                background:blue;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="right"></div>  
        <div id="left"></div>  
    </body>  
</html>

注意：right要放在left的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而left是非float的元素，为避免right内容换行下移，需要把right放在left的前面。
方法二： 左侧设置margin-right为右侧的宽度，右侧采用绝对定位，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            body{  
                margin:0;  
            }  
            #left{  
                height:300px;  
                margin-right:500px;  
                background:red;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                position:absolute;  
                top:0;  
                right:0;  
                background:blue;  
        }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
    </body>  
</html>

此时left和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高，为此，可统一设置body的margin为0。
方法三： 左侧设置width为100%，float: left，margin-right为右侧的宽度的负值，右侧设置float: right。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            #left{    
                height:300px;     
                float:left;  
                width:100%;  
                margin-right:-500px;                  
                background:red;    
            }    
            #right{    
                width:500px;    
                height:300px;    
                float:right;    
                background:blue;    
            }    
        </style>    
    </head>    
    <body>     
        <div id="left"></div>    
        <div id="right"></div>   
    </body>    
</html>

方法四： 父元素设置display:flex，左侧设置flex:1。

<!doctype html>        
<html>        
    <head>        
        <style type="text/css">        
            body{    
                display:flex;    
            }    
            #left{              
                height:300px;              
                flex:1;     
                background:red;        
            }        
            #right{        
                width:500px;  
                height:300px;   
                background:blue;        
            }        
        </style>        
    </head>        
    <body>        
        <div id="left"></div>        
        <div id="right"></div>        
    </body>        
</html>

三栏布局

  • 左右固定宽度，中间自适应


    https://codepen.io/myongchon/pen/abbveor

方法一：左侧设置float:left，右侧设置float：right，中间设置margin-right为右侧的宽度，margin-left为左侧的宽度。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            #left{  
                width:200px;  
                height:300px;  
                float:left;  
                background:red;  
            }  
            #middle{  
                height:300px;  
                margin-left:200px;  
                margin-right:500px;  
                background:blue;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
        <div id="middle"></div>  
    </body>  
</html>

注意：right要放在middle的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而middle是非float的元素，为避免right内容换行下移，需要把right放在middle的前面。

方法二： 中间设置margin-right为右侧的宽度，margin-left为左侧的宽度，左侧和右侧采用绝对定位，根据左侧div所需的left与浏览器窗口的顶端和左边的距离分别设置top和left，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            body{  
                margin:0;  
            }  
            #left{  
                width:200px;  
                height:300px;  
                position:absolute;  
                left:0;  
                top:0;  
                background:red;  
            }  
            #middle{  
                height:300px;  
                margin-left:200px;  
                margin-right:500px;  
                background:blue;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                position:absolute;  
                right:0;  
                top:0;  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="middle"></div>  
        <div id="right"></div>  
    </body>  
</html>

此时middle和right的位置前后无关紧要。
注意：由于body默认有margin，对绝对定位的left设置top:0和left:0，right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高，为此，可统一设置body的margin为0。

方法三：父元素设置display:flex，中间设置flex:1。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            body{    
                margin:0;    
                display:flex;  
            }    
            #left{    
                width:200px;    
                height:300px;     
                background:red;    
            }    
            #middle{    
                height:300px;    
                flex:1;  
                background:blue;    
            }    
            #right{    
                width:500px;    
                height:300px;  
                background:red;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="middle"></div>    
        <div id="right"></div>    
    </body>    
</html>

相关文章

  • 小程序4——UI布局问题（持续更新）

    1、关于display:flex 多栏多列布局 小程序中推荐使用display:flex多栏布局，来简化页面布局 ...

  • 多栏布局

    多栏布局column用于实现多栏布局【每栏的宽度始终相等，适合做文章而不适合网站】[column-width c...

  • 多栏布局

    一、布局的几种方式 静态布局 页上的所有元素的尺寸一律使用px作为单位1.布局特点不管浏览器尺寸具体是多少，网页布...

  • css3设计模式，常用布局

    1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，a...

  • 布局

    单栏布局两栏布局三栏布局风景列表卡片

  • 用CSS实现布局（两栏布局，多栏布局）

    在网页上的布局比较经典的是两栏布局和三栏布局。下面简单总结自己对这两种布局的实现过程。 两栏布局 两栏布局是主内容...

  • CSS布局分类

    两栏布局 三栏布局 双飞翼布局 圣杯布局

  • vip10-1211作业

    单栏布局 三栏布局三栏布局自己又简化写了一遍 圣杯布局 双飞翼布局

  • Flex布局

    四栏布局 两栏布局 三栏布局 平均布局 flex布局 flex-direction:定义主轴方向 row: 元素摆...

  • 入门任务11

    单栏布局三栏布局圣杯布局双飞翼布局页面范例

网友评论

      本文标题：多栏布局

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|多栏布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！