精华内容
参与话题
问答
  • 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 布局的基本入门,并不能真正满足一些需求,所以如果想深入了解的话还是需要多看看相关的文章、

    展开全文
  • 布局

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

    布局可定义应用中的界面结构(例如 Activity 的界面结构)。布局中的所有元素均使用 ViewViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而,ViewGroup是不可见容器,用于定义 `View 和其他 ViewGroup 对象的布局结构,如图 1 所示。

    View 对象通常称为“微件”,可以是众多子类之一,例如 ButtonTextViewViewGroup对象通常称为“布局”,可以是提供其他布局结构的众多类型之一,例如 LinearLayoutConstraintLayout

    加载 XML 资源

    当您编译应用时,系统会将每个 XML 布局文件编译成 View资源。您应在 Activity.onCreate() 回调实现内加载应用代码中的布局资源。通过调用 setContentView(),并以 R.layout.*layout_file_name* 形式向应用代码传递布局资源的引用,您即可执行此操作。例如,如果您的 XML 布局保存为 main_layout.xml,则您应通过如下方式为 Activity 加载布局资源:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
    }
    

    启动 Activity 时,Android 框架会调用 Activity 中的 onCreate() 回调方法(请参阅 Activity文档中有关生命周期的阐述)。

    • 属性

    每个 View 对象和 ViewGroup 对象均支持自己的各种 XML 属性。某些属性是 View 对象的特有属性(例如,TextView 支持 textSize 属性),但可扩展此类的任一 View 对象也会继承这些属性。某些属性是所有 View 对象的共有属性,因为它们继承自 View 根类(例如 id 属性)。此外,其他属性被视为“布局参数”,即描述 View 对象特定布局方向的属性,如由该对象的父 ViewGroup 对象定义的属性。

    任何 View 对象均可拥有与之关联的整型 ID,用于在结构树中对 View 对象进行唯一标识。编译应用后,系统会以整型形式引用此 ID,但在布局 XML 文件中,系统通常会以字符串的形式在 id 属性中指定该 ID。这是所有 View 对象共有的 XML 属性(由 View 类定义),并且您会经常使用该属性。XML 标记内部的 ID 语法是:

    android:id="@+id/my_button"
    

    字符串开头处的 @ 符号指示 XML 解析器应解析并展开 ID 字符串的其余部分,并将其标识为 ID 资源。加号 (+) 表示这是一个新的资源名称,必须创建该名称并将其添加到我们的资源(在 R.java 文件中)内。Android 框架还提供许多其他 ID 资源。引用 Android 资源 ID 时,不需要加号,但必须添加 android 软件包命名空间,如下所示:

    android:id="@android:id/empty"
    
    

    添加 android 软件包命名空间后,我们现在将从 android.R 资源类而非本地资源类引用 ID。

    如要创建视图并从应用中引用它们,常见的模式是:

    在布局文件中定义视图/微件,并为其分配唯一 ID:

    <Button android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_button_text"/>
    

    然后创建视图对象的实例,并从布局中捕获它(通常使用 onCreate() 方法):

    Button myButton = (Button) findViewById(R.id.my_button);
    
    

    名为 layout_*something* 的 XML 布局属性可以为视图定义适合其所在 ViewGroup 的布局参数。

    每个 ViewGroup 类都会实现一个扩展 ViewGroup.LayoutParams 的嵌套类。此子类包含的属性类型会根据需要为视图组的每个子视图定义尺寸和位置。如图 2 所示,父视图组会为每个子视图(包括子视图组)定义布局参数。

    每个 ViewGroup 类都会实现一个扩展 ViewGroup.LayoutParams`的嵌套类。此子类包含的属性类型会根据需要为视图组的每个子视图定义尺寸和位置。如图 2 所示,父视图组会为每个子视图(包括子视图组)定义布局参数。

    请注意,每个 LayoutParams 子类都有自己的值设置语法。每个子元素都必须定义适合其父元素的 LayoutParams,但父元素也可为其子元素定义不同的 LayoutParams。

    所有视图组均包含宽度和高度(layout_widthlayout_height),并且每个视图都必须定义它们。许多 LayoutParams 还包括可选的外边距和边框。

    您可以指定具有确切尺寸的宽度和高度,但您多半不想经常这样做。更常见的情况是,您会使用以下某种常量来设置宽度或高度:

    • 指示您的视图将其大小调整为内容所需的尺寸。
    • 指示您的视图尽可能采用其父视图组所允许的最大尺寸。

    一般而言,建议不要使用绝对单位(如像素)来指定布局宽度和高度。更好的方法是使用相对测量单位(如与密度无关的像素单位 dp),因为其有助于确保您的应用在各类尺寸的设备屏幕上正确显示。可用资源文档中定义了可接受的测量单位类型。

    布局位置

    视图的几何形状就是矩形的几何形状。视图拥有一个位置(以一对水平向左垂直向上的坐标表示)和两个尺寸(以宽度和高度表示)。位置和尺寸的单位是像素。

    您可以通过调用 getLeft() 方法和 getTop()方法来检索视图的位置。前者会返回表示视图的矩形的水平向左(或称 X 轴)坐标。后者会返回表示视图的矩形的垂直向上(或称 Y 轴)坐标。这些方法都会返回视图相对于其父项的位置。例如,如果 getLeft() 返回 20,则表示视图位于其直接父项左边缘向右 20 个像素处。

    此外,系统还提供了几种便捷方法来避免不必要的计算,即 getRight()getBottom()。这些方法会返回表示视图的矩形的右边缘和下边缘的坐标。例如,调用 getRight()类似于进行以下计算:getLeft() + getWidth()

    尺寸、内边距和外边距

    视图尺寸通过宽度和高度表示。实际上,视图拥有两对宽度和高度值。

    第一对称为测量宽度测量高度。这些尺寸定义视图希望在其父项内具有的大小。您可通过调用 getMeasuredWidth()getMeasuredHeight() 来获得这些测量尺寸。

    第二对简称为宽度高度,有时称为绘制宽度绘制高度。这些尺寸定义绘制时和布局后,视图在屏幕上的实际尺寸。这些值可以(但不必)与测量宽度和测量高度不同。您可通过调用 getWidth()getHeight() 来获得宽度和高度。

    如要测量尺寸,视图需将其内边距考虑在内。内边距以视图左侧、顶部、右侧和底部各部分的像素数表示。内边距可用于以特定数量的像素弥补视图内容。例如,若左侧内边距为 2,则会将视图内容从左边缘向右推 2 个像素。您可以使用 [setPadding(int, int, int, int)]方法设置内边距,并通过调用 getPaddingLeft()getPaddingTop()getPaddingRight()getPaddingBottom()查询内边距。

    尽管视图可以定义内边距,但其并不提供对外边距的任何支持。不过,视图组可以提供此类支持。如需了解更多信息,请参阅 ViewGroupViewGroup.MarginLayoutParams

    文件位置:
    res/values/filename.xml
    文件名可以任意设置。 元素的 name 将用作资源 ID。
    资源引用:
    在 Java 中:R.bool.bool_name
    在 XML 中:@[package:]bool/bool_name
    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    布尔值:true 或 false。
    属性:

    name
    字符串。Bool 值的名称。该名称将用作资源 ID。
    示例:
    保存在 res/values-small/bools.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <bool name="screen_small">true</bool>
            <bool name="adjust_view_bounds">true</bool>
        </resources>
        
    

    以下应用代码会检索布尔值:

    颜色

    在 XML 中定义的颜色值。颜色使用 RGB 值和 alpha 通道指定。您可以在接受十六进制颜色值的任何地方使用颜色资源。当 XML 中需要可绘制资源时,您也可以使用颜色资源(例如,android:drawable="@color/green")。

    该值始终以井号 (#) 字符开头,后跟以下某种格式的“透明度、红、绿、蓝”(Alpha-Red-Green-Blue) 信息:

    #RGB
    #ARGB
    #RRGGBB
    #AARRGGBB

    文件位置:
    res/values/colors.xml
    该文件名可以任意设置。 元素的 name 将用作资源 ID。
    资源引用:
    在 Java 中:R.color.color_name
    在 XML 中:@[package:]color/color_name
    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    以十六进制表示的颜色,如上所述。
    属性:

    name
    字符串。颜色的名称。该名称将用作资源 ID。
    示例:
    保存在 res/values/colors.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
           <color name="opaque_red">#f00</color>
           <color name="translucent_red">#80ff0000</color>
        </resources>
        
    
    

    尺寸

    在 XML 中定义的尺寸值。尺寸由数字后跟度量单位来指定。例如:10px、2in、5sp。Android 支持以下度量单位:

    dp
    密度无关像素 - 基于屏幕物理密度的抽象单位。这些单位相对于 160 dpi(每英寸点数)屏幕确立,在该屏幕上 1dp 大致等于 1px。在更高密度的屏幕上运行时,用于绘制 1dp 的像素数量会根据屏幕 dpi 按照适当的系数增加。同样,在更低密度的屏幕上,用于绘制 1dp 的像素数量会相应减少。dp 对像素的比率会随着屏幕密度的变化而变化,但不一定成正比。要使布局中的视图尺寸根据不同的屏幕密度正确调整大小,一种简单的解决办法就是使用 dp 单位(而不是 px 单位)。换句话说,它可在不同设备上提供一致的界面元素大小。
    sp
    缩放无关像素 - 这和 dp 单位类似,但它也会根据用户的字体大小偏好设置进行缩放。建议您在指定字体大小时使用此单位,以便字体大小会根据屏幕密度和用户偏好设置进行调整。
    pt
    点 - 1/72 英寸,基于屏幕的物理尺寸,假设屏幕密度为 72dpi。
    px
    像素 - 对应于屏幕上的实际像素数。建议不要使用这种度量单位,因为不同设备的实际呈现效果可能不同;每台设备的每英寸像素数可能不同,屏幕上的总像素数也可能有差异。
    mm
    毫米 - 基于屏幕的物理尺寸。
    in
    英寸 - 基于屏幕的物理尺寸。

    文件位置:
    res/values/filename.xml
    该文件名可以任意设置。 元素的 name 将用作资源 ID。
    资源引用:
    在 Java 中:R.dimen.dimension_name
    在 XML 中:@[package:]dimen/dimension_name
    语法:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <dimen name="textview_height">25dp</dimen>
            <dimen name="textview_width">150dp</dimen>
            <dimen name="ball_radius">30dp</dimen>
            <dimen name="font_size">16sp</dimen>
        </resources>
        
    

    ID

    在 XML 中定义的唯一资源 ID。Android 开发者工具可使用您在 <item> 元素中提供的名称,在您项目的 R.java 类中创建唯一的整数,供您用作应用资源(例如,界面布局中的 View)的标识符,或创建唯一的整数,供您在应用代码中使用(例如,作为对话框的 ID 或结果代码)。

    文件位置:
    res/values/filename.xml
    该文件名可以任意设置。
    资源引用:
    在 Java 中:R.id.name
    在 XML 中:@[package:]id/name
    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    定义唯一 ID。不设置值,只有属性。
    属性:

    type
    必须为“id”。
    name
    字符串。ID 的唯一名称。
    示例:
    保存在 res/values/ids.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <item type="id" name="button_ok" />
            <item type="id" name="dialog_exit" />
        </resources>
        
    

    然后,以下布局代码段会将“button_ok”ID 应用到按钮微件:

        <Button android:id="@id/button_ok"
            style="@style/button_style" />
        
    

    请注意,android:id 值不会在 ID 引用中包含加号,因为此 ID 已存在,如上面的 ids.xml 示例中所定义。(如果使用加号以 android:id="@+id/name" 格式指定 XML 资源的 ID,则表示“name”ID 不存在,应该创建它。)

    再比如,以下代码段使用“dialog_exit”ID 作为对话框的唯一标识符:

    整数

    在 XML 中定义的整数。

    文件位置:
    res/values/filename.xml
    该文件名可以任意设置。 元素的 name 将用作资源 ID。
    资源引用:
    在 Java 中:R.integer.integer_name
    在 XML 中:@[package:]integer/integer_name
    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    一个整数。
    属性:

    name
    字符串。该整数的名称。该名称将用作资源 ID。
    示例:
    保存在 res/values/integers.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <integer name="max_speed">75</integer>
            <integer name="min_speed">5</integer>
        </resources>
    

    以下应用代码会检索整数:

    整数数组

    在 XML 中定义的整数数组。

    文件位置:
    res/values/filename.xml
    该文件名可以任意设置。 元素的 name 将用作资源 ID。
    编译后的资源数据类型:
    指向整数数组的资源指针。
    资源引用:
    在 Java 中:R.array.integer_array_name
    在 XML 中:@[package:]array.integer_array_name
    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    定义一个整数数组。包含一个或多个 子元素。
    属性:

    android:name
    字符串。数组的名称。此名称将用作引用数组的资源 ID。

    一个整数。该值可以是对另一个整数资源的引用。必须是 元素的子元素。
    没有属性。
    示例:
    保存在 res/values/integers.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <integer-array name="bits">
                <item>4</item>
                <item>8</item>
                <item>16</item>
                <item>32</item>
            </integer-array>
        </resources>
    
    

    以下应用代码会检索整数数组:

    类型化数组

    在 XML 中定义的 TypedArray。您可以使用这种资源创建其他资源(例如可绘制对象)的数组。请注意,此类数组不要求所含的资源具有相同的类型,因此您可以创建混合资源类型的数组,但必须知道数组中有哪些数据类型及其位置,以便可以使用 TypedArrayget...() 方法正确获取每一项数据。

    文件位置:元素的name` 将用作资源 ID。

    编译后的资源数据类型:指向 TypedArray 的资源指针。

    资源引用:在 Java 中:R.array.array_name [图片上传中...(Screen Shot 2020-09-04 at 8.44.09 AM.png-c28c98-1599180263117-0)]
    在 XML 中:@[package:]array.array_name

    语法:

    元素:

    必需。该元素必须是根节点。
    没有属性。

    定义一个数组。包含一个或多个 子元素。
    属性:

    android:name
    字符串。数组的名称。此名称将用作引用数组的资源 ID。

    通用资源。该值可以是对资源或简单数据类型的引用。必须是 元素的子元素。
    没有属性。
    示例:
    保存在 res/values/arrays.xml 的 XML 文件:

        <?xml version="1.0" encoding="utf-8"?>
        <resources>
            <array name="icons">
                <item>@drawable/home</item>
                <item>@drawable/settings</item>
                <item>@drawable/logout</item>
            </array>
            <array name="colors">
                <item>#FFFF0000</item>
                <item>#FF00FF00</item>
                <item>#FF0000FF</item>
            </array>
        </resources>
        
    

    以下应用代码会检索每个数组,然后获取每个数组中的第一个条目:

    展开全文
  • 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;...

    已知布局元素的高度,写出三栏布局,要求左栏、右栏宽度各为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>
    

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

    展开全文
  • 常用的页面布局(两栏布局、三栏(圣杯、双飞翼)布局) 1. 两栏布局 左边左浮动 , 右边设置为overflow:hidden 变成BFC清除左侧浮动元素的影响 2.圣杯布局 两侧固定宽度,中间自定义 比如一个大盒子里面嵌套了三个...
  • 五种经典网页布局设计

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

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

    千次阅读 2018-07-05 16:19:44
    前言:在网页中,我们经常运用CSS来进行布局,那么,CSS常用的布局模型有哪些呢?今天,我们就来了解一下吧。在网页中,元素有三种布局模型:①流动模型(Flow)默认的;②浮动模型(Float);③层模型(Layer)。 一...
  • CSS 布局经典问题初步整理

    千次阅读 2017-05-19 00:10:25
    本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
  • 几种常见的 CSS 布局

    万次阅读 2018-11-14 20:30:00
    (给前端大全加星标,提升前端技能)作者:浪里行舟 (本文来自作者投稿,简介见末尾)本文概要本文将介绍如下几种常见的布局:单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布...
  • CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应) 经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题。 下面我们分别来...
  • CSS布局之多列布局

    千次阅读 2018-03-31 01:59:32
    前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架搭建之中,又有居中布局/多列布局/全局布局。本文介绍一下多列布局的一些技巧。多列布局定宽 + 自适应1.使用float + overflow:原理: 通过...
  • 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的布局方式,完全实现内容和样式的分离。 ...
  • CSS 布局 position 详解

    千次阅读 2018-06-01 11:39:23
    CSS 布局 position 详解1.position 之 static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。实例:!DOCTYPE html&gt; &lt;html lang="en"&gt...
  • CSS布局练习

    千次阅读 2018-06-23 16:35:35
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible"...Page Title&
  • Div+CSS布局入门教程(全套)

    千次阅读 2011-08-15 13:47:03
    在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇...下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一
  • CSS布局思路

    2018-04-07 01:48:33
    所谓CSS布局:布局是大前提,html是小前提。 良好的布局思路,决定了代码的优雅。 ①我要用什么布局 ②DOM结构用什么标签 ③结构的主体是什么 看似简单,是逻辑推理中的基础【三点式推理】。 但是一定要想清楚...
  • div+css布局与table布局比较

    千次阅读 2019-05-06 15:04:34
    div+css布局与table布局比较 一、背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本 以及静态图片等组成的,类似于报纸的形式,分区分块显示,table标签的结构表现恰好...
  • DIV+CSS布局基本流程及实例介绍

    千次阅读 2020-02-24 14:51:16
    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了...
  • css布局:table布局、两栏布局、三栏布局
  • 情形1:在固定容器大小内左右布局 在一个1000*500大小的容器内,实现左侧固定宽度,右侧根据剩下空间自适应宽度的布局。 HTML: &lt;div class="wrapper"&gt; &lt;div class="left&...
  • CSS布局:上中下三栏自适应高度CSS布局 *{margin:0;padding:0;} body, html { margin: 0; padding:0 !important; padding:90px 0 32px 0; width:100%; height:100%; overflow:hidden; } .header { ...
  • css布局float浮动布局详解

    千次阅读 2018-10-08 15:52:51
    页面布局时主要采用:浮动(float)和定位(position),还有就是即不浮动也不定位的正常文档流结构三种; float属性常用的语法是:float:left|right|none;任何元素都可以被浮动,无论是块元素div,ol,ul还是行内元素...
  • 史上最全Html和CSS布局技巧

    万次阅读 多人点赞 2018-01-19 22:07:31
    单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是...
  • DIV+CSS布局一一列布局:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;布局&lt;/title&gt; &...
  • 常见 五大CSS 布局方式 总结

    千次阅读 2019-06-24 18:22:33
    常见 五大CSS 布局方式 总结 之所以总结是因为最近也是在看css方面,让我迷惑的是有很多文章 关于布局名词都没有听说过,工作中也很少用。但是我们要与时俱进,叫的多了,它就成为正式名词了。比如 '双飞翼 '圣杯...
  • 使用DIV+CSS布局页面——1

    万次阅读 2018-07-01 23:38:37
    1.什么是div div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器,例如...lt;p&gt;段落的标签。&lt;p&gt;...同样的,div也是一个容器,能够放置内容,例如: &... 在传统的表格样式...
  • CSS布局篇之左右布局

    万次阅读 2018-09-13 17:45:45
    左侧定宽,右侧自适应 float + margin .left { float: left; width: 200px; height: 100%; background-color: red; } .right { margin-left: 200px; background-color: blue;...float + over...
  • CSS布局模型

    千次阅读 2015-10-22 20:42:48
    CSS布局:Flow,Float,Layer(absolute, relative, fixed),堆叠控制
  • 6种方法实现css布局水平居中

    千次阅读 2019-07-02 10:58:05
    说到常见css布局,面试时经常也会考考大家,看对css知识掌握的咋样,对css盒模型理解没,比如会问css布局水平居中的方法或者css布局垂直居中的方法等,今天分享常见css布局水平居中的6种方法。 方法一:margin + ...

空空如也

1 2 3 4 5 ... 20
收藏数 1,158,154
精华内容 463,261
关键字:

布局