布局_布局方法 - 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>
    

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

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

    万次阅读 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: ...

    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种经典的网页布局。在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:...
  • Android——六大基本布局总结

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

    2019-07-24 16:49:31
    布局简介  2.面板(Panel)  3.视图框(Viewbox)  4.滚动视图控件(ScrollViewer)  5.公共布局属性 1.布局简介  应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地...
  • 常见布局—弹性布局

    千次阅读 2020-08-24 12:04:53
    在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。 说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的...
  • 如何让eclipse恢复默认布局

    万次阅读 多人点赞 2014-09-10 10:42:40
    eclipse的布局是可拖动了,有时候不小心拖动了之后,死活弄不回来。好在现在版本的eclipse都提供了一个恢复默认布局的功能: Window->Reset Perspective
  • Qt designer 中的布局与打破布局

    万次阅读 2012-09-04 15:53:08
    如果想让控件能随着窗口的改变而适应窗口,那么你应该使用布局管理器。当使用了窗口管理器后你就不能自定义窗口里面的个别控件了。如果不得不改变控件,那么你就得“打破布局布局管理器中有: 1.水平布局 2....
  • web网页 页面布局的几种方式

    万次阅读 2017-06-16 12:42:46
    网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。换句话说...
  • HTML/CSS实现文字环绕图片布局

    万次阅读 多人点赞 2018-12-24 09:40:19
    在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办法: 1.利用图片属性实现 代码如下:&lt;p style=&quot;width:400px;&quot;&gt; &lt;img src=&quot;...
  • 三栏布局的5种解决方案及优缺点

    万次阅读 多人点赞 2020-04-03 21:47:40
    假设高度已知,请写出三栏布局,左栏、右栏宽度300px,中间宽度自适应。 这道题本身的难度并不大,我们在布局页面的时候,写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题,就没有那么简单了。看似...
  • GridLayout 布局是 Android 4.0 以后引入的新布局,和 TableLayout(表格布局) 有点类似,不过它功能更多,也更加好用 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于...
  • 企业网站首页设计常见的6种布局方式

    万次阅读 多人点赞 2017-11-15 21:21:05
    在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家...
  • DIV+CSS布局和TABLE布局的优缺点讲解

    万次阅读 2015-12-18 14:20:01
    TABLE布局是WEB早期CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种...
  • ArcGIS布局视图(Layout)大小设置

    万次阅读 2019-04-21 13:56:14
    要在文件里面选择页面和打印设置,选择自定义,然后设置宽度和高度
  • Ubuntu修改默认键盘布局的方法

    万次阅读 2016-05-01 00:53:50
    Ubuntu修改默认键盘布局的方法当初安装Ubuntu的时候选了键盘布局为英国的键盘布局(爱尔兰键盘),打代码的时候‘#’打成了一个类似‘£’的符号,‘|’打成了’~’。方法:命令:sudo dpkg-reconfigure keyboard-...
  • 知识点:网页布局的方式 1、网页布局 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的...
  • 静态即传统Web设计,对于PC设置一个布局,在屏幕宽高
1 2 3 4 5 ... 20
收藏数 1,094,234
精华内容 437,693
关键字:

布局