流体布局（百分比布局）

于 2023-04-21 14:26:38 发布
阅读量372 收藏 1
点赞数
分类专栏： 前端 文章标签： css html css3 百分比布局 流体布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/130287837
版权

文章目录

流体布局（百分比布局）

概述

流体布局是一种响应式设计的布局方式，它可以根据不同的屏幕尺寸和设备类型自动调整页面布局。流体布局使用相对单位（如百分比）来定义元素的尺寸和位置，而不是使用固定的像素值。这使得页面可以在不同的设备上自适应，并且可以避免在不同设备上出现滚动条或者元素溢出的问题。

流体布局通常配合使用CSS的flexbox或grid布局来实现。这些布局可以让开发者更加方便地定义元素的排列方式，并且可以自动适应不同的屏幕尺寸和设备类型。

案例

代码下载

在这里插入图片描述

xiangxiongfly915
关注
专栏目录
布局（一）——流体浮动三列布局
mmrsdym的专栏
03-02 906
今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。     根据李炎恢老师总结的4种布局，分为：     1.流体浮动布局     2. 流体定位布局     3. 固定浮动布局     4. 固定定位布局 1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位） 规格：当视窗变化时跟着变化   采用：浮动布
流体布局，响应式布局
a1209849629的博客
04-13 555
适配布局类型 PC及移动端页面适配方法 设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局 2、移动端适配： 流体布局+少量响应式 基于rem的布局 流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒...
弹性流体布局
weixin_34239592的博客
05-10 134
 原创：冰极峰    转载请注明出处     时间：2009年5月10日 0:12:03 蓝色论坛讨论贴：http://bbs.blueidea.com/thread-2927057-1-1.html 在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。 那种方案其实就是这种布局的变通应用。弹性布局最大的优...
[01]项目实战-移动端流体布局
weixin_34032827的博客
02-18 119
一．整体设计 首先，我们要了解一下测试工具。这里提供两种测试工具，一种是 Chrome 自带的移动端测试工具，另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准，他模拟了主流的手机，并且引擎是webkit。 首先，我们介绍一下分辨率，通过 Chrome 移动端测试工具可以得知，一般分辨率最小的不会小于 320了，最大的不超过 640。这时有人会...
流体布局、响应式布局
weixin_34391854的博客
10-13 207
一、流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。 <!DOCTYPE html> <html lang="zh-cn"> <head> <...
流体布局FlowLayout
了吃好最子包
09-21 595
FlowLayoutView.javaimport android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup;import java.util.ArrayList; import java.util.List;/** * Cre
CSS 流体布局
weixin_30877227的博客
05-09 219
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。 优势 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白； 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动； 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。 劣势 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大...
css 固定 流体 弹性布局
04-10
接下来是流体布局（Fluid Layout），它通过百分比单位来定义元素的尺寸，使得页面可以随着浏览器窗口大小的变化而自适应调整。例如，设置一个宽度为100%的容器，无论屏幕大小如何，该容器都会占据整个视口。流体布局...
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1431
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
流体布局详解
weixin_30323961的博客
03-11 159
流体布局需要注意哪些，有什么特殊的写法？ 响应式设计：流体布局 http://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html 转载于:https://www.cnblogs.com/diantao/p/4331044.html...
CSS布局之流体浮动布局
liangde123的博客
07-17 3552
在CSS布局中经常使用的布局方式大值分为以下四种： 1、流体浮动布局 2、流体定位布局  3、固定浮动布局 4、固定定位布局 下面首先说下流体浮动布局; 假如我们要实现如下的布局情况： 则应该可以考虑采用流体浮动布局，其中CSS的样式如下： #header{ border:2px solid black; height:80px; back
几种常见的CSS布局-- 流体布局
LuckXinXin的博客
02-05 567
.left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: green; }
CSS+DIV 布局 (流体布局&刚性布局)
cooleader320的专栏
10-01 1388
·         流体布局DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>    title>Li
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
zhouzuoluo的博客
07-14 5356
关于web页面布局，首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧？ 固定布局(fixed layout) 固定布局，例如豆瓣网，无论如何change浏览器的宽度，页面主体区域的宽度是固定不变了，里面的内容布局也是打死不动的； 利 任...
移动端布局：流体布局、弹性盒布局、rem布局
weixin_43819595的博客
09-13 819
针对移动端布局适配，可以采用 流体布局 、弹性盒布局、rem布局的方式，一个页面的布局可以综合运用这三种方式完成最终的布局。 1、流体布局 宽度用百分比，高度用固定值的布局方式，宽度通过百分比来适配不同宽度的屏幕。 优缺点 　　直接将宽度写成百分比，高度写固定值，这种布局方式就比较简单，但是对于宽屏和窄屏，宽度的百分比是相同的，得到的最终宽度是不同的，而高度是固定值，这就让网页在宽屏上，感觉整个网页在横向上被拉伸的，体验不是很好，另外，用百分比的方式不能解决所有布局情况，还需要结合后面的响应式布局的技巧.
【css】最全布局总结
qq_45406325的博客
08-13 9133
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
流体布局
weixin_30678821的博客
09-29 123
什么叫流体布局？ 简单的来说，就是网页缩小和放大时网页布局会随着浏览器的大小而改变！由于页面中的宽度值都是百分数，所以拉伸、缩小浏览器的大小，布局的宽度会随之变化儿不会出现横向滚动条。这种布局叫做流体布局，可以增加文本的易读性。但是流体布局也有缺点。在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此。并且，很多时候，会遇到文字溢出等情况！ 举个实例：三列布局（左右固定；中间自适应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值