css流式布局

最新推荐文章于 2025-07-04 10:05:47 发布

啊哈前端

最新推荐文章于 2025-07-04 10:05:47 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/wuzhe128520/article/details/54290083

css3 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了如何将HTML结构中的固定像素宽度转换为百分比宽度，以实现CSS流式布局。内容涉及转换公式：目标元素宽度除以上下文元素等于百分比宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}