精华内容
下载资源
问答
  • 下面我们来看一下几种常用的css布局方式。我们从css发展到现在大类可以归纳为以下几种,你了解的实现方法可能就是以下方式中的具体实现:静态布局自适应布局流式布局(又别名 百分比布局 %)响应式布局:媒体查询弹性...

    或许对于你来说,喜欢js的背后,是看不懂css的深层。入门级的css非常简单,但是,精通它却没有想象的容易。我们本篇聊的是布局。下面我们来看一下几种常用的css布局方式。

    5dc38c72f37c9750.jpg

    我们从css发展到现在大类可以归纳为以下几种,你了解的实现方法可能就是以下方式中的具体实现:静态布局

    自适应布局

    流式布局(又别名 百分比布局 %)

    响应式布局:媒体查询

    弹性布局 (rem/em flex布局)

    1. 静态布局

    最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景。

    实现方法:

    PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;

    移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。

    优点:采用之前的css2的布局·方式,布局简单,没有兼容性问题。

    缺点: 在手机端不能合理的显示,移动端不能使用pc端页面,需要再写一个布局来呈现。

    2. 自适应布局

    可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。

    自适应布局页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

    3. 流式布局

    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局。

    意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。

    而流式布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。

    往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式。

    4. 响应式布局

    通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。主要依靠是css的媒体查询。

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

    5. 弹性布局rem/em

    flex布局

    展开全文
  • [css] css常用布局方式有哪些

    多人点赞 2021-02-15 10:30:49
    [css] css常用布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...

    [css] css常用的布局方式有哪些?

    1:圣杯布局
    2:双飞翼
    3:flex
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • android 常用布局有哪些

    千次阅读 2012-04-28 16:05:49
     在 android 中我们常用布局方式有这么几种: 1.LinearLayout ( 线性布局 ) :(里面只可以一个控件,并且不能设计这个控件的位置,控件会放到左上角)  线性布局分为水平线性和垂直线性二者的属性分别为: ...

    布局:  

      在 android 中我们常用的布局方式有这么几种:

    1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角)

                                               线性布局分为水平线性和垂直线性二者的属性分别为: android:orientation=" horizontal "   android:orientation= "vertical" 。

     2.RelativeLayout ( 相对布局 ) :(里面可以放多个控件,但是一行只能放一个控件) 

    附加几类 RelativeLayout 的属性供大家参考:

    第一类 : 属性值为 true 或 false

    android:layout_centerHrizontal                   水平居中

    android:layout_centerVertical                     垂直居中

    android:layout_centerInparent                    相对于父元素完全居中

    android:layout_alignParentBottom              贴紧父元素的下边缘

    android:layout_alignParentLeft                    贴紧父元素的左边缘

    android:layout_alignParentRight                  贴紧父元素的右边缘

    android:layout_alignParentTop                    贴紧父元素的上边缘

    android:layout_alignWithParentIfMissing   若找不到兄弟元素以父元素做参照物

     

    第二类:属性值必须为 id 的引用名“ @id/id-name ”

    android:layout_below                          在某元素的下方

    android:layout_above                          在某元素的上方

    android:layout_toLeftOf                       在某元素的左边

    android:layout_toRightOf                     在某元素的右边

    android:layout_alignTop              本元素的上边缘和某元素的的上边缘对齐

    android:layout_alignLeft             本元素的左边缘和某元素的的左边缘对齐

    android:layout_alignBottom       本元素的下边缘和某元素的的下边缘对齐

    android:layout_alignRight           本元素的右边缘和某元素的的右边缘对齐

     

    第三类:属性值为具体的像素值,如 30dip , 40px

    android:layout_marginBottom              离某元素底边缘的距离

    android:layout_marginLeft                    离某元素左边缘的距离

    android:layout_marginRight                  离某元素右边缘的距离

    android:layout_marginTop                     离某元素上边缘的距离

     

     

     

              3.TableLayout ( 表格布局 ) :(这个要和TableRow配合使用,很像html里面的table)

     

    这个表格布局不像HTML中的表格那样灵活,只能通过 TableRow 属性来控制它的行而列的话里面有几个控件就是几列(一般情况)。如:

                                                        <TableLayout>

    <TableRow>

                                                                  <EditText></EditText>

                                                                  <EditText></EditText>

    </TableRow>

    <TableRow>

                                                                   <EditText></EditText>

                                                                   <EditText></EditText>

    </TableRow>

    </TableLayout>

    表示两行两列的一个表格。

     

     

    android:gravity="center" 书面解释是权重比。其时就是让它居中显示。它还可以动态添加里面的每行每列。如下代码所示:

    /*根据id查找表格对象*/

    TableLayout tableLayout = (TableLayout) findViewById(R.id.table01);

    /*创建列对象*/

    TableRow tableRow = new TableRow(this);

    /*文本框对象*/

    TextView temp = new TextView(this);

    temp.setText("text的值");

    /*将此文本添加到列中*/

    tableRow.addView(temp);

    android:stretchColumns="1,2,3,4" 它的意思就是自动拉伸1,2,3,4列。

                                                       

    4.AbsoluteLayout ( 绝对布局 ) :(里面可以放多个控件,并且可以自己定义控件的x,y的位置)

    5.FrameLayout ( 帧布局 ) :(里面可以放多个控件,不过控件的位置都是相对位置)

                                   在它里面的控件都是按后面的一个控件叠加在前一个控件上来显示的,所有元素都被放置在最左上角。如:

                                         <FrameLayout android:layout_width="wrap_content"

                                                            android:layout_height="wrap_content" android:layout_weight="1">

                                                  <ImageView android:id="@+id/iv1" android:layout_width="wrap_content"

                                                                android:layout_height="wrap_content" android:visibility="invisible"

                                                                android:src="@drawable/lotusleaf"></ImageView>

                                                 <ImageView android:id="@+id/f1" android:layout_width="wrap_content"

                                                                android:layout_height="wrap_content" android:src="@drawable/frog_right"

                                                                android:visibility="invisible"></ImageView>

                                             </FrameLayout> 

    表示的是id为f1的控件叠加在id为iv1的控件上面显示

     

              (LinearLayout 和 RelativeLayout 应该又是其中用的较多的两种。AbsoluteLayout 比较少用,因为它是按屏幕的绝对位置来布局的如果屏幕大小发生改变的话控件的位置也发生了改变。这个就相当于HTML中的绝对布局一样,一般不推荐使用 )  

     

     

     注意事项:

    1 、各布局不要乱用各自的属性。比如把属于 AbsoluteLayout 布局的android:layout_xandroid:layout_y用到 LinearLayout 布局或 RelativeLayout 布局,或者把 RelativeLayout 布局的 below , rightof 等属性应用到其他布局中。这样做虽然不会报错,但这是白浪费感情的工作,根本达不到我们需要的效果。

    2 、关于android:layout_width="fill_parent"  android:layout_height="wrap_content" ,这是对每个布局宽和高的设置。 wrap_content可表示随着其中控件的不同而改变这个布局的宽度或高度,类似于自动设置宽和高, fill_parent 使布局填充整个屏幕,另外还有一种 match_parent,它本质上和 fill_parent 一样,并从 API  Level8 开始替代fill_parent

     

    TextView 的属性 :

    android:autoLink              //设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值(none/web /email/phone/map/all)

    android:autoText                   //如果设置,将自动执行输入值的拼写纠正。此处无效果,在显示输入法并输入的时候起作用

    android:bufferType               //指定getText()方式取得的文本类别。选项editable 类似于StringBuilder可追加字符,也就是说getText后可调用append方法设置文本内容。spannable 则可在给定的字符区域使用样式

    android:capitalize                  //设置英文字母大写类型。此处无效果,需要弹出输入法才能看得到,参见EditView此属性说明

    android:cursorVisible              //设定光标为显示/隐藏,默认显示

    android:digits                     //设置允许输入哪些字符。如“1234567890.+-*/% ()”

    android:drawableBottom         //在text的下方输出一个drawable,如图片。如果指定一个颜色的话会把text的背景设为该颜色,并且同时和background使用时覆盖后者

    android:drawableLeft             //在text的左边输出一个drawable,如图片

    android:drawablePadding         //设置text与drawable(图片)的间隔,与drawableLeft、 drawableRight、drawableTop、drawableBottom一起使用,可设置为负数,单独使用没有效果

    android:drawableRight            //在text的右边输出一个drawable

    android:drawableTop              //在text的正上方输出一个drawable

    android:editable                   //设置是否可编辑

    android:editorExtras              //设置文本的额外的输入数据

    android:ellipsize                //设置当文字过长时,该控件该如何显示。有如下值设置:”start”—?省略号显示在开头;”end” ——省略号显示在结尾;”middle”—-省略号显示在中间;”marquee” ——以跑马灯的方式显示(动画横向移动)

    android:freezesText               //设置保存文本的内容以及光标的位置

    android:gravity                    //设置文本位置,如设置成“center”,文本将居中显示

    android:hintText                 //为空时显示的文字提示信息,可通过textColorHint设置提示信息的颜色。此属性在 EditView中使用,但是这里也可以用

    android:imeOptions                //附加功能,设置右下角IME动作与编辑框相关的动作,如actionDone右下角将显示一个“完成”,而不设置默认是一个回车符号。这个在EditView中再详细说明,此处无用

    android:imeActionId                 //设置IME动作ID

    android:imeActionLabel              //设置IME动作标签

    android:includeFontPadding         //设置文本是否包含顶部和底部额外空白,默认为true

    android:inputMethod                //为文本指定输入法,需要完全限定名(完整的包名)。例如:com.google.android.inputmethod.pinyin,但是这里报错找不到

    android:inputType                    //设置文本的类型,用于帮助输入法显示合适的键盘类型。在EditView中再详细说明,这里无效果

    android:linksClickable                //设置链接是否点击连接,即使设置了autoLink

    android:marqueeRepeatLimit        //在ellipsize指定marquee的情况下,设置重复滚动的次数,当设置为 marquee_forever时表示无限次

    android:ems                         //设置TextView的宽度为N个字符的宽度。这里测试为一个汉字字符宽度

    android:maxEms                    //设置TextView的宽度为最长为N个字符的宽度。与ems同时使用时覆盖ems选项

    android:maxLength                 //限制显示的文本长度,超出部分不显示

    android:lines                        //设置文本的行数,设置两行就显示两行,即使第二行没有数据

    android:maxLines                   //设置文本的最大显示行数,与width或者layout_width结合使用,超出部分自动换行,超出行数将不显示

    android:minLines                    //设置文本的最小行数,与lines类似

    android:lineSpacingExtra            //设置行间距

    android:lineSpacingMultiplier        //设置行间距的倍数。如”$2

    android:numeric                     //如果被设置,该TextView有一个数字输入法。此处无用,设置后唯一效果是TextView有点击效果,此属性在EdtiView将详细说明

    android:password                    //以小点”.”显示文本 android:phoneNumber设置为电话号码的输入方式

    android:privateImeOptions          //设置输入法选项,此处无用,在EditText将进一步讨论

    android:scrollHorizontally            //设置文本超出TextView的宽度的情况下,是否出现横拉条

    android:selectAllOnFocus              //如果文本是可选择的,让他获取焦点而不是将光标移动为文本的开始位置或者末尾位置。TextView中设置后无效果

    android:shadowColor                //指定文本阴影的颜色,需要与shadowRadius一起使用

    android:shadowDx                   //设置阴影横向坐标开始位置

    android:shadowDy                   //设置阴影纵向坐标开始位置

    android:shadowRadius                //设置阴影的半径。设置为0.1就变成字体的颜色了,一般设置为3.0的效果比较好

    android:singleLine                     //设置单行显示。如果和layout_width一起使用,当文本不能全部显示时,后面用“…”来表示。
    展开全文
  • 前端7大常用布局方式

    千次阅读 多人点赞 2019-10-21 16:35:51
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性 ,根据不同行业情况进行不同...

    Web前端常用布局方式

    页面的布局方式是块状元素依次从上至下、从左至右进行布局

    布局的作用

    对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。

    1. 适用性 ,根据不同行业情况进行不同效果的制作。
    2. 吸引性,视觉效果优秀的布局效果能瞬间吸引客户。

    布局方式

    一、静态布局

    静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

    .bor{
    	width: 360px;
    	height: 255px;
    	border: 1px solid black;
    	margin-bottom: 30px;
    }
    .bor p{
    	color: #000000;
    	font-size: 16px;
    }
    .border-pic{
    	width: 360px;
    	height: 255px;
    	margin-left: 10px;
    	margin-top: 10px;
    	overflow: hidden;
    }
    .border-pic img{
    	width: 360px;
    	height: 255px;
    }
    

    布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的,常规的pc网站是进行设置了宽度值进行布局的,不会随着pc端的屏幕的大小而变化。
    优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的,最让人容易以接受、学习的,没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上,这些官网的设备的尺寸是固定的,这种布局方式往往是最简单的方法。
    缺点: 不会随着pc端的屏幕大小而变化。

    二、弹性布局(flexbox)

    弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是,使用em或rem单位(lem=16px,1rem=10px)进行相对布局,相对使用百分比更加方便、灵活,相应同时支持浏览器的字体大小调整和缩放的等正常显示。
    优点:
    1.适应性强,在做多种不同的屏幕分辨率不同的界面是非常使用。
    2.随意按照宽度、比例划分元素的宽高。
    3.可以轻松的改变元素的显示顺序。
    4.网页布局实现快捷,维护起来更加容易。
    如果做移动端时,如果客户对细微的之处的要求不高,使用弹性布局进行制作是最好的选择,一份css+一份js调节font-size搞定。
    缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

    三、自适应布局(bootstrap)

    自适应布局分别为不同屏幕不同分辨率定义布局,即是创建多个静态页面,每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上,但是布局中的元素位置会发生改变,但是在每个静态布局中,页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    优点:
    1.对网站的复杂程度兼容性更大;
    2.对开发工程师来说制作的成本代价更低;
    3.代码执行效果更高效;
    4.测试时更加容易,运营相对更加精准。
    缺点: 在现如今的移动端设计百花齐放的时期之下,同一个网站往往需要为不同的设备制作不同的页面,不但会增加开发成本,还会因为客户的需求改变时,可能会改动多套代码、流程相比较来说较繁琐。

    四、流式布局(fluid)

    流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整,但是整体布局不变,也称之为栅栏系统。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    缺点: 屏幕大小变化时,页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

    五、响应式布局

    响应式布局是css3增加的新布局方式,该布局方式2010年提出来的一个概念,说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
    设计方法: 媒体查询+流式布局。通常使用@media媒体查询,和网格系统配合相对布局单位进行布局,实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
    优点: 适应pc端和移动端,如果有足够的耐心,页面效果会很完美。
    缺点:
    1.只能适应主流的宽高;
    2.如果匹配足够多的设备屏幕的大小,对于工程师来说工作量不小,设计更需要多个版本,工作量增大。

    六、浮动布局

    浮动布局进行调用浮动属性改变页面中元素的位置,浮动布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂。浮动元素是脱离文档流的,但不脱离文本流。浮动元素有左浮动(float : left)和右浮动(float : right)两种

    .lian{
    	width: 90%;
    	padding-left: 5%;
    }
    .lian img{
    	float: right;
    	margin-top: -180px;
    }
    .phone ul li{
    	list-style: none;
        margin-top: 50px;
        margin-left: 70px;
        color: #808080;
    }
    .phone ul li img{
    	position: absolute;
    	margin-left: -80px;
    	float: left;
    	margin-top: -5px;
    }
    .view{
    	margin-top: 50px;
    	margin-left: -5px;
    	float: left;
    }
    .view input{
    	width: 120px;
    	height: 40px;
    	border-radius: 6px;
    	border: 1px solid #3CB371;
    	background-color: #3CB371;
    	font-size: 16px;
    	color: white;
    

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

    七、定位布局

    定位布局时利用position属性控制页面元素设置一些不规则布局。
    定位元素的各个属性:
    1.static 静态定位: HTML元素的默认值,即没有定位,元素出现在正常的流中。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
    

    2.fixed 固定定位: 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

    p.pos_fixed{
        position:fixed;
        top:30px;
        right:5px;
    }
    

    3.relative 相对定位: 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流,移动相对定位元素,但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }
    

    4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关,因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。

    h2{
        position:absolute;
        left:100px;
        top:150px;
    }
    

    5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }
    

    6.z-index 因为页面中元素的定位与文档流无关,所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面/后面)。z-index的值必须取正整数,数值越大显示的优先级就越高。 如果两个定位元素重叠,而且还没有指定z - index,name最后定位在HTML代码中的元素将被显示在最前面。

    展开全文
  • Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout...
  • 四种常用布局方式

    千次阅读 2020-08-09 14:57:09
    CSS四种常用布局方式: 常用的四种方式有display,浮动布局,定位布局和伸缩盒布局。 1.display布局方式 其中display属性三个属性值,分别为inline,block,inline-block。 display:inline 将块级元素转变为行内...
  • 前端常用两种布局方式:双飞翼布局以及圣杯布局
  • Ext常用布局

    2012-08-15 12:45:30
    Ext常用布局对ext中常用的布局进行了讲解,并事例说明,对初学者很大帮助
  • Android界面五种常用布局方式

    千次阅读 2014-08-05 00:23:19
    Android界面五种常用布局方式   Android的界面由布局和组件协同完成,布局相当于整体框架,而组件则是框架里面的内容。组件按布局方式一次排列,就组成了用户所能看见的界面。Android的五大布局分别是...
  • css的常用布局方式

    千次阅读 2017-03-10 20:33:20
    背景引入:提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调
  • 常用布局之BFC布局

    千次阅读 2018-02-24 14:23:01
    上一篇文章写了常用并且很强大的弹性布局,这次来说下另一种布局方式BFC布局BFC(Block Formatting Contexts -- 块格式化布局)布局是需要其他属性值设置为某些特定的值方可触发BFC布局,也就是说这个bfc不像弹性布局...
  • 常用布局之IFC布局

    千次阅读 2018-02-24 20:34:37
    前面两篇分别介绍了BFC以及FFC布局,...这里就介绍一些其他布局方式IFC还有GFC布局以及一些布局的总结。bfc传送门:http://blog.csdn.net/weixin_38080573/article/details/79360324ffc传送门:http://blog.csdn.net...
  • 常用五种布局方式

    2021-03-08 22:06:06
    为了适应不同的见面风格,...Android系统提供的五种常用布局直接或者间接继承自ViewGroup,因此五种常用的布局也支持在ViewGroup中定义的属性,这些属性可以看作布局的通用属性。 属性名称 功能描述 android:i.
  • 现在html网页布局基本上主要两种方式  一、div+css  二、table  下面说一下两种网页布局的优劣性 div+css  这种布局方式,代码简洁,用起来比较麻烦,熟悉的会运用很灵活,但是对于后期维护会...
  • 参照Android开发,总结了微信小程序的常用的两种布局方式:1、线性布局(横版、竖版)。2、网格布局。 效果图如下: 一、网格布局 (1)固定Item个数的网格布局,主要用于功能模块入口展示。 WXML: <!--...
  • 常用布局源代码

    2016-11-15 21:18:45
    布局样式
  • 移动端开发常用布局

    千次阅读 2019-03-29 19:47:03
    移动web常用布局知识 在移动web中常用的布局四种 流式布局(百分比布局) Flex布局(弹性布局) 响应式布局 rem布局 一、流式布局(百分比布局) 所谓的流式布局就是我们常说的百分比布局,页面中盒子的...
  • 页面布局方式有哪些

    千次阅读 2020-07-08 13:18:26
    常见的页面布局方式有六种:双飞翼、多栏、弹性、流式、瀑布流、响应式布局 (1)、双飞翼布局 经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早...
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • Flutter 常用布局之Container

    万次阅读 多人点赞 2020-09-23 18:36:54
    生活中离不开杯子、碗、盆等容器 喝水需要杯子,装饭装肉用的碗,洗脸洗脚用的盆. 杯子、碗、洗脸盆都自己的颜色、宽度、高度;这一切属性根据我们的需求到商店进行...常用属性 width、height、color、alignment、..
  • android常用布局

    2014-06-09 13:59:56
    android常用布局作用特点及属性方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 186,172
精华内容 74,468
关键字:

常用的布局模式有哪些