布局_布局优化 - CSDN
精华内容
参与话题
  • css 布局的几种方式

    万次阅读 多人点赞 2018-08-21 23:25:20
    前言 ...CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局,不论是工作还是面试都是非常重要的知识...

    前言

    CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局,不论是工作还是面试都是非常重要的知识。

    1 table 布局

    table 布局是最简单的布局方式了,下面我们来看一个简单的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
    }
    .left{
        background-color: red
    }
    .right{
        background-color: green
    }
    </style>
    <body>
        <table class=container>
            <tbody>
                <tr>
                    <td class=left></td>
                    <td class=right></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    效果如下
    图1
    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式

    而且也加入了 display:table;dispaly:table-cell 来支持 teble 布局。用法如下

    <style>
    .table{
        display: table
    }
    .left{
        display: table-cell;
    }
    .right{
        display: table-cell
    }
    </style>
    
    <div class=table>
        <div class=left></div>
        <div class=right></div>
    </div>
    
    
    

    但是它也有自身的局限性,比如 table 比其它 html 标记占更多的字节(造成下载时间延迟,占用服务器更多流量资源),table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间),但是某些情况下,当采用其他方式不能很好的达到自己的效果时,采用 table 布局能适应当前场景。

    2 flex 布局

    2.1 盒模型

    在介绍 flex 布局之前,我们先了解一下盒模型的概念,这个是 css 最基础的概念,首先,我们引用一张图来解释
    盒模型
    这是百度百科里面盒模型的一张图。首先最中间的是 content 区域,即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域,这部分指的是内容区到边框的区域,即我们常说的内边距。然后就是 border 区,border 区本身也是占据空间的。边框外面是 margin 区,这部分指的是当前元素与其他元素的距离,即常说的外边距。

    首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

    然后计算一个盒子占用的空间是 content + padding + border + margin

    2.2 display / poistion

    这里还要介绍两个属性,display 和 poistion

    display 有如下几个值

    • block(元素表现为块级元素,有固定宽高,独占一行)
    • inline(元素表现为行内元素,不能设置宽高)
    • inline-block (对外表现为行内元素,对内表现为块级元素)3

    position 有如下几个值

    • static(默认情况,存在文档流当中)
    • relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)
    • absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)
    • fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)

    position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。

    2.3 flexbox 布局

    flexbox 布局即弹性盒子布局,它的特点是盒子本来就是并列的,只需要指定宽度,来看一个经典的三栏布局的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
        display: flex
    }
    .left{
        background-color: red; 
        flex: 1;
    }
    .middle{
        background-color: yellow; 
        flex: 1;    
    }
    .right{
        background-color: green;
        flex: 1;
    }
    </style>
    <body>
        <div class=container>
            <div class=left></div>
            <div class=middle></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    效果如下
    这里写图片描述
    有时我们可能需要两边定宽,中间自适应,那么可以这样写

    .left{
        background-color: red; 
        width: 20px;
    }
    .middle{
        background-color: yellow; 
        flex: 1;    
    }
    .right{
        background-color: green;
        width: 20px;
    }

    效果如下
    这里写图片描述

    如果想深入了解可以看阮一峰老师的文章

    Flex 布局教程:语法篇
    flex布局案例

    但是 flexbox 布局方式浏览器的支持不是太好,有一些兼容性的问题,但是是未来布局的趋势。

    3 float 布局

    float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下

    首先,什么是浮动?

    浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。

    那么它有什么特点呢

    • 对自身的影响
      • float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高
      • 浮动元素的位置尽量靠上
      • 尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉
    • 对兄弟元素的影响
      • 不影响其他块级元素的位置
      • 影响其他块级元素的文本
      • 上面贴非 float 元素
      • 旁边贴 float 元素或者边框
    • 对父级元素的影响
      • 从布局上 “消失”
      • 高度塌陷

    3.1 高度塌陷

    什么是高度塌陷,举个例子吧

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 200px;
        background-color:red;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 50px;
        width:50px;
    }
    .right{
        background-color: yellow; 
        float: right;
        height: 50px;
        width:50px;
    }
    </style>
    <body>
        <div class=container>       
            <span class=left>float</span>
            <span>我是字</span>
            <span class=right>float</span>
        </div>
        <div class="container" style="height: 200px;background: blue">      
        </div>
    </body>
    </html>

    效果如下
    高度塌陷
    从图中可以看出,两个 float 元素虽然包含在第一个 container 中,但是却超出了第一个 container 的范围,在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
    但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

    解决办法有下面几种

    • 父元素设置 overflow: auto 或者 overflow: hidden

      效果如下
      这里写图片描述

    • 给父元素加一个 after 伪类

        .container::after{
            content:'';
            clear:both;
            display:block;
            visibility:hidden;
            height:0; 
        }

    效果如下
    这里写图片描述
    这也是目前各大网站比较主流的清除浮动的方式,还有一些其他方式这里就不详细讲了,毕竟这是一篇讲布局的文章。

    3.2 两栏布局

    首先我们要明白为什么可以用 float 实现布局。其实上面的例子我们大概就可以看出来了,黄红黄这不就是一个标准的三栏布局吗。其实并没有,我们看看下面的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 400px;
        height: 200px;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 100%;
        width:100px;
    }
    .right{
        background-color: red; 
        margin-left: 100px;
        height:100%;
    }
    .container::after{
        content: '';
        display: block;
        visibility: hidden;
        clear: both
    }
    
    </style>
    <body>
        <div class=container>       
            <div class=left></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    效果如下
    这里写图片描述
    上面代码中最重要的是 margin-left: 100px;,这一句将浮动元素的位置空了出来,所以右边栏里面的元素不会影响到浮动的 div。

    这就是浮动布局的基本思想。

    3.3 三栏布局

    讲完两栏布局再讲一下三栏布局,思路主要是左边一个浮动元素,右边一个浮动元素。这里有个小问题,中间的元素要写在最后,因为中间元素假设有块级元素的话,会影响右边浮动元素的定位,这里演示一下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 400px;
        height: 200px;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 100%;
        width:100px;
    }
    .right{
        background-color: green; 
        float: right;
        height: 100%;
        width:100px;
    }
    .middle{
        background-color: red; 
        margin-left: 100px;
        margin-right: 100px;
        height:100%;
    }
    .container::after{
        content: '';
        display: block;
        visibility: hidden;
        clear: both
    }
    
    </style>
    <body>
        <div class=container>       
            <div class=left></div>
            <div class="middle"></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    这里写图片描述

    因为浮动元素会把块级元素的位置空出来,所以这里右边的浮动元素把上面的位置空了下来,所以正确的写法应该是

    <div class=container>       
            <div class=left></div>
            <div class=right></div>
            <div class="middle"></div>
    </div>

    效果如下
    这里写图片描述
    这样我们就实现了最基本的三栏布局

    4 响应式布局

    4.1 meta 标签

    最简单的处理方式是加上一个 meta 标签

    <meta name="viewport" content="width=device-width, initial-scale=1">

    其中,width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

    4.2 使用 rem

    rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。

    4.3 media query

    css2 允许用户根据特定的 media 类型定制样式,基本语法如下

    @media screen and (max-width: 360px) {  
         html { font-size: 12px;    }
    }

    意思就是: 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

    有一个需要注意的点是范围大的要放在上面,范围小的放在下面。假设有两个样式,一个适应 360px 以下,一个适应 640px 以下,如果 360px 的放在上面,但是小于 360px 同样满足小于 640px,这就不是我们想要的结果了,所以范围大的需要放在上面。

    5 总结

    这里只是简单的介绍了一下 css 的各种布局,如果想深入了解的话建议多看看相关的文章,比如浮动布局还包括圣杯布局,双飞翼布局等,本文只是 css 布局的基本入门,并不能真正满足一些需求,所以如果想深入了解的话还是需要多看看相关的文章、

    展开全文
  • 2019年前端五大布局,你学会了多少?

    万次阅读 多人点赞 2019-01-05 18:01:00
    一、静态布局 静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用px作为单位。 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)...

    一、静态布局

    静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用px作为单位。

    1.布局特点

    不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。

    2.设计方法

    --------PC--------
    居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,当窗口缩小时,内容被遮挡,呈现横竖向滚动条。 
    --------优点--------
    这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
    --------缺点--------
    显而易见,即不能根据用户的屏幕尺寸做出不同的表现。当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    二、自适应布局

    简单来说就是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。

    1.布局特点

    屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

    2.设计方法

    使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
    在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

    3.示例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>宽度自适应布局</title>
            <style>
                .wrap {
                    background-color: #FBD570;
                    margin-left: 100px;
                    margin-right: 150px;
                }
                .clearfix:after {
                    content: "";
                    clear: both;
                    display: block;
                }
                .left {
                    float: left;
                    width: 100px;
                    background: #00f;
                    height: 180px;
                    margin-left: calc(-100% - 100px); 
                }
                .right {
                    float: right;
                    width: 150px;
                    background: #0f0;
                    height: 200px;
                    margin-right: -150px;
                }
                .center {
                    background: #B373DA;
                    height: 150px;
                    float: left;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="wrap clearfix">
                <div class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</div>
                <div class="left">left,宽度固定,高度可固定也可以由内容撑开</div>
                <div class="right">right,宽度固定,高度可固定也可以由内容撑开</div>
            </div>
        </body>
    </html>

    三、流式布局

    页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变(栅格布局)。

    1.布局特点

    当屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

    2.设计方法

    (1)使用百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

    (2)这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

    (3)因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调。

    3.主要的问题

    是在于如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用)。例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    四、响应式布局

    为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。响应式几乎已经成为优秀页面布局的标准。

    1. 布局特点

    每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。

    2. 设计方法

    媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

    --------优点--------
    适应pc和移动端,如果足够耐心,效果完美。

    --------缺点--------
    (1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。
    (2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。

    响应式页面一般会在头部加上这一段代码:

    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">

    3.示例

    一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等)  and|not|only(三个关键字可以选)。随着缩放就会看到颜色的变化。

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    <style media="screen">
        @media screen and (max-width:600px){
          .con{
            background:red;
          }
        }
        @media screen and (min-width:600px) and (max-width:800px){
          .con{
            background:blue;
          }
        }
        @media screen and (min-width:800px){
          .con{
            background:green;
          }
        }
        .con{
          width: 100%;
          height: 100px;
        }
      </style>
    </head>
    <body>
      <div class="con">
    
      </div>
    </body>
    </html>

    五、弹性布局(rem/em布局)

    rem是相对于html元素的font-size大小而言的,而em是相对于其父元素。使用rem单位的弹性布局在移动端很受欢迎。

    1.优点

    (1)适应性强,在做不同屏幕分辨率的界面时非常实用

    (2)可以随意按照宽度、比例划分元素的宽高

    (3)可以轻松改变元素的显示顺序

    (4)弹性布局实现快捷,易维护

    2.属性设置

    display:box 将一个元素的子元素以弹性布局进行布局
    box-orient:horizontal  || vertical || inherit 子元素排列方式 
    box-align:start || end || center 子元素的对齐方式 (规定水平框中垂直位置 或 垂直框中水平位置)
    box-flex:number 子元素如何分配剩余空间
    box-ordinal-group:number 子元素显示顺序
    box-direction:normal || reverse || inherit 子元素的排列顺序
    box-pack: start || end || center 子元素的对齐方式(规定水平框中水平位置 或 垂直框中垂直位置)

    3.示例

    <!DOCTYPE html>
    <html>
    	<head>
    	<style>
        body,html{
          width: 100%;
          height: 100%;
          display: -webkit-box;
          -webkit-box-orient:vertical;
          -webkit-box-align:center;
          -webkit-box-pack:center;
        }
        .con{
          width: 90%;
          height: 90%;
          display: -webkit-box;
          -webkit-box-orient:vertical;
          border: 1px solid red;
        }
        .con .head{
          height: 200px;
          display: -webkit-box;
          -webkit-box-orient:horizontal;
        }
        .con .head .logo{
          width: 100px;
          height: 200px;
          background: pink;
        }
        .con .head .logoCon{
          height: 200px;
          -webkit-box-flex:1;
          background: green;
        }
        .con .content{
          -webkit-box-flex:1;
          background: orange;
          display: -webkit-box;
          -webkit-box-orient:horizontal;
          -webkit-box-direction:reverse;
        }
        .content div{
          width: 200px;
          text-align: center;
        }
        .con .footer{
          height: 100px;
          background: blue;
        }
      </style>
    </head>
    <body>
    <div class="con">
      <div class="head">
        <div class="logo"></div>
        <div class="logoCon"></div>
      </div>
      <div class="content">
        <div class="con1">111</div>
        <div class="con2">222</div>
        <div class="con3">333</div>
      </div>
      <div class="footer">
      </div>
    </div>
    </html>

    点击此链接,可以查看静态布局、自适应布局、流式布局、响应式布局的效果。

    展开全文
  • HTML+CSS 五种布局方式

    万次阅读 多人点赞 2018-11-23 10:01:08
    已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为300px,中间自适应。 一、浮动布局 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;...

    已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为300px,中间自适应。

    一、浮动布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>浮动布局</title>
        <style type="text/css">
          .wrap1 div{
                min-height: 200px;
            }
            .wrap1 .left{
                float: left;
                width: 300px;
                background: red;
            }
            .wrap1 .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .wrap1 .center{
                background: pink;
            }  
    
        </style>
    </head>
    <body>
    
        <div class="wrap1">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                浮动布局
            </div>  
        </div>
        
    </body>
    </html>
    

    浮动布局的兼容性比较好,但是浮动带来的影响比较多,页面宽度不够的时候会影响布局。

    二、绝对定位布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>绝对定位布局</title>
        <style type="text/css">
          .wrap2 div{
                position: absolute;
                min-height: 200px;
            }
            .wrap2 .left{
                left: 0;
                width: 300px;
                background: red;
            }
            .wrap2 .right{
                right: 0;
                width: 300px;
                background: blue;
            }
            .wrap2 .center{
                left: 300px;
                right: 300px;
                background: pink;
            } 
    
        </style>
    </head>
    <body>
    
        <div class="wrap2 wrap">
            <div class="left"></div>
            <div class="center">
                绝对定位布局
            </div>
            <div class="right"></div>
        </div>
    
    </body>
    </html>
    

    绝对定位布局快捷,但是有效性比较差,因为脱离了文档流。

    三、flex布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>flex布局</title>
        <style type="text/css">
          .wrap3{
                display: flex;
                min-height: 200px;
            }
            .wrap3 .left{            
                flex-basis: 300px;
                background: red;
            }
            .wrap3 .right{            
                flex-basis: 300px;
                background: blue;
            }
            .wrap3 .center{
                flex: 1;
                background: pink;
            }
    
        </style>
    </head>
    <body>
    
        <div class="wrap3 wrap">
            <div class="left"></div>
            <div class="center">
                flex布局
            </div>
            <div class="right"></div>
        </div>
    
    </body>
    </html>
    

    自适应好,高度能够自动撑开

    四、table-cell表格布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>table-cell表格布局</title>
        <style type="text/css">
          .wrap4{
                display: table;
                width: 100%;
                height: 200px;
            }
            .wrap4>div{
                display: table-cell;
            }
            .wrap4 .left{           
                width: 300px;
                background: red;
            }
            .wrap4 .right{          
                width: 300px;
                background: blue;
            }
            .wrap4 .center{
                background: pink;
            }
    
        </style>
    </head>
    <body>
    
        <div class="wrap4 wrap">
            <div class="left"></div>
            <div class="center">
                表格布局
            </div>
            <div class="right"></div>
        </div>
    
    </body>
    </html>
    

    兼容性好,但是有时候不能固定高度,因为会被内容撑高。

    五、网格布局

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>网格布局</title>
        <style type="text/css">
          .wrap5{
                display: grid;
                width: 100%;
                grid-template-rows: 200px;
                grid-template-columns: 300px auto 300px;
            }
            .wrap5 .left{   
                background: red;
            }
            .wrap5 .right{  
                background: blue;
            }
            .wrap5 .center{
                background: pink;
            }
    
        </style>
    </head>
    <body>
    
        <div class="wrap5 wrap">
            <div class="left"></div>
            <div class="center">
                网格布局
            </div>
            <div class="right"></div>
        </div>
    
    </body>
    </html>
    

    比较新的一种布局方式,兼容性没那么好。

    展开全文
  • 常见的页面布局

    千次阅读 2018-02-27 16:45:58
    1. T形布局这个是我们比较常见的布局,其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。。由于网页太长了。。没有截取底部。image.png2. 三栏型布局国...

    1. T形布局

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


    image.png

    2. 三栏型布局

    国字型布局下最上面是网站的标题以及横幅广告条,接下来是网站的主要内寄,左右分列一些小条内容,中问是主要部分,与左右一起罗列到底,最下方是网站的一些基本信息、联系方式、版权声明等

    image.png

    3. POP布局

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

    image.png

    4.左右布局型

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

    image.png

    5. 上下布局型

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

    image.png

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

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

    1. 圣杯布局

    <style type="text/css">
        #main {
            overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/
            zoom: 1;/*低版本ie下:触发haslayout属性,修整由子元素浮动引起的高度塌陷问题*/
            /*将主体部分左右侧预留出左右边栏大小的空白位置*/
            padding: 0 300px 0 220px; 
        }
        .m_content, .m_leftside, .m_rightside {
            float: left;
            /*目的是将左右侧边栏拉回*/
            position: relative;
        }
        .m_content {
            width: 100%;
        }
        .m_leftside {
            width: 220px;
            /*由于m_content占据了100%空间,所以需要用负的margin值将左边栏拉回*/
            margin-left: -100%;
            /*将主体部分预留的左侧补白区域填充满*/
            left: -220px;
        }
        .m_rightside {
            width: 300px;
            /*用负的margin值将右边栏拉回自身大小个像素单位*/
            margin-left: -300px;
             /*将主体部分预留的右侧补白区域填充满*/
            left: 300px;
        }
    </style>
    
    <div id="main">
        <div class="m_content">这里是主体</div>
        <div class="m_leftside">这是左侧边栏</div>
        <div class="m_rightside">这是右侧边栏</div>
    </div>
    

    相关解释如下:

    (1)中间部分需要根据浏览器宽度的变化而变化,所以要用100%,这里设左中右向左浮动,因为中间100%,左层和右层根本没有位置上去
    (2)把左层margin负100后,发现left上去了,因为负到出窗口没位置了,只能往上挪
    (3)按第二步这个方法,可以得出它只要挪动窗口宽度那么宽就能到最左边了,利用负边距,把左右栏定位
    (4)但由于左右栏遮挡住了中间部分,于是采用相对定位方法,各自相对于自己把自己挪出去,得到最终结果

    2. 双飞翼布局

    <style>
        #main {overflow: hidden;zoom: 1;}/*这里不需要加padding了*/
        .m_content, .m_leftside, .m_rightside {float: left;}
        .m_content {width: 100%;}
        /*用左右边距将左右边栏的位置预留出来*/
        .m_c_wrap {margin-left: 220px;margin-right:300px;}
        .m_leftside {width: 220px;margin-left: -100%;}
        .m_rightside {width: 300px;margin-left: -300px;}
    </style>
    
    <div id="main">
        <div class="m_content">
            <!--正真的主体开始-->
            <div class="m_c_wrap">这里是主体</div>
        </div>
        <div class="m_leftside">这是左侧边栏</div>
        <div class="m_rightside">这是右侧边栏</div>
    </div>
    

    圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个父级div就可以不用相对布局了,只用到了浮动和负边距。

    3. 多栏等高布局

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

    • table布局
      只需要将需要等高的若干栏设置display属性为table-cell;若其中一列希望是自适应宽度,还需将父元素的display设置成table,width为100%。
      代码如下:
    <style>
        #main {display: table;width: 100%}
        .m_content {display: table-cell;width: auto;}
        .m_rightside {display: table-cell;width: 200px;}
    </style>
    
    <div id="main">
        <div class="m_content"></div>
        <div class="m_rightside"></div>
    </div>
    
    • padding补白
      这是前不久在网上看到的一种办法,实质就是为栏目添加一个足够大的padding-bottom值,将栏目撑开,然后再添加相同大小的负的margin-bottom值将内容移动回来。注意要在负盒子上加上overflow: hidden的属性。
      代码如下:
    <style>
        #main {width: 100%;overflow: hidden;}
        .m_content {width: auto;float:left;}
        .m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
    </style>
    
    <div id="main">
        <div class="m_content"></div>
        <div class="m_rightside"></div>
    </div>
    

    其实发现这不过是BFC中的几个情况而已。更多关于BFC的请移步:

    FLEX布局

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

    flex布局的基本思想是通过flex容器来伸缩控制子项目的宽度和高度,以此来完全填充flex容器的可用空间。子项目的宽高、排列方式等都是通过设置相关属性改变的。那么以这种方式布局上述几种布局就简单多了。子项目默认的排列方式与浮动布局略为相似。

    image.png

    flex容器的定义方式:

    div{display:flex}
    

    flex容器分为主轴和侧轴。主轴决定容器子项的排列方向。侧轴与主轴相互垂直。主轴可有垂直和水平两个方向。
    flex容器可对子项进行的操控有:(即设置在容器的属性。这个很重要!)
    子项目的排列方向(也就是刚刚说的定义主轴)—— flex-direction

    • 子项目的换行方式(就是超出flex容器跨度时换不换行=。=怎么换) —— flex-wrap
    • 同时进行子项目排列方向和换行方式的设定 —— flex-flow
    • 子项目在主轴的对齐方式(想象成文字的对齐方式就容易理解了) —— justify-content
    • 子项目在侧轴的对齐方式 —— align-items
    • 同时进行子项目主轴和侧轴对齐方式的设定 —— align-content

    下面来看看每一个属性的取值和实现效果
    flex-direction:

    div{ flex-direction: row /*水平排列,默认*/ 
                         <row-reverse> /*水平排列,但子项目从右侧开始排列*/             
                         <column> /*垂直排列*/ 
                         <column-reverse>; /*垂直排列,但子项目从下侧开始排列*/ }
    

    测试中我令flex容器的宽度为100px,高为200px,定义了5个未定义宽高的子项目,演示了上述的四种排列情况。效果:

    image.png

    这里需要说明的是:在未定义子项目的伸缩方式时,默认是按子项目本身大小渲染的。
    flex-wrap

    div{ flex-direction: nowrap /*当子项目在主轴上的总跨度大于主轴长度时,不进行换行,而是缩小每个子项目的跨度。默认*/
                         <wrap> /*---同上---进行换行显示*/ 
                         <wrap-reverse> /*从侧轴的末端进行换行(在主轴的排列方向不变)。实际不常用*/ }
    

    测试中我定义了每个子项目的宽度为30px,flex容器还是原来的100px宽。效果:

    image.png
    image.png
    image.png

    由于这里设定的是子项目宽度,所以对于主轴为垂直方向的容器子项没什么影响。
    flex-flow

    div{ flex-flow: <flex-direction> || <flex-wrap>; 
    /*就是上述两个属性的结合简写 默认:flex-flow:row nowrap*/ }
    

    justify-content

    div{ justify-content: flex-start /*以项目开始进行排列的那端进行对齐,默认左对齐*/ 
                          <flex-end> /*以项目结束排列的那端进行对齐,默认右对齐*/                 
                          <center> /*居中对齐,默认水平居中*/
                          <space-between>  /*两端对齐且项目之间的间隔都相等(贴边显示)*/ 
                          <space-around>  /*第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布*/}
    

    测试时我设定了flex容器宽高都为200px,子项没有设定宽高。 效果:
    主轴为水平方向时:


    image.png

    主轴为水平垂直时:


    image.png

    align-items

    div{ align-items: flex-start /*侧轴起始点对齐*/ 
                      <flex-end> /*侧轴终止点对齐*/ 
                      <center> /*侧轴中点点对齐*/ 
                      <baseline>  /*项目的第一行文字的基线对齐*/ 
                      <stretch> /*默认值,如果项目未设定宽(高度),则占满整个容器侧轴跨度*/ }
    
    image.png

    最后的baseline看起来跟flex-start没啥区别,因为我给每个子项设置高度。设置高度后:

    image.png

    align-content

    div{ align-content: flex-start /*与侧轴起始点对齐*/
                        <flex-end> /*与侧轴终止点对齐*/ 
                         <center> /*与侧轴中点点对齐*/ 
                         <space-between>  /*与侧轴两端对齐,各子项在各轴上的间距相等*/ 
                         <space-around> /*各子项在各轴上的间距相等,项目间距比边距间距大一倍*/ 
                         <stretch>/*项目占满整个侧轴*/  }
    

    上面已提到过,对于单轴线的子项来说,本属性不起作用。但是默认情况下是只有子项目是一根轴线的(flex-wrap默认是nowrap),所以要使这个属性看到效果,必须设置flex-wrap。已下是flex-wrapwrap
    的几种情况。

    image.png

    子项

    以下这些属性设置在子项上。子项自身的操控有

    • 子项目的排列顺序 —— order
      数值越大,排列越靠后。默认为0
    • 子项目的放大比例 —— flex-grow
      默认为0,即如果主轴上有剩余空间,也不放大子项。
    • 子项目的缩小比例 —— flex-shrink
      默认为1,即如果主轴空间不足,即缩小子项。
    • 设置子项在主轴上的跨度,简单地说就是设置宽高。——flex-basis
    • 同时设定前三者 —— flex
    • 设定单个项目其自身在侧轴的对齐方式 —— align-self

    那么分别来看看每个属性的取值和实现效果
    order利用这个属性可以解决某个区块优先加载但是在页面上的显示较靠后的问题。

    div .item {order:<integer>}
    /*数值越大,排列越靠后。默认为0*/
    
    image.png

    这里我设置了第一个子项的order为1。

    flex-grow如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的空间将比其他项多一倍。

    div .item {flex-grow:<number>}
    

    设置flex-grow前:


    image.png

    设置后:


    image.png

    第二个项目的flex-grow为2,其他为0:
    <注意这个时候就不需要给子项设置宽度了>


    image.png

    flex-shrink如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    div .item {flex-shrink:<number>}
    

    我给每个子项设定了200px的宽度,而flex容器宽度为500px,这时候若不设置flex-shrink,则每个项目都会以相同比例缩小自身大小来适应容器。此时我给第二个项目设置了flex-shrink: 0;
    该项目大小不变。

    image.png

    flex-basis这个属性设置子项在主轴上的跨度,简单地说就是设置宽高。

    div .item {flex-basis:<length> | auto/*auto是默认值,就是项目本身大小*/}
    

    flex这个就是把flex-grow、flew-shrink、flex-basis结合一起的写法啦=。=

    div .item {flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
    

    flex-grow必须。默认为0 1 auto
    align-self这个属性用来单独设定某个子项目在侧轴的对齐方式。

    div .item {align-self:flex-start|flex-end|center|baseline|stretch}
    
    image.png

    有关flex布局的方法就总结和介绍到这里了。有兴趣看可以看一下下面大大们写的相关方面的文章。Flex布局教程——阮一峰 传送门A Complete Guide to Flexbox 传送门2一个完整的Flexbox指南 传送门3

    栗子(利用flex进行上述几种布局实现)

    下边把利用flex布局实现上述几种布局的代码贴出来(可有多种实现方法)。

    T布局

    image.png
    <!--css--><style type="text/css">
        *{margin: 0;padding: 0;}
        header, footer {background: sandybrown;height: 50px;} 
        section {display: flex;align-items: flex-start;height: 500px;} 
        article {order: 1;flex: 3;align-self: stretch;background: wheat;} 
        aside {flex: 1;background: seashell;height: 100px;}
    </style>
    <!--html-->
    <header></header>
    <section> 
        <article></article> 
        <aside></aside>
    </section>
    <footer></footer>
    

    国字型布局

    image.png
    <!--css-->
    <style type="text/css"> 
        *{margin: 0;padding: 0;} 
        header, footer {background: sandybrown;height: 50px;} 
        section {display: flex;align-items: flex-start;height: 500px;} 
        article {order: 1;flex: 3;align-self: stretch;background: wheat;} 
        aside {flex: 1;background: seashell;height: 100px;} 
        section.sidebar {order: 2;flex: 1;height: 100px;background: seashell;}
    </style>
    <!--html-->
    <header></header>
    <section> 
        <article></article> 
        <aside></aside>   
        <section class="sidebar">
    </section></section>
    <footer></footer>
    

    grid布局

    grid布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对grid布局进行一个简单的了解。目前,grid仅仅只有Edge使用前缀能够支持,为了更好地体验,可以使用 Chrome 浏览器,在chrome://flags开启#enable-experimental-web-platform-features`选项。另外,更多的例子可以前往 Grid by examples, 更多的用法可以前往 W3 Specification,也可以前往 A Complete Guide to Grid



    作者:自度君
    链接:https://www.jianshu.com/p/a75238cc7308
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    展开全文
  • css的几种布局方式都在这

    千次阅读 2019-09-04 11:22:49
    说道布局方式,是我们经常遇到的问题,下面我们就来讲解css的常见的一些布局方式。 1.双飞翼布局(两边定宽,中间自适应) 主要是通过浮动与margin实现,代码如下: <!DOCTYPE ...
  • 布局

    2020-09-06 23:57:46
    管理界面状态:分而治之 您可以通过在各种类型的持久性机制之间划分工作,高效地保存和恢复界面状态。在大多数情况下,这些机制中的每一种都应存储 Activity 中使用的不同类型的数据,具体取决于数据复杂度、访问...
  • 常见的几种页面布局方式

    万次阅读 2017-04-26 01:58:48
    1.固定布局(最基本的布局) 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixedlayout{ width:800px ; background:gray; padding:10px; margin:100px auto ; overflow: ...
  • tkinter-pack布局详解

    2020-07-04 08:17:11
    为了搞清楚这个问题,接下来分三篇博文来分别介绍tkinter的三种布局方法。 tkinter中控件的布局可以有三个类来控制,分别是Pack,Place,Grid.本系列文章将这三个类统称为布局类. 布局类与控件类的类间关系如下: 由上...
  • 五种经典网页布局设计

    万次阅读 多人点赞 2018-03-04 16:56:42
    网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:...
  • 常见布局—弹性布局

    千次阅读 2020-08-24 12:04:53
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...
  • Android最佳性能实践(四)——布局优化技巧

    万次阅读 多人点赞 2016-10-14 18:00:53
    然而实际上界面布局也会对应用程序的性能产生比较大的影响,如果布局写得糟糕的话,那么程序加载UI的速度就会非常慢,从而造成不好的用户体验。那么本篇文章我们就来学习一下,如何通过优化布局来提供应用程序的性能...
  • 前文讲解了JFrame、JPanel,其中已经涉及到了空布局的使用。Java虽然可以以像素为单位对组件进行精确的定位,但是其在不同的系统中将会有一定的显示差异,使得显示效果不尽相同,为此java提供了布局管理器,以使编写...
  • vue vue-element-ui组件 layout布局系列学习(一)

    万次阅读 多人点赞 2020-03-23 11:08:12
    本文仅供参考: 首先你要掌握的基础知识: row 行概念 <el-row>...col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="g...
  • AD中PCB布局与布线的一般原则

    万次阅读 多人点赞 2018-06-21 12:30:11
    1 布局原则 1、遵照“先大后小,先难后易”的布置原则,即重要的单元电路、核心元器件应当优先布局。 先大后小,先难后易 上图中1是因为机械结构决定电源与接线柱在这里。 2、布局中应参考原理框图,...
  • 哲♂学三幻神带你学习ConstraintLayout(约束布局)标签(空格分隔): Tutorial-AndroidConstraintLayout 是什么 ConstraintLayout(约束布局) 其实已经不算什么新东西了,很多同学应该知道 或听过这个东西。人嘛,...
  • 网格布局特点: l 使容器中的各组件呈M行×N列的网格状分布。 l 网格每列宽度相同,等于容器的宽度除以网格的列数。 l 网格每行高度相同,等于容器的高度除以网格的行数。 l 各组件的排列方式为:从上到下,...
  • 题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应。 要求:允许增加额外的DOM节点,但不能修改现有节点...
  • 边界布局管理器把容器的的布局分为五个位置:CENTER、EAST、WEST、NORTH、SOUTH。依次对应为:上北(NORTH)、下南(SOUTH)、左西(WEST)、右东(EAST),中(CENTER),如下图所示。 特征: l 可以把组件...
  • 线性布局:线性布局是我们在开发中最常见的布局方式之一,线性布局可以分为水平线性布局和垂直线性布局这两种布局方式 线性布局的属性(决定布局中元素的位置和布局): android:layout_gravity ( 是本元素相对于...
  • Qt 之布局管理器

    万次阅读 多人点赞 2018-05-30 10:25:07
    简述Qt的布局系统提供了一个简单的和强有力的方式,来自动排列窗口子控件布局。所有QWidget子类可以使用布局来管理他们的子控件。QWidget::setLayout()函数可以为一个控件布局。当通过这种方式布局以后,它负责以下...
1 2 3 4 5 ... 20
收藏数 1,084,166
精华内容 433,666
关键字:

布局