CSS 流体布局

最新推荐文章于 2023-05-03 16:00:19 发布
最新推荐文章于 2023-05-03 16:00:19 发布
阅读量196 收藏
点赞数
原文链接：http://www.cnblogs.com/lszw/p/10839090.html
版权

流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。

优势

  • 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；
  • 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；
  • 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。

劣势

  • 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；
  • 如果用户的窗口非常宽，文本行就会很长，以至于难以阅读；
  • 如果用户的窗口非常窄，单词可能会被挤压，导致每行只有几个单词；
  • 如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。

由于流体布局可以伸展到浏览器窗口的整个宽度，产生难以阅读的长文本行，所以有些流媒体布局只让页面的一部分伸展和收缩。

在页面的其它部分则限制最大和最小宽度。

下面的代码演示了流体布局，关键技术是设置宽度单位为百分比。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
< html >
     < head >
         < title >Liquid Layout</ title >
         < style type = "text/css" >
             * {
                 color: #fff;
                 text-align: center;}
             body {
                 width: 90%;
                 margin: 0 auto;}
             #content {
                 overflow: auto;}
             #nav, #feature, #footer {
                 margin: 1%;}
             .column1, .column2, .column3 {
                 width: 31.3%;
                 float: left;
                 margin: 1%;}
             .column3 {
                 margin-right: 0%;}
             li {
                 display: inline;
                 padding: 0.5em;}
             #nav, #footer {
                
                 padding: 0.5em 0;}
             #feature, .article {
                 color:#fff;
                 height: 10em;
                 margin-bottom: 1em;
                 }
         </ style >
     </ head >
     < body >
         < h1 style = "color:#706fd3" >软件开发，成就梦想</ h1 >
         < h2 >< a href = "https://www.liyongzhen.com/" style = "color:#000" >学编程，上利永贞网</ a ></ h2 >
         < div id = "header" >
             < h1 >Logo</ h1 >
             < div id = "nav" >
                 < ul >
                     < li >< a href = "" >首页</ a ></ li >
                     < li >< a href = "" >产品</ a ></ li >
                     < li >< a href = "" >服务</ a ></ li >
                     < li >< a href = "" >关于我们</ a ></ li >
                     < li >< a href = "" >联系我们</ a ></ li >
                 </ ul >
             </ div >
         </ div >
         < div id = "content" >
             < div id = "feature" >
                 < p >功能</ p >
             </ div >
             < div class = "article column1" >
                 < p >第一列</ p >
             </ div >
             < div class = "article column2" >
                 < p >第二列</ p >
             </ div >
             < div class = "article column3" >
                 < p >第三列</ p >
             </ div >
         </ div >
         < div id = "footer" >
             < p >&copy; Copyright 2019</ p >
         </ div >
     </ body >
</ html >

转载于:https://www.cnblogs.com/lszw/p/10839090.html

