在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
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开发框架推荐
相关推荐 更多
HTML5开发工具哪个好?前端必备工具推荐
HTML5作为前端开发中十分重要的部分，深受前端工程师的喜爱和欢迎。都说工欲善其事必先利其器。想要更好的完成在HTML5开发，好用的工具少不了。下面给大家推荐10款前端必备的HTML5开发工具，它们分别是Lungo、Animatron、DCloudHBuilder、mobl、Initializr、WebStorm、Notepad++、Dreamweaver、Eclipse和DevExtreme。
6106
2019-10-09 19:10:15
前端开发CSS清除浮动的方法有哪些？
在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素（float为left或right），此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢？
6523
2019-10-30 18:55:42
精通HTML5+CSS3需要学什么？
主要学习vscode编辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。需要掌握HTML5+CSS3新特性，使用HTML5+CSS3实现炫酷动画效果，熟悉VSCode编辑器基本使用。
4999
2020-01-03 18:37:47
前端开发工程师的必修课——网站重构
网站重构并不是前端开发中的技术，也不是某种标准，而是一种网站前端的理念，也就是我们所理解的页面优化。网站重构是指在不改变网页整体UI设计以及网站外部相关行为的基础上，对整个网站/页面进行优化，让网站的结构更加简单，可读性更强，从而更加有利于搜索引擎的检索，增加搜索引擎对网站的收录，提升网站的排名。网站重构相对于web开发工作而言，更注重用户体验的设计。
4819
2020-08-07 10:30:22
北京前端培训班哪家好？怎么选？
北京前端培训班哪家好？对于学生而言最重要的是技术知识，如何学会，如何把学到的技术运用到项目中去，如何在培训期间实操更多的实战项目，这些硬技能才能成为培训完以后面试时的核心竞争力，选择北京前端培训班时一定要重点考察课程更新、项目实战、师资力量这三个方面。
3962
2021-03-26 14:52:05
