在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
意见反馈

博学谷 > 资讯

原创 CSS流式布局知识讲解

发布时间：2019-08-02 14:12:38 浏览 8328 来源：博学谷资讯作者：照照

CSS的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其不支持的属性。本文将讲解CSS流式布局，分别从html结构、固定布局样式、将固定布局改为流式布局三个方面来阐述，感兴趣的小伙伴可以继续看下去。

CSS流式布局

1、html结构

<!doctype html>

<head>

</head>

<body>

<ul>

<li>

首页

</a>

</li>

<li>

导航一

</a>

</li>

</ul>

</div>

<p>这里是侧边栏</p>

</div>

<p>这里是内容</p>

</div>

<p>这里是页脚</p>

</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前端技术常见问题

— 申请免费试学名额 —

在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！

上一篇：移动web基础知识介绍学习干货下一篇：手机HMTL5开发框架推荐

相关推荐 更多

学HTML要看什么书？从入门到进阶书籍推荐

学HTML要看什么书？相信刚刚入门前端的小伙伴都会有这样的困惑。本文将向大家推荐HTML从入门到进阶学习全阶段的书籍，看完这些书对大家在前端学习会有很大的帮助。

13486

2019-08-09 09:31:35

HTML5开发常见问题入门书籍
前端如何调用后端接口？有哪几种方式？

一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天我们就来看看，前端如何调用后端接口？有哪几种方式？

27397

2019-10-12 14:30:44

Web开发常见问题
前端开发者如何提升自我能力?对前端开发者的建议

对于众多的前端开发者来说，即使是在工作后也难免时常被这样的问题所困扰，前端开发者要如何提升自我能力?其实前端开发的道路是没有捷径的，只有不断学习和积累经验，向着自己明确的目标规划才是最重要的。下面我们来看看前端开发者具体需要学习的内容和方式。　　

10342

2019-11-14 16:41:42

Web开发常见问题就业前景
北京Web前端工资一般多少？要求高吗？

前端程序员薪酬区间: 3K~50K，大多数人拿10K~15K 工资的占比最多，达28.8%，平均工资17.2K，数据统计依赖于各平台发布的公开薪酬，此数据仅供参考。

13471

2020-09-21 15:27:49

Web开发常见问题就业前景
浏览器标准模式和怪异模式是什么？

浏览器标准模式和怪异模式是什么？标准模式浏览器按照HTML与CSS的标准对文档进行解析和渲染；怪异模式浏览器按照旧有的、非标准的实现方式对文档进行解析和渲染。若存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。

7116

2022-04-15 16:34:34

Web开发常见问题