weixin_30877227
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS布局方式之流动布局、浮动布局、定位布局讲解
weixin_44860226的博客
07-20 4465
css三种常规的布局方式，流动布局、浮动布局、定位布局等讲解
【css】最全布局总结
qq_45406325的博客
08-13 6005
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS流动布局-页面自适应
分享互联网的有趣知识~
03-08 4814
项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，本篇通过css的“流”来解决css的页面自适应问题。
css中常见的布局方式
qq_45856709的博客
05-03 421
css中常见的布局方式
移动端视口、px、rpx
weixin_45985175的博客
07-31 1089
1、现状 移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854等。作为开发者无需关注这些分辨率，因为常用的尺寸单位是 px 。 移动端浏览器我们主要对webkit内核进行兼容，我们现在开发的移动端主要针对手机端开发。 2、视口 视口就是浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽 想要理想视口，我们需要给我们的移动端页面添加 meta视口标 2.1 布局视口
css 固定 流体 弹性布局
04-10
NULL 博文链接：https://maoting.iteye.com/blog/1667254
CSS用四种方式实现布局
12-10
一，流体浮动布局 描述：当视图变化时，跟着变化，设置百分比大小，采用浮动来实现 二，流体定位布局 描述：当视图变化时，跟着变化，设置百分比大小，用定位方式实现 三，固定浮动布局 描述：固定大小，不能随着...
自适应css布局——流动布局新时代
03-01
介绍流体布局的实现原理和方法 自适应css布局
css-流概念之浅谈流，流体布局，宽度分离原则
07-28
最近做的一个分享话题，很短，pdf一共也就几页，讲的时候大概用了15分钟。有些个人理解可能存在偏差，暂做分享，有问题可留言~
grrrrd:流体CSS网格系统
06-22
咕噜咕噜流体CSS网格系统Grrrrd 是一个基于的部分流体 CSS 网格系统。 在@breakpoint-fluid-lower （默认值：48em）和@breakpoint-fluid-upper （默认值：72em）之间，你会得到一个流畅的12列网格，最大总宽度为@...
流体布局（百分比布局）
xiangxiongfly
04-21 311
流体布局是一种响应式设计的布局方式，它可以根据不同的屏幕尺寸和设备类型自动调整页面布局。流体布局使用相对单位（如百分比）来定义元素的尺寸和位置，而不是使用固定的像素值。这使得页面可以在不同的设备上自适应，并且可以避免在不同设备上出现滚动条或者元素溢出的问题。 流体布局通常配合使用CSS的flexbox或grid布局来实现。这些布局可以让开发者更加方便地定义元素的排列方式，并且可以自动适应不同的屏幕尺寸和设备类型。
移动端布局：流体布局、弹性盒布局、rem布局
weixin_43819595的博客
09-13 716
针对移动端布局适配，可以采用 流体布局 、弹性盒布局、rem布局的方式，一个页面的布局可以综合运用这三种方式完成最终的布局。 1、流体布局 宽度用百分比，高度用固定值的布局方式，宽度通过百分比来适配不同宽度的屏幕。 优缺点 　　直接将宽度写成百分比，高度写固定值，这种布局方式就比较简单，但是对于宽屏和窄屏，宽度的百分比是相同的，得到的最终宽度是不同的，而高度是固定值，这就让网页在宽屏上，感觉整个网页在横向上被拉伸的，体验不是很好，另外，用百分比的方式不能解决所有布局情况，还需要结合后面的响应式布局的技巧.
css学习8：浮动和流体布局
D_evin_的博客
09-13 317
浮动和流体布局 十七、浮动和文档流 1. 默认文档流 - 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性 - 默认文档流,画格子,内联和块级 - 内联元素，从左向右排列 - 块级元素，从上向下排列 2. 脱离文档流 文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流： - float 浮动 - position 定位(绝对定位、固定定位) 2. 浮动 - 子...
CSS世界：流、元素与基本属性
老司机的后备箱
03-15 216
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
【前端】css样式视口、布局
qq_41466440的博客
02-01 1085
【前端】css样式布局
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1400
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
几种常见的CSS布局-- 流体布局
LuckXinXin的博客
02-05 533
.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】流、 元素、基本尺寸
学无止境
04-17 337
CSS ：为图文信息展示服务的 “流”： 一种基本的定位和布局机制 “流体布局”：利用元素“流”的特性实现的各类布局效果 .vocabulary { height: 99px; color: transparent; backgroud-color: rgba(0,0,0,.5); } 1.属性: height, color; 2.值: 99px; 3.关键字: transparent; 4.长度单位: px 5.功能符: rgba(0,0,0,.5) 6.属性值: 值+关键字+功能符 7.声明:
CSS流体布局
尊哥的博客
09-07 3078
流体特性 图片宽度一直width:100%，依次点击3个按钮，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。实例：flow.html 流体布局 稍微做一个调整，div距离容器左侧margin 15...
通过html和css使用固定宽度布局或者流体布局的方法设计一个个人主页
最新发布
05-27
好的，我会尽力回答你的问题。首先，需要明确一下固定宽度布局和流体布局的概念。 固定宽度布局是指网页的宽度固定不变，一般使用像素作为单位。这种布局适合于内容相对稳定的网页，可以更好地控制网页的样式和布局。 流体布局是指网页宽度随着浏览器窗口大小的改变而自适应调整，一般使用百分比作为单位。这种布局适合于内容较为灵活、需要适应不同屏幕尺寸的网页。 接下来，我会分别介绍如何使用固定宽度布局和流体布局来设计一个个人主页。 1. 固定宽度布局 首先，我们需要确定网页的宽度。假设我们的网页宽度为1000像素，那么可以在CSS中设置body的宽度为1000像素： ``` body { width: 1000px; margin: 0 auto; } ``` 接下来，我们可以使用div来划分网页的不同部分，并设置每个div的宽度和样式。 例如，可以将头部、导航栏、内容区、侧边栏和底部分别设置为不同的div，并设置它们的宽度和样式： ``` .header { width: 1000px; height: 100px; background-color: #ccc; } .nav { width: 1000px; height: 50px; background-color: #999; } .content { width: 700px; height: 500px; background-color: #fff; float: left; } .sidebar { width: 300px; height: 500px; background-color: #eee; float: right; } .footer { width: 1000px; height: 100px; background-color: #ccc; } ``` 最后，将这些div放在HTML中，并设置它们的class，即可完成固定宽度布局的个人主页设计。 2. 流体布局 与固定宽度布局不同，流体布局需要使用百分比来设置宽度。 首先，我们可以设置body的宽度为100%，表示网页宽度随浏览器窗口大小自适应调整： ``` body { width: 100%; margin: 0; padding: 0; } ``` 接下来，我们同样可以使用div来划分网页的不同部分，并设置每个div的宽度和样式。 例如，可以将头部、导航栏、内容区、侧边栏和底部分别设置为不同的div，并设置它们的宽度和样式： ``` .header { width: 100%; height: 10%; background-color: #ccc; } .nav { width: 100%; height: 5%; background-color: #999; } .content { width: 70%; height: 75%; background-color: #fff; float: left; } .sidebar { width: 30%; height: 75%; background-color: #eee; float: right; } .footer { width: 100%; height: 10%; background-color: #ccc; } ``` 需要注意的是，这里设置的宽度是相对于父元素的百分比，因此需要考虑每个div的父元素宽度。 最后，同样将这些div放在HTML中，并设置它们的class，即可完成流体布局的个人主页设计。 以上就是使用固定宽度布局和流体布局来设计个人主页的方法。希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值