HTML流式布局是什么,什么是流式布局？流式布局是什么意思?

在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如demo4-1.html 所示。

固定布局转换为百分比布局

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;}

header

nav

aside

article

footer

打开Chrome浏览器访问demo4-1.html，页面效果如下图所示。

可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，如下图所示。

下面修改demo4-1样式代码，将所有宽度修改为百分比的形式，具体如下:

body>*{ 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; }

aside{ width:25.510204%; /*250÷980*/}

article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}

刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：

HTML流式布局是什么,什么是流式布局？流式布局是什么意思?相关推荐

java流式传输对象_Java性能：面向教学与流式传输
java流式传输对象在for循环中向上或向下计数是最有效的迭代方式吗? 有时答案既不可行. 阅读这篇文章,了解不同迭代品种的影响. 迭代性能关于如何以高性能进行迭代有很多观点. Java中的传统迭 ...
vueweb端响应式布局_移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
html自适应布局视频,2018年最新的8个响应式与自适应视频教程推荐
在学习前端的过程中经常可以看到自适应布局和响应式布局,那么,什么是响应式布局?自适应布局又是什么呢?响应式布局设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本:自适应布局设计是能使网 ...
css布局方式_网页布局都有哪种？一般都用什么布局？
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
bootstrap 垂直居中布局_网页布局都有哪种？一般都用什么布局？
随着Web技术不断的革新,CSS近几年也变得多年前要更强大.在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的 ...
页面布局整理汇总，让你彻底搞明白多种布局的关系
文章目录常见页面布局方式布局设计(大层面) 单独比较:响应式布局和自适应布局布局技术(小层面) 单独比较:Flex Box和Grid Layout 响应式布局的开发原理常见页面布局方式根据个 ...
html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
【响应式编程的思维艺术】（2）响应式Vs面向对象
[摘要]本文是Rxjs 响应式编程-第一章:响应式这篇文章的学习笔记. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 划重点三句非常重要的话: ...
HTML5响应式企业集团织梦模板,（自适应手机版）响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化...
名称:(自适应手机版)响应式企业集团通用类网站织梦模板 HTML5响应式大气通用企业织梦源码+PC+wap+利于SEO优化该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非 ...
详解API Gateway流控实现，揭开ROMA平台高性能秒级流控的技术细节
摘要:ROMA平台的核心系统ROMA Connect源自华为流程IT的集成平台,在华为内部有超过15年的企业业务集成经验. 本文分享自华为云社区<ROMA集成关键技术(1)-API流控技术详解& ...

HTML流式布局是什么,什么是流式布局？流式布局是什么意思?

HTML流式布局是什么,什么是流式布局？流式布局是什么意思?相关推荐

最新文章

热门文章