精华内容
下载资源
问答
  • 常用的布局模式有哪些
    千次阅读
    2020-08-09 14:57:09

    CSS四种常用布局方式:
    常用的四种方式有display,浮动布局,定位布局和伸缩盒布局。
    1.display布局方式
    其中display属性有三个属性值,分别为inline,block,inline-block。
    display:inline 将块级元素转变为行内元素;
    display:block 将行内元素转变为块级元素;
    display:inline-block 将当前元素转变为兼具行内元素和块级元素特性的元素,即可设置宽高也能在一行排列。
    2.浮动布局方式
    float:left/right,其中使用浮动时不会遮盖文字,对行内元素设置浮动会让行内元素可以设置宽高属性,对块级元素设置浮动时,块级元素不在独占一行。
    3.定位布局:
    定位布局使用position属性
    position:static 静态布局
    position:absolute 绝对定位
    绝对定位特点:1)脱离默认文档流;2)不保留当前控件;3)默认情况下,绝对定位元素根据body左上角进行定位; 4)当父元素具有定位属性时,子元素根据父元素左上角进行相对定位
    position:relative 相对定位
    特点:1)根据元素本身进行相对定位;2)不脱离默认文档;3)保留定位前空间
    position:fixed 固定定位
    特点:1)特点和绝对定位相似;2)使用了固定定位的元素不会随着滚动条的滚动而滚动
    position:sticky 综合类相对定位和固定定位。
    其中使用定位布局时,要使用配合属性left;top;right;bottom
    4.伸缩盒布局
    display:flex; 当前元素即刻变成一个伸缩盒,并且所有子元素自动成为父元素的一个成员项item,子元素的浮动属性自动失效
    flex-direction:设置子元素的排列方式
    align-items: 设置元素在y轴方向位置
    stretch 子元素默认高度为父元素100%
    flex-start; flex-end ; center
    justify-content:设置元素在x轴方向的位置
    flex-start;flex-end ;center;space-around;space-between
    子元素:flex:number:当前item占据父元素剩余空间的份数
    4.如何让子元素在父元素中水平和垂直居中?
    1.子元素为行内元素 text-align:center / line-height
    2.子元素为块级元素时
    1.给父元素设置:justify-content/align-items
    2.给父元素设置display:flex;
    给子元素直接设置一个margin:auto
    3.给父元素设置一个定位属性,给子元素设置一个绝对定位;然后给子元素所有配合属性设置0px;并且给子元素设置margin:auto
    4.给父级元素设置定位属性,子元素设置绝对定位;将子元素的top:50%;left:50%;再配合使用margin-top:-height50%;margin-left:-width50%

    更多相关内容
  • 页面布局常用的方法浮动、定位、flex、grid网格布局、栅格系统布局 浮动: 优点:兼容性好。 缺点:浮动会脱离标准文档流,因此要清除浮动。我们解决好这个问题即可。 绝对定位 优点:快捷。 ...

    页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局

    浮动:

    • 优点:兼容性好。

    • 缺点:浮动会脱离标准文档流,因此要清除浮动。我们解决好这个问题即可。

    绝对定位

    • 优点:快捷。

    • 缺点:导致子元素也脱离了标准文档流,可实用性差。

    flex 布局(CSS3中出现的)

    • 优点:解决上面两个方法的不足,flex布局比较完美。移动端基本用 flex布局。

    网格布局(grid)

    • CSS3中引入的布局,很好用。代码量简化了很多。

    利用网格布局实现的一个左右300px中间自适应的布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html * {
                padding: 0;
                margin: 0;
            }
            /* 重要:设置容器为网格布局,宽度为100% */
            .layout.grid .left-center-right {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;  /* 重要:设置网格为三列,并设置每列的宽度。即可。*/
            }
            .layout.grid .left {
                background: red;
            }
            .layout.grid .center {
                background: green;
            }
            .layout.grid .right {
                background: blue;
            }
        </style>
    </head>
    <body>
        <section class="layout grid">
            <article class="left-center-right">
                <div class="left">
                    我是 left
                </div>
                <div class="center">
                    <h1>网格布局解决方案</h1>
                    我是 center
                </div>
                <div class="right">
                    我是 right
                </div>
            </article>
        </section>
    </body>
    </html>

    展开全文
  • 下面我们来看一下几种常用的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布局方式有哪些

    2022-06-22 18:41:19
    css布局方式有哪些:静态,自适应,流式,响应式,弹性

    CSS布局方式有哪些

    • 静态布局
    • 自适应布局
    • 流式布局
    • 响应式布局
    • 弹性布局

    1.静态布局

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

    实现方法:

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

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

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

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

    实践案例:

    • Float 布局
    • 绝对布局

    2.自适应布局

    可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局(页面元素位置可能发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化,很好的解决了流式布局中的大屏空间利用率不高弊端。

    屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

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

    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。

    而流式布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”。

    屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。

    主要案例:

    • 左侧固定+右侧自适应
    • 左右固定宽度+中间自适应
    • 圣杯布局
      原理:用相对定位、浮动、负边距布局、而不加任何标签
    • 双飞翼布局
      原理:中间设左右边距,左右设浮动、负边距归位,消除相对定位

    4.响应式布局

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

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

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

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

    2022-08-16 19:01:33
    Css 常用布局方式
  • 前端常用两种布局方式:双飞翼布局以及圣杯布局
  • Android界面布局中几种常用布局Android界面布局中几种常用布局在Android开发中,界面设计是开发过程中的一个很重要的部分,今天主要来给大家介绍一下Android开发中主要应用到的一些界面布局。Android界面设计中...
  • 页面布局方式有哪些

    千次阅读 2020-07-08 13:18:26
    常见的页面布局方式有六种:双飞翼、多栏、弹性、流式、瀑布流、响应式布局 (1)、双飞翼布局 经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早...
  • [css] css常用布局方式有哪些

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

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

    千次阅读 2021-06-13 04:22:18
    随着智能手机的普及以及社会的发展,传统的网站布局...碎片化严重,Android和苹果设备多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等一般的电脑端的页面布局在手机上无法完全适应,那么如何让一...
  • 移动端有哪些常见布局方式? 一、固定布局 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点...
  • Android界面布局中几种常用布局Android界面布局中几种常用布局在Android开发中,界面设计是开发过程中的一个很重要的部分,今天主要来给大家介绍一下Android开发中主要应用到的一些界面布局。Android界面设计中...
  • Flutter常用布局组件

    2021-01-08 00:23:09
    1.常用布局组件 Row https://api.flutter.dev/flutter/widgets/Row-class.html 构造函数: Row({ Key key, MainAxisAlignment mainAxisAlignment,// 主轴方向的对齐方式 MainAxisSize mainAxisSize,// 主轴方向上...
  • java布局管理有哪些?详细展示

    千次阅读 2021-02-12 22:05:33
    今天再为大家介绍一些相关知识,也就是java布局管理有哪些,并且通过详细的图片为大家展示。首先我们需要了解的是,java为我们提供了几个常用布局管理器类,比如说:FlowLayout、BorderLayout、GridLayout、...
  • Java中三种常用布局方式

    千次阅读 2021-09-20 19:43:36
    FlowLayout基本上助于开发响应速度更快的UI,并使组件保持自由流动的方式。 下图显示了具有6个组件的实际流布局。 由于这是框架或面板的默认布局,因此也可以在不显式应用布局的情况下工作。 import java.awt....
  • 等高布局方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相等 先来看看伪等高实现方式 通过负...
  • Flutter常用布局方式

    千次阅读 2021-12-08 09:39:05
    文章目录flutter 布局介绍一、Container 布局1.属性2. 示例二、线性布局1.说明2. 属性3. 示例三、弹性布局 Flex1.属性2. Expanded 的使用3. 示例四、流式布局1.说明2. 属性3. 示例五、层叠布局1.说明2. 属性...
  • Android 学习总结--六大常用布局

    千次阅读 2022-03-16 19:44:50
    一、相对布局(RelativeLayout) 二、线性布局(LinearLayout) 三、网格布局(GridLayout) 四、表格布局(TableLayout) 五、帧布局(FrameLayout) 六、约束布局(ConstraintLayout) 所有的UI元素都是通过View与...
  • HTML几种布局方式-HTML教程第十六讲

    千次阅读 2021-06-27 10:20:33
    归纳了以下,主要以下三种方式:使用 元素的 HTML 布局注释: 元素常用布局工具,因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个 元素来创建多列布局:示例:City ...
  • 正如标题所言,新闻列表在一些以咨询或非咨询为主的门户网站上启到着重要的作用,它的布局也因此被大家所重视,下文是常用的新闻列表代码,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • 什么是flex 布局?flex是 flexible box 的缩写,就是弹性布局的意思。任何一个元素(块元素、行内块元素、行内元素),都可以设置为弹性盒子属性。语法:块元素: display:flex;行内元素:display:inline-flex;注意:...
  • 它如同表格布局一样,把不同对象放置到不同页面加以处理,因为框架可以取消边框,所以一般来说不影响整体美观。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。表格布局唯一的缺点是,...
  • 常用布局源代码

    2016-11-15 21:18:45
    布局样式
  • 常见的布局方式

    2021-10-20 22:21:41
    页面中为了更好的展示数据,需要对页面元素进行布局,常见的布局方式有以下三种: 一.默认布局: 它是默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示。(适用于页面元素的微调) <...
  • flex 常用布局

    2021-12-01 16:54:28
    1. 水平垂直居中布局 <div class="main"> <div class="content"> </div> </div> .main{ width: 400px; height: 400px; border: 1px dashed black; display: flex; /*父元素设置...
  • Android 常用布局介绍

    2022-08-04 10:00:36
    Android 常用布局简单介绍

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 209,010
精华内容 83,604
热门标签
关键字:

常用的布局模式有哪些