精华内容
下载资源
问答
  • 百分比布局
    2022-05-14 20:54:05

    一、移动端特点

    1、不同之处

    PC端:屏幕大,网页固定板心,但是浏览器繁多,更多考虑兼容性问题(布局:浮动+定位+标准流)

    移动端:移动端则进本不需要考虑兼容性问题,放心大胆的试用css新特性,但是手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度

    2、物理分辨率和逻辑分辨率

    ①物理分辨率:硬件所支持的,屏幕出厂就设定无法修改

    ②逻辑分辨率:软件可以达到的,我们开发中写的是逻辑分辨率

    3、 视口:视口就是浏览器显示页面内容的屏幕区域

    ①布局视口:iOS, Android基本都将这个视口分辨率设置为980p

    ②视觉视口:用户正在看到的网站的区域

    ③理想视口:设备有多宽,我们网页就显示有多宽

    4、视口标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    一般我们的编程软件在快捷生成骨架时,都可以自动生成,所以这个了解即可

    width=device-width:视口宽度=设备宽度

    initial-scale=1.0:初始页面缩放倍数

    maximum-scale=1.0 最大缩放倍数

    user-scalable=0 不允许用户缩放页面(移动端) 或者为 no 如果为 yes 则允许用户缩放

    5、二倍图

    二倍图的存在就是为了让页面中的图片更加清晰

    其实实际开发中还有三倍图甚至四倍图等,多倍图,但是现在市场还是二倍图偏多

    网页美工的设计稿基本是 750px

    我们前端工程师拿到设计稿利用像素大厨选择 2X, 进行缩小一半,按照提示的单位开发即可

     二、百分比布局

    目标: 能够使用百分比布局开发网

    百分比布局, 也叫流式布局

    效果: 宽度自适应,高度固定

    写法:width:100%  宽度显示父盒子宽度的100%

    三、flex布局

    flex布局极大的提高了我们布局的效率,更简单、灵活

    display:flex 将父元素变成弹性容器,只能加在父元素上

    1、主轴对齐方式(主轴默认是x轴)

    flex-start      默认值,从起点开始排列

    flex-end        从终点开始排列

    center          沿主轴居中开始排列

    space-around    弹性盒子沿主轴均匀排列,空白间距平均分布在每一个弹性盒子的  左右两侧

    space-between   弹性盒子沿主轴均匀排列,空白间距平均分布在相邻盒  子之间(可以让元素水平居中)<使用次数较多>

    space-evenly    弹性盒子沿主轴均匀排列,弹性盒子于弹性容器之间的间距相等

    2、侧轴对齐方式(侧轴默认是y轴)

    flex-start      起点开始依次排列

    flex-end        终点开始依次排列

    center          沿侧轴居中排列(可以让元素垂直居中)<使用次数较多>

    strech          默认效果,弹性盒子沿着侧轴被拉伸至铺满容器 

     3、伸缩比

     把父盒子分为若干等分,每个盒子各站几份

     flex:数字; 一定要给给子元素加

    比如有一个父盒子里面有三个子盒子,每个子盒子写 flex:1;  此时每个子盒子各占三分之一

    4、圣杯布局

    左右两边大小固定不变,中间宽度自适应

    一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索

     核心思路:

                    两侧盒子写固定大小

                    中间盒子 flex: 1;  占满剩余空间

    小结:在flex眼中,标签不再分类

    1、简单来说就是没有块级元素、行内元素、行内块元素,任何元素都可以直接设置宽高,一行显示

    2、flex不存在脱标的情况,也就是说基本淘汰了浮动,更不用清除浮动

    3、当前也存在着兼容性的问题,如果不考虑兼容性,则可以大量使用,如果是移动端  则可以不用考虑直接flex

    4、用flex布局设置水平垂直居中更加方便快捷

                 display: flex;

                justify-content: center;

                align-items: center;

    添加到父元素上即可

    更多相关内容
  • 百分比布局

    2016-05-26 22:38:02
    percentLayout 百分比布局
  • 百分比布局适配

    2021-01-03 20:11:16
    文章目录一、简述二、google推荐的百分比布局的使用方式三、实现3.1 创建属性文件3.2 解析3.3 计算并设置百分比布局四、使用五、完整代码六、注意 一、简述 百分比布局适配,就是以父容器的尺寸作为基准,在view的...
  • Android 百分比布局

    2018-10-08 13:15:17
    百分比布局 android:id="@+id/tv_solid_number_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24px" android:layout_weight="1" android:...
  • 主要介绍了Android 百分比布局详解及实例代码的相关资料,这里附有代码实例帮助大家学习参考,如何实现百分比布局,需要的朋友可以参考下
  • Android百分比布局.rar

    2019-07-30 11:44:34
    Android百分比布局.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • Android百分比布局

    2016-09-27 13:14:46
    继承自Relative的自定义布局,实现了按照百分比布局控件,控件的比例可以按照自己指定的布局,不会因为手机尺寸的原因造成空间比例失调,控件的长宽比例由自己指定,参数值只需要设置一个(手机屏幕的高度或者宽度值...
  • 它将很快在android dev网站上进行记录,因此这只是概念的证明:) 您可以查看官方文档参考该库同时提供基于百分比布局,水平和垂直。简单的结果复杂的结果 来自 ###支持的布局: #### PercentRelativeLayout < ...
  • Google百分比布局demo

    2017-05-17 14:46:31
    google百分比布局demo,里面有percentFrameLayout, percentLinearLayout, percentRelativityLayout,完美的屏幕适配方案,有需要的可以下载使用
  • android百分比布局

    2016-10-10 15:30:15
    android百分比布局
  • ScrollViewAutolayout布局 百分比布局 解释地址:项目详情
  • Android 百分比布局库jar 为了适配而扩展
  • 一、流式布局(百分比布局) 概念:流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,所以也称百分比自适应布局。流式布局实现方法是,将CSS固定像素宽度换算为百分比宽度。 换算格式:目标...

    移动端页面布局

    一、流式布局(百分比布局)

    概念:流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,所以也称百分比自适应布局。流式布局实现方法是,将CSS固定像素宽度换算为百分比宽度。

    换算格式:目标元素宽度 / 父盒子宽度 = 百分数宽度

    没有流式布局

    <html lang="en">
    <head>
        <style>
            body > * {
              width: 980px;height: auto;margin: 0 auto;margin-top: 10px;
              border: 1px solid #000;padding: 5px;
            }
            header {height: 50px;}
            section {height: 300px;}
            footer {height: 30px;}
            section > * {height: 100%;border: 1px solid #000;float: left;}
            aside {width: 250px;}
            article {width: 700px;margin-left: 10px;}
          </style>  
    </head>
    <body>
        <header>header</header>
        <nav>nav</nav>
        <section>
          <aside>aside</aside>
          <article>article</article>
        </section>
        <footer>footer</footer>
      </body>
    </html>

    流式布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            body > * {
                
              /*   自由设置 ,最先是980px*/
              width: 95%; height: auto; margin: 0 auto; margin-top: 10px;
              border: 1px solid #000; padding: 5px;
            }
            header { height: 50px; }
            section { height: 300px; }
            footer { height: 30px; }
            section > * { height: 100%; border: 1px solid #000; float: left; }
               /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/
              /*   250/980=25%  */
            aside { width: 25%; }
              /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/
              /*   700/980=70%  */
            article { width: 70%; margin-left: 1%; }
          </style>   
    </head>
    <body>
        <header>header</header>
        <nav>nav</nav>
        <section>
          <aside>aside</aside>
          <article>article</article>
        </section>
        <footer>footer</footer>
      </body>
    </html>

    二、弹性盒布局

    使用弹性盒布局(Flexible Box)可以轻松地创建响应式网页布局,为盒状(块)模型增加了灵活性。弹性盒改进了块模型,既不使用浮动,也不会合并弹性盒容器与其内容之间的外边距。它是一种非常灵活的布局方法,就像几个小盒子放在一个大盒子里一样,相对独立,容易设置。

    1.弹性盒布局常用属性(display) 属性

    • 默认值为inline,这意味着此元素会被显示为一个内联元素,在元素前后没有换行符;
    • 如果设置display的值为flex,则表示用于指定弹性盒的容器;
    • 如果设置display的值为none,则表示此元素不会被显示。

    例如

    <html lang="en">
    <head>
        <style>
            .box {
                display: flex;
                border: 1px solid #999;
                height: 60px;
                padding: 4px;
                background: #ddd;
            }
            .box>div {
                margin: 2px;
                padding: 2px;
                border: 1px solid #999;
                background: #fff;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="a">A</div>
            <div class="b">B</div>
            <div class="c">C</div>
        </div>
    </body>
    </html>

    2.弹性盒布局常用属性(flex-flow)

    当使用flex-flow时,其值是flex-direction的值和flex-wrap的值的组合。例如,将flex-direction设为row,将flex-wrap设为nowrap等价于flex-flow:row nowrap

    3.弹性盒布局常用属性(flex-direction)

    flex-direction用于调整主轴的方向,可以调整为横向或者纵向。默认情况下是横向,此时横轴为主轴,纵轴为侧轴;如果改为纵向,则纵轴为主轴,横轴为侧轴,取值如表所示。

    取值描述
    row弹性盒子元素按横轴方向顺序排列(默认值)
    row-reverse弹性盒子元素按横轴方向逆序排列
    column弹性盒子元素按纵轴方向顺序排列
    column-reverse弹性盒子元素按纵轴方向逆序排列

    4.弹性盒布局常用属性(flex-wrap)

    flex-wrap用于让弹性盒元素在必要的时候拆行(超出的自动换行)

    取值描述
    nowrap容器为单行,该情况下flex子项可能会溢出容器。该值是默认属性值,不换行
    wrap容器为多行,flex子项溢出的部分会被放置到新行(换行),第一行显示在上方
    wrap-reverse反转wrap排列(换行),第一行显示在下方

    5.弹性盒布局常用属性(justify-content)

    justify-content属性能够设置子元素在主轴方向的排列方式

    取值描述
    flex-start弹性盒子元素将向行起始位置对齐(默认值)
    flex-end弹性盒子元素将向行结束位置对齐
    center弹性盒子元素将向行中间位置对齐
    space-between弹性盒子元素会平均分布在行里,第一个元素的边界与行的起始位置边界对齐,最后一个元素的边界与行结束位置的边界对齐
    space-around弹性盒子元素会平均分布在行里,两端保留子元素与子元素之间间距大小的一半

    6.弹性盒布局常用属性(align-items)

    align-items属性用于定义子元素在侧轴上的对齐方式,其取值如表所示。

    取值描述
    flex-start弹性盒子元素向垂直于轴的方向上的起始位置对齐
    flex-end弹性盒子元素向垂直于轴的方向上的结束位置对齐
    center弹性盒子元素向垂直于轴的方向上的中间位置对齐
    baseline如果弹性盒子元素的行内轴(页面中文字的排列方向)与侧轴方向一致,则该值与flex-start等效。其他情况下,该值将与基线对齐
    stretch默认值。如果指定侧轴大小的属性值为auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照min/max-width/height属性的限制

    7.弹性盒布局常用属性(order)

    order属性用于设置子元素出现的排列顺序。数值越小,排列将会越靠前,默认为0。

    .a { order: 2; }
    .b { order: 3; }
    .c { order: 1; }

    8.弹性盒布局常用属性(flex)

    flex属性是flex-grow(扩展比率)、flex-shrink(收缩比率)和flex-basis(宽度,像素值)的简写形式,能够设置子元素的伸缩性。

    .a { 
      flex-grow: 1;  /* 也可以写成 flex: 1; */
    }

    9.弹性盒布局常用属性(align-self)

    align-self属性取值有auto、flex-start、flex-end、center、baseline、stretch,每个值的意义与align-items属性的取值类似。需要注意的是,在使用弹性盒布局时,以下属性不起作用。

    1. 多列布局中的column-*属性对弹性子元素无效。
    2. float和clear对弹性子元素无效。使用float会导致display属性计算为block。
    3. vertical-align属性对弹性子元素的对齐无效。
    展开全文
  • android 百分比布局 Eclipse项目 简单的使用和源代码还有需要的styleable 包含PercentFrameLayout,PercentLinearLayout,PercentRelativeLayout 一看就会用
  • 页面的百分比布局

    千次阅读 2020-08-15 14:39:31
    所以特定总结一个百分比的页面布局。 知识点: 基本的Html页面构成: //<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html>...

    写一个产业图谱的页面已经很久,却从没有进行复盘过。自己细细一想,自己写的页面,对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。
    知识点:
    基本的Html页面构成:

    //<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        //sttyle中填写相应的样式
         <style>
        </style>
    </head>
    //body 元素定义文档的主体
      <body>
    	   <div>
    	   </div>
      </body>
    </html>
    
    

    以上的<html>,<body>,<div>科技将其理解为三层递进关系,祖——父——子。

    那么我们进行页面的百分比设计时。有两个基本的知识要记住:
    1、div默认没有height,width为100%,单独成一行
    2、div的width设置的百分比只是相对于父级元素,可以理解为body的父级是html,div的父级是body.那么html的父级我们可以理解为window窗口。

    那么页面布局我们最开始会常遇到的问题是什么?

    1、如何让两个div横向并排显示:float:left,right,display:inline,inline-block

    2、如何让两个div垂直并排:div默认width100%,无height

    3、如何让div内部元素垂直居中:ine-height=height,或
    display:table-cell;vertical-align:middle;text-align:center

    4、如何去除横纵向滚动条:overflow:hidden

    5、如何让div水平居中:margin:0 auto;

    6、如何控制元素间的间距:margin与padding

    布局?我理解为将元素摆在应该的位置。
    以上的6个问题的解决方案,能基本解决百分比布局中存在 问题。
    下面举一个列子:
    在这里插入图片描述如果我们要完成以上的页面布局,分析:
    1、html占屏幕height与width都是100%;

    2、body占html的height与width也是100%;

    3、body中的结构应是倒E字型的机构,顶部一个div,width占100%,高度为其自己的”背景图片的高度;中间为三个div并排显示。宽度分布为30%,40%,30%,高度为90%。

    4,、左边div中上中下3个div,中间分为上下两个div,右边也为上中下三个div

    分析了大体布局,那么可以着手写代码了。html代码可以分为总——分(总——分()),这样 模式,从整体——局部(局部整体——局部)
    下面是代码:

    <!doctype html>
    <html  style="height:100%;width:100%;">
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            /* 图片背景*/
            body {
                background: url(/img/bg2.jpg) no-repeat;
                background-size: 100% 100%;
                height:100%;
                width:100%;
                overflow:hidden
                /*margin-top: 1%;*/
            }
            /*   头部图片样式*/
            .top-banner img {
                width: 50%;
                height: auto;
            }
    
            .top-banner {
                text-align: center
            }
    
            /* 设置左中右div距顶部的高度百分比*/
            .pull-left {
                margin-top: 3%;
                float: left;
                border: red solid 1px;
            }
    
            .zscqStyle {
                color: #acd3fc;
                font-size: 13px;
                cursor: pointer;
                /* border:deepskyblue solid;
                 border-width:thin;*/
            }
    
            .zscqStyle2 {
                color: #f8b52d;
                font-size: 19px;
                /*border:deepskyblue solid;
                border-width:thin;*/
            }
        </style>
    </head>
    <body>
    <div class="row">
        <div class="col-xs-12">
            <!--页面上方显示的字“....咨询平台”-->
            <div class="top-banner">
                <img th:src="@{/img/争先进位科创服务平台.png}" alt="火炬" href="/index" onClick="javascript :history.back(-1);">
                <!--                <a style="background:url(/img/回到首页_03.png);background-size:100% 100%;float: right;color:#f9de49;font-size: 0.16rem;text-decoration :none;padding: 0.16rem;padding-top:0.08rem;"-->
                <!--                   href="/index" onClick="javascript :history.back(-1);">回到首页</a>-->
            </div>
            <!--  <a style="text-decoration:none;float: right;color: white;font-size: 16px" href="/index" onClick="javascript :history.back(-1);">返回上一页</a>-->
        </div>
    </div>
    
    <!--左边部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
    <!-- 左边三部分-->
        <div  style=" background:#000;background:url(/img/text-box_03.png) no-repeat;background-size: 100% 100%;height: 36%;" ></div>
        <div  style=" position: relative;top:10px;background:url(/img/text-box_08.png) no-repeat;background-size: 100% 100%;height: 18.5%;" >
            <div style="height: 100%;">
                <div style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
                    <div style=" float:left; width:30%;height:100%;margin-top: 54%;margin-left: 10%">
                        <img src="/img/知识产权_10.png" style="height:32px;width:32px;" alt="知识产权">
                    </div>
                    <div style="float:left; width:52%;height:100%;margin-top: 50%;margin-left: 6%">
                        <span id="lwsSpan" class="zscqStyle">论文数</span><br/>
                        <span id="lwsSpan2" class="zscqStyle2">4</span>
                        <span id="lwsSpan3" class="zscqStyle"></span>
                    </div>
                </div>
                <div  style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:100% 60%;">
                </div>
                <div  style="float: left;width:40%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
                </div>
            </div>
        </div>
        <div  style=" position: relative;top:20px;background:url(/img/人才情况.png) no-repeat;background-size: 100% 100%;height: 38%;cursor:pointer" ></div>
    </div>
    
    <!--中间部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
        <div style="height: 15%;display:-webkit-flex;display: flex;justify-content: space-around;cursor:pointer">
            <!--企业数-->
            <div id="qys" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--工业总产值-->
            <div id="gyzcz" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--从业人数-->
            <div id="cyrs" style="display: inline-block;height:100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--载体数量-->
            <div id="kjxm1" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
        </div>
    
        <div style="position:relative;top:14px;width:100%;height:90%;background:url(/img/地图边框.png) no-repeat;background-size: 100% 84%;display: block;"></div>
    </div>
    
    <!--右边部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
        <div style="background:url(/img/text-box_05.png) no-repeat;background-size: 100% 100%;height: 41%;"></div>
        <div style="position:relative;top:10px;background:url(/img/text-box_10.png) no-repeat;background-size: 100% 100%;height: 30%;"></div>
        <div style="position:relative;top:20px;background:url(/img/科研机构.png) no-repeat;background-size: 100% 100%;height: 20%;"></div>
    </div>
    
    <!--下边部分-->
    <div>
    </div>
    </body>
    </html>
    

    真个页面布局用了:
    元素标签:div,backgound',span,img
    css属性:float:left;margin-top,display: inline-block, position: relative;top:10px,height,width,border

    结合以上,代码你可以初步认识页面的百分比布局

    展开全文
  • 二、百分比布局 三、FLex布局 1.主轴对齐方式 - justify-content 2.侧轴对齐方式 -align-items 3.弹性伸缩比 一、视口 使用meta标签设置视口宽度,制作适配不同设备宽度的网页 。 viewport:视口 ...

    通过此篇了解移动端与PC端屏幕和网页布局的差异,能够使用Flex布局模型布局移动端网页


    目录

    一、视口

    二、百分比布局

    三、FLex布局

    1.主轴对齐方式 - justify-content

    2.侧轴对齐方式 - align-items

    3.弹性伸缩比


    一、视口

    使用meta标签设置视口宽度,制作适配不同设备宽度的网页 。

    • viewport:视口

    • width=device-width:视口宽度 = 设备宽度

    • initial-scale=1.0:缩放1倍(不缩放)

    二、百分比布局

    特点:

    • 流动式布局
    • 宽度自适应,高度固定
    • 宽度为百分比写法,高度固定px单位

    效果图展示:

    代码如下:

     <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>京东</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            .toolbar {
                width: 100%;
                height: 50px;
                background-color: pink;
                border-top: 1px solid #ccc;
            }
            .toolbar li img {
                height: 100%;
            }
            .toolbar li  img {
                float: left;
                /* 百分比布局:宽度写百分数自适应,高度固定 */
                width: 20%;
                height: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="toolbar">
            <ul>
                <li>
                    <a href="#"><img src="./images/index.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/classify.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/jd.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/car.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/login.png" alt=""></a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

    三、FLex布局

    特点:

    浏览器提倡的布局模型,页面渲染性能高

    布局简单、方便

    避免浮动脱标的问题

    兼容性较高(不兼容低版本浏览器

    Flex 组成:

    弹性容器(父级, 添加display:flex的盒子)

    弹性盒子(子级)

    主轴(默认水平)

    侧轴(默认垂直)

    效果图展示: 

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>体验flex布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                /* 默认主轴在水平方向,子级(弹性盒子)按主轴方向排列 */
                display: flex;
                height: 200px;
                border: 1px solid #000;
            }
    
            .box div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    </html>

    1.主轴对齐方式 - justify-content

    主轴对齐属性:

    主轴对齐属性作用
    center居中
    space-between间距出现在弹性盒子之间
    space-evenly父子级间距都相同
    space-around间距出现在弹性盒子两侧. 视觉效果: 子级之间的间距是父级左右两侧间距的2倍
    flex-start默认值, 起点开始依次排列
    flex-end终点开始依次排列

    效果图展示: 

     代码如下:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>主轴对齐方式</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                display: flex;
                /* 默认 */
                justify-content: flex-start;
                /* 左侧 */
                justify-content: flex-end;
    
                /* 居中 */
                justify-content: center;
    
                /* 空白间距=父级的宽度-所有子级的宽度 */
                /* 空白间距出现在弹性盒子之间 */
                justify-content: space-between;
    
                /* 空白间距出现弹性盒子的两侧 */
                /* 视觉效果:子级之间的间距是父级最左最右间距的2倍 */
                justify-content: space-around;
    
                /* 各个位置的间距是相等的 */
                justify-content: space-evenly;
                
                height: 200px;
                margin: auto;
                border: 1px solid #000;
            }   
            .box div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>

    2.侧轴对齐方式 - align-items

    使用align-items调节元素在侧轴的对齐方式

    修改侧轴对齐方式属性:

    1. align-items(添加到弹性容器)

    2. align-self: 控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)

    属性值作用
    center居中
    stretch默认值, 拉伸
    flex-start默认值, 起点开始依次排列
    flex-end终点开始依次排列

    效果图展示:  

     代码如下:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>侧轴对齐方式</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                display: flex;
                height: 300px;
                margin: auto;
                border: 1px solid #000;
            }
            .box div {
                width: 100px;
                background-color: pink;
            }
    
            /* 单独设置某个弹性盒子的侧轴对齐方式 */
            /* 第二个子级 侧轴距中 */
            .box div:nth-child(2) {
                align-self: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>

    3.弹性伸缩比

    • flex: 整数数字;
    • 占用父级剩余尺寸的份数

    注意 : 只占用父盒子剩余尺寸

    效果图展示:  

     代码如下:

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                display: flex;
                height: 300px;
                border: 1px solid #000;
            }
            .box div {
                height: 200px;
                margin: 0 20px;
                background-color: pink;
            }
            .box div:nth-child(1) {
                width: 50px;
            }
    
            /* 占用父级剩余尺寸的份数 */
            .box div:nth-child(2) {
                flex: 1;
            }
    
            .box div:nth-child(3) {
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    展开全文
  • 一、百分比布局 1.1 视口 1.1.1 ideal viewport 理想视口 1.2 background-size 二、移动端开发 2.1 移动端开发的几种解决方案: 2.1.1 单独制作移动端页面 2.1.2 响应式页面 2.2 百分比布局 三、伸缩布局 ...
  • 前端学习笔记之流式布局(百分比布局
  • 在开发中,组件布局是大家每日开发必须要面对的工作,对于Android来说提供五种常用布局,分别是:LinearLayout(线性布局)TableLayout(表格布局)RelativeLayout(相对布局)...前段时间,谷歌正式提供百分比布局支...
  • #博学谷IT学习技术支持#一、百分比布局:能够使用百分比布局开发网页。百分比布局, 也叫流式布局 。效果: 宽度自适应,高度固定。二、Flex布局:能够使用Flex布局模型灵活、快速的开发网页Flex布局/弹性布局: 是...
  • 百分比布局引起的布局混乱问题
  • Android 中百分比布局

    2021-06-10 13:21:12
    为什么使用百分比布局由于Android系统的碎片化发展导致了市面上多种分辨率、多种屏幕密度共存,这对我们的屏幕适配增加了不少的难度,在布局方面我们都知道可以通过LinearLayout的layout_weight属性来进行适配,但是...
  • Android 百分比布局(支持AndroidX)

    千次阅读 2021-01-21 15:29:16
    Android 百分比布局添加依赖代码使用 添加依赖 implementation ‘com.android.support:percent:25.2.0’ 我的项目是AndroidX的,依然用这个依赖哦~ 代码使用 <androidx.percentlayout.widget.PercentFrameLayout...
  • 流式布局(百分比布局)

    千次阅读 2021-01-18 21:28:19
    各位学习前端的小伙伴,相信大家在写前端页面的时候大家都用过百分比布局也就是我们今天所说的流式布局.那么接下来给大家总结一下流式布局的使用. 一:什么是流式布局? 网页布局中包括: 静态布局 流式布局 响应式布局...
  • 百分比布局项目

    2021-04-04 18:36:34
    这就是一个百分比布局项目,源码android-percent-support-lib-sample,谷歌最新的百分比布局库的示例项目。其实LinearLayout的layout_weight也能实现百分比效果,不过这个更直接。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,367
精华内容 24,146
关键字:

百分比布局

友情链接: cube.rar