原创 CSS流式布局 知识讲解

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流式布局的讲解，大家都弄清楚了吗？