CSS流式布局 知识讲解

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

 

CSS流式布局 知识讲解

 

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 >

 

<!-- 头部和导航 -->

 

<div >

 

<div >

 

<ul>

 

<li>

 

<a href="#">

 

首页

 

</a>

 

</li>

 

<li>

 

<a href="#">

 

导航一

 

</a>

 

</li>

 

</ul>

 

</div>

 

</div>

 

<!-- 侧边栏 -->

 

<div >

 

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

 

</div>

 

<!-- 内容部分 -->

 

<div >

 

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

 

</div>

 

<!-- 页脚部分 -->

 

<div >

 

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

上一篇:学习CSS


下一篇:自定义滚动条