CSS的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其不支持的属性。本文将讲解CSS流式布局，分别从html结构、固定布局样式、将固定布局改为流式布局三个方面来阐述，感兴趣的小伙伴可以继续看下去。
1、html结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="fluied.css">
<title>流式布局</title>
</head>
<body>
<div id="wrapper" class="clearfix">
<!-- 头部和导航 -->
<div id="header">
<div id="navigation">
<ul>
<li>
<a href="#">
首页
</a>
</li>
<li>
<a href="#">
导航一
</a>
</li>
</ul>
</div>
</div>
<!-- 侧边栏 -->
<div id="sidebar">
<p>这里是侧边栏</p>
</div>
<!-- 内容部分 -->
<div id="content">
<p>这里是内容</p>
</div>
<!-- 页脚部分 -->
<div id="footer">
<p>这里是页脚</p>
</div>
</div>
</body>
</html>
2、固定布局样式
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
border: 1px solid red;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}
#navgation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 940px;
}
#navigation ul li {
display: inline-block;
}
#navigation ul li a {
text-decoration: none;
color: black;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 698px;
border-bottom: 1px solid red;
height: 100px;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 10px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 220px;
border-bottom: 1px solid red;
height: 100px;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 940px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
width: 0;
height: 0;
visibility: hidden;
font-size: 0;
}
3、将固定布局改为流式布局
将固定像素宽度转换为对应的百分比宽度公式：
目标元素宽度 ÷ 上下文元素 = 百分比宽度
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/*
* 初始状态下、1em = 16px;
* 设置了根元素的字体大小为62.5%，
*这时，1em = 10px
*/
font-size: 62.5%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%;
border: 1px solid red;
}
#header {
margin-right: 1.04166667%;
margin-left: 1.04166667%;
width: 97.9166667%;
border-bottom: 1px solid red;
font-size: 4.8em;
}
#navgation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -1.04166667%;
padding-right: 1.04166667%;
padding-left: 1.04166667%;
width: 100%;
}
#navigation ul li {
display: inline-block;
}
#navigation ul li a {
text-decoration: none;
color: black;
}
#content {
margin-top: 58px;
margin-right: 1.04166667%;
float: right;
width: 72.7083333%;
border-bottom: 1px solid red;
height: 100px;
font-size: 2em;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 1.04166667%;
margin-right: 1.04166667%;
margin-left: 1.04166667%;
float: left;
width: 22.7083333%;
border-bottom: 1px solid red;
height: 100px;
font-size: 2em;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 1.04166667%;
margin-left: 1.04166667%;
clear: both;
width: 97.9166667%;
height: 100px;
font-size: 1.2em;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
width: 0;
height: 0;
visibility: hidden;
font-size: 0;
}
以上就是CSS流式布局的讲解，大家都弄清楚了吗？
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
移动web基础知识介绍 学习干货
下一篇：
手机HMTL5开发框架推荐
相关推荐 更多
Web前端必备：JavaScript基础知识梳理
Web前端必须掌握的三种技能：HTML/CSS/JavaScript。其中JavaScript相对有一定的难度，甚至部分企业专门设置的JavaScript开发工程师的岗位。今天和大家分享一下JavaScript部分基础知识。
5184
2019-06-25 18:31:26
全栈开发项目教程学什么？学了有什么用？
全栈开发项目教程学什么？总体看来，全栈开发者要学习的内容大致会涉及前端开发、后端开发、数据库存储和服务端渲染等等。本文将为大家详细介绍一下全栈开发项目教程的学习内容。至于学了该教程有什么用？当然是不用担心的，只要能够认真按照教程指导地去学习和练习，相信大家学完之后，都能掌握全栈开发的经验和技能，提升自身的职场竞争力。
2713
2019-12-17 15:46:08
前端开发中绝对路径和相对路径的区别是什么？
前端开发中绝对路径和相对路径的区别是什么？绝对路径和相对路径主要的区别是域名是否是完全网站，起作用是相同的。绝对路径指的是包含域名的完整网址，相对路径指的是不包含域名的被链接页面相对于当前页面的相对网址。
3543
2020-07-16 11:51:15
如何深入理解JSX和React组件？
如何深入理解JSX和React组件？JSX其实是JavaScript对象，所以使用 React和JSX的时候一定要经过编译的过程。React核心机制虚拟DOM，可在内存中创建的虚拟DOM元素。React利用虚拟DOM减少对实际DOM的操作提升性能，虚拟DOM也可以通过JavaScript来创建。
475
2022-03-03 11:37:58
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同，有的面试过程很轻松，有的面试官是个架构师level 挺高不会问八股文，给出了几个现实中的场景，然后转换成代码的逻辑去让实现。
248
2022-05-10 15:28:04
热门文章
- 和行业大咖1V1免费聊IT，这是头一次！
- 人工智能如何入门学习？前景如何
- 未来互联网人才还稀缺吗？哪些技术方向热门？
- 智能汽车用到哪些技术？
- 产品可行性分析需要考虑几个方面？
- 日常工作中程序员最讨厌哪些工作事项？
- 博学谷狂野大数据学习多长时间？
- IT互联网程序员的涨薪秘籍是什么?
- Java多线程遇到死锁三招彻底解决
- Python 开发人员经常遇哪些挑战？如何解决？ 查看更多
扫描二维码，了解更多信息
