CSS2与CSS3布局方式比较

最新推荐文章于 2023-04-13 17:03:27 发布

fengyinchao

最新推荐文章于 2023-04-13 17:03:27 发布

阅读量1k

点赞数 1

分类专栏： Web前端开发文章标签： CSS3布局

本文链接：https://blog.csdn.net/fengyinchao/article/details/46731161

版权

Web前端开发专栏收录该内容

44 篇文章 1 订阅

订阅专栏

1、先给出共同的HTML代码（只有引入的css样式表不同）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css3.css"/>
	</head>
	<body>
		<div id="container">
			<div id="left-sidebar">
				<h2>左侧边栏</h2>
				<ul>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
				</ul>
			</div>
			<div id="contents">
				<h2>内容</h2>
				<img src="img/1.jpg"/>
				<p>实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字
					实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文
					字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例
					文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实
					例文字实例文字实例文字</p>
			</div>
			<div id="right-sidebar">
				<h2>右侧边栏</h2>
				<ul>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
					<li><a href="">超链接</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

2、在CSS2中的布局代码及效果图

#left-sidebar{
	float: left;
	width: 200px;
	padding: 20px;
	background-color: orange;
}
#contents{
	float: left;
	width: 300px;
	padding: 20px;
	background-color: yellow;
}
#right-sidebar{
	float: left;
	width: 200px;
	padding: 20px;
	background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

效果图：

3、在CSS3中的布局代码及效果图

#container{             //这部分是新加的，主要是用到CSS3中的box属性
	display: -moz-box;
	display: -webkit-box;
}
#left-sidebar{            //删除了float
	width: 200px;
	padding: 20px;
	background-color: orange;
}
#contents{            <span style="font-family: Arial, Helvetica, sans-serif;">//删除了float</span>
	width: 300px;
	padding: 20px;
	background-color: yellow;
}
#right-sidebar{         <span style="font-family: Arial, Helvetica, sans-serif;">//删除了float</span>
	width: 200px;
	padding: 20px;
	background-color: limegreen;
}
#left-sidebar,#contents,#right-sidebar{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

效果图