精华内容
参与话题
问答
  • 2019年前端五大布局,你学会了多少?

    万次阅读 多人点赞 2019-01-05 17:57:57
    一、静态布局 静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用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>

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

    展开全文
  • 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 布局的基本入门,并不能真正满足一些需求,所以如果想深入了解的话还是需要多看看相关的文章、

    展开全文
  • 常见的几种页面布局方式

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

    1.固定布局(最基本的布局)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:800px ;
    background:gray;
    padding:10px;
    margin:100px auto ;
                    overflow: hidden; 
    }
    .left{
    width: 380px;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 380px;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }
    
    </style>
    </head>
    
    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是固定布局1
    </div>
    <div class="right">
    我是固定布局2
    </div>
    </div>
    </html>

    2.流式布局(百分比布局)

    流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整,已达到适应当前页面的目的.

    * 百分比是基于元素父级的大小计算得来的;
    * 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
    * 边框不能用百分比设置

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:80%;
    background:gray;
    padding:10px;
    margin:100px auto ;
                    overflow: hidden; 
    }
    .left{
    width:40%;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 40%;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }
    
    </style>
    </head>
    
    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是流式布局1
    </div>
    <div class="right">
    我是流式布局1
    </div>
    </div>
    </html>

    如上述代码:以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多。



    3.弹性布局(伸缩布局)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex

    Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

    Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余空间平均分配多个伸缩项目,当然,如果你的伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。综合而言,Flexbox布局功能主要具有以下几点:

    第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局;

    第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;

    第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;

    第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

    第五,可以控制元素在页面上的布局方向;

    第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

    Flexbox规范版本众多,浏览器对此语法支持度也各有不同,接下来的内容以最新语法版本为例向大家展示:

    1.创建一个flex容器

    任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中,你依然需要添加前缀-webkit,

    .flexcontainer{ display: -webkit-flex; display: flex; }

    2.Flex项目显示

    Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column,其默认值是row。

    3.Flex项目列显示

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

    4.Flex项目移动到顶部

    如何将flex项目移动到顶部,取决于主轴的方向。如果它是垂直的方向通过align-items设置;如果它是水平的方向通过justify-content设置。

    .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

    Flexbox规范版本众多,浏览器对此语法支持度也各有不同,接下来的内容以最新语法版本为例向大家展示:(接上一节)

    5.Flex项目移到左边

    flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row,设置justify-content控制方向;如果设置为column,设置align-items控制方向。

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

    6.Flex项目移动右边

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

    7.水平垂直居中

    在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

    .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

    8.Flex项目实现自动伸缩

    您可以定义一个flex项目,如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

    .bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }



    4.浮动布局

     此布局上述都有演示浮动布局,此处就不做代码演示,浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。

    5.定位布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>定位布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fix{
      width:200px ;
      height: 200px;
      background:yellow ;
      position: fixed;
      left:50% ;
      top:50% ;
      z-index:10 ;
      margin-left:-100px ;
      margin-top:-100px ;
    }
    .location{
    width:960px;
    height: 500px;
    background:gray;
    padding:10px;
    margin:100px auto ;
    position: relative;
                   }
    .div1{
    width: 300px;
    height:300px ;
    background:red ;
    position: absolute;
    left:10%;
    top:20% ;
    text-align: center;
    line-height: 300px;
    }
    .div2{
    
    width: 300px;
    height:300px ;
    background:blue ;
    position: absolute;
    left:50%;
    top:20% ;
    text-align: center;
    line-height: 300px;
    }
    
    </style>
    </head>
    
    <body>
    </body>
    <div class="fix">
    我是固定定位
    </div>
    <div class="location">
    <div class="div1">
    我是绝对定位1
    </div>
    <div class="div2">
    我是绝对定位2
    </div>
    </div>
    
    </html>

    定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。

    6.

    展开全文
  • 五种经典网页布局设计

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

    不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。

    在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,网页布局在很多时候都是相似的,甚至可以说,有些布局模式是长盛不衰的。

    这些布局模式,或者说框架,几乎是“约定俗成”的,它们为用户所熟知,它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章,我们一同来聊聊五种拥有持久生命力的优秀网页布局,也许你的下一个网页设计项目可以直接从这五种布局模式入手,无需过多犹豫和纠结。

    1、顶部大图Banner+简单的栅格

    armando

    无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。

    ·导航栏
    ·顶部大图,图片上叠有文字标题
    ·2~4个分栏,承载不同类别的信息,有的会有图标
    ·主要的内容区域
    ·页脚

    这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

    rodesk

    原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。

    相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。

    2、单页设计,单栏布局

    pop-up

    单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

    ·导航
    ·主要内容区域,文字+图片为主
    ·页脚

    采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

    原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。

    相关趋势:和单页设计结合最紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

    3、自定义栅格

    seb

    那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

    在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

    在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。

    原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。

    相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。

    4、经典的F式布局

    motive

    研究表明,用户在浏览网页的时候,习惯于沿着F式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

    这种F式的阅读模式对应的网页布局就是F式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。

    ·页头和导航
    ·靠左的一栏相对较宽,展示主要的内容
    ·靠右常为侧边栏,展示相关链接等内容
    ·页脚

    原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。

    相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。

    5、极简分层

    berkeley

    极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

    这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。

    apple

    原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。

    相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而Material Design 这样的设计风格就是它们的冲锋号。

    结语

    许多设计手法、设计趋势都常常会被人质疑,但是如果撇开情感因素,从最基本的设计原理上来推导这些趋势的时候,能够从根本上判读这些设计手法是否真的是有价值的。

    今天所谈及的这些布局是经过时间洗炼的经典设计,挑选合适的设计趋势同这些布局结合起来,常常能够带来不错的效果。

    展开全文
  • 常见的几种页面内容布局方式

    万次阅读 多人点赞 2017-07-27 11:45:44
    常见的页面布局,左右自适应布局
  • html基本布局

    万次阅读 2018-11-24 09:15:40
    布局变成横排。都先向左浮动,再根据调整外边距margin-top和margin-left调整位置 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; ...
  • Android——六大基本布局总结

    千次阅读 2019-03-13 09:59:40
    Android六大基本布局分别是: 线性布局LinearLayout 表格布局TableLayout 相对布局RelativeLayout 层布局FrameLayout 绝对布局AbsoluteLayout 网格布局GridLayout。 其中,表格布局是线性布局的子类。网格布局...
  • 六大布局

    2020-07-06 19:16:23
    安卓六大布局 1、线性布局(LinearLayout):按照垂直或者水平方向布局的组件 2、帧布局(FrameLayout):组件从屏幕左上方布局组件 3、表格布局(TableLayout):按照行列方式布局组件 4、绝对布局(AbsoluteLayout...
  • HTML+CSS 五种布局方式

    万次阅读 多人点赞 2018-11-23 09:46:23
    已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为300px,中间自适应。 一、浮动布局 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;...
  • 常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局) 1. 两栏布局 左边左浮动 , 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响 2.圣杯布局 两侧固定宽度,中间自定义 比如一个大盒子里面嵌套了三个...
  • 常见布局—弹性布局

    千次阅读 2019-03-27 09:52:13
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...
  • 布局管理器

    千次阅读 2018-12-01 20:55:04
    绝对布局 绝对布局,顾名思义,就是硬性指定组件在容器中的位置和大小,可以使用绝对坐标的方式来指定组件的位置。...流布局管理器在整个容器中的布局正如其名,像“流”一样从左到右摆放组件,直到占据了这一行...
  • Qt 之布局管理器

    万次阅读 多人点赞 2016-05-27 17:43:45
    所有QWidget子类可以使用布局管理他们的子控件。QWidget::setLayout()函数可以为一个控件布局。当通过这种方式布局以后,它负责以下任务: 布置子控件。 最高层窗口可感知的默认大小。 最高层窗口可感知的最小大小...
  • Java布局管理器

    千次阅读 2018-10-21 02:17:11
    一、布局管理器概念:各组件在容器中的大小以及摆放位置。实现跨平台特性并获得动态布局的效果;Java组件布局由布局管理器对象来管理;布局管理器会确定组件打大小和位置;在容器发生变化是做出动态调整。 二、布局...
  • Java Swing布局管理器

    千次阅读 多人点赞 2019-03-05 01:33:35
    如果不使用布局管理器,则需要先在纸上画好各个组件的位置并计算组件间的距离,再向容器中添加。这样虽然能够灵活控制组件的位置,实现却非常麻烦。 为了加快开发速度,Java 提供了一些布局管理器,它们可以将组件...
  • Python GUI之tkinter布局管理

    万次阅读 多人点赞 2017-01-02 23:08:06
    tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。 pack布局 使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。 from tkinter import *root = Tk()#...
  • Java布局管理器组件

    千次阅读 多人点赞 2016-05-09 19:25:26
    Java布局管理器组件所谓布局管理器,就是为容器内的组件提供若干布局策略,每个容器都拥有某种默认布局管理器,用于负责其内部组件的排列。目前开发中,常用的布局管理器有BorderKayout、FlowLayout、GridLayout、...
  • Qt中的布局管理器

    千次阅读 2017-09-12 20:11:18
    Qt中窗口组件的基类QWidget有两组重载函数用于实现窗口组件的绝对定位://定位窗口的坐标 void move(const QPoint &) void move(int x, int y) //定义窗口占据的大小 void resize(const QSize &) void resize(int w,...
  • Qt之布局管理器使用

    千次阅读 2018-04-13 10:33:10
    如下图:水平布局管理器可以把它所管理的部件以水平的顺序依次排开,例如上图中中间的“Centigrade”和“Fahrenheit”两段文字,就是水平排列的,这个时候就可以用水平布局管理器来实现。垂直管理器类似,它可以把它...
  • Android的6种布局管理器总结

    万次阅读 2015-05-26 17:31:30
    Android中的6大布局管理器:1). LinearLayout 线性布局管理器、2). TableLayout 表格布局管理器、3). RelativeLayout 相对布局管理器、4). FrameLayout 帧布局管理器、5). AbsoulteLayout 绝对布局管理器、 6)...
  • 布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小; 布局管理器之间的继承关系 :  在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相对布局 线性布局...
  • 文章目录android编程 第三讲 Android布局管理器约束布局管理器ConstraintLayout线性布局管理器LinearLayout表格布局管理器TableLayout帧布局管理器FrameLayout相对布局管理器RelativeLayout 约束布局管理器...
  • Java三大常用布局管理器

    万次阅读 2015-08-21 19:33:10
    三大常用布局管理器:BorderLayout,FlowLayout,GridLayout,以及计算器的案例
  • 布局管理器之CardLayout(卡片布局管理器)对于选项卡这个概念大家可能不会陌生,就是在一个窗口中可以切换显示多页不同的内容,但同一时间只能是其中的某一页可见的,这样的一个个的页面就是选项卡。CardLayout就是...
  • java中的swing组件、主要三大布局管理器的应用

    万次阅读 多人点赞 2017-10-22 14:05:44
    2、种类:java共提供了五种布局管理器:流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)、网格布局管理器(GridLayout)、卡片布局管理器(CardLayout)、网格包布局管理器(GridBagLayout)。其中前三种是最...
  • 本文主要讲解Swing程序设计中容器、面板及四大布局管理器的详细使用、包括实例程序讲解、使用注意及使用技巧分享、敬请阅读! 目录 什么是容器? 什么是面板? JPanel面板 JScrollPane面板 什么是布局管理器...
  • JAVA布局管理器

    万次阅读 2009-04-04 22:34:00
    Java 为了实现跨平台的特性并且获得动态的布局效果,Java将容器内的所有组件安排给一个“布局管理器”负责管理,如:排列顺序,组件的大小,位置等,当窗口移动或调整大小后组件如何变化等功能授权给对应的容器布局...
  • Java GUI编程的几种常用布局管理器

    千次阅读 2017-08-24 11:59:48
    Java GUI编程的几种常用布局管理器 本人是一个大二的学生。因为最近有做JavaGUI界面的需求,因此重新开始熟悉JavaGUI的各种控件和布局。然后以次博文为笔记,总结、完善以及发表最近学习的一些技术要点。希望各位...
  • Android-使用线性布局管理器布局

    千次阅读 2016-03-10 22:50:10
    Android中的线性布局管理器用LinearLayout表示,它是将放入其中的组件按照垂直或水平方向来布局,也就是控制放入其中的组件横向排列或纵向排列。在Android中,可以在XML布局文件中定义线性布局管理器,也可以使用...
  • LinearLayout是Android控件中的线性布局控件,它包含的子控件将以横向(HORIZONTAL)或竖向(VERTICAL)的方式排列,按照相对位置来排列所有的子控件及引用的布局容器。超过边界时,某些控件将缺失或消失。因此一个垂直...

空空如也

1 2 3 4 5 ... 20
收藏数 1,157,190
精华内容 462,876
关键字:

布局