网页布局

最新推荐文章于 2021-06-18 00:49:19 发布

C_MA

最新推荐文章于 2021-06-18 00:49:19 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/crisisMars/article/details/52176837

版权

写页面第一头疼的问题就是布局。

我这个人有时候拧巴起来自己都害怕，总是不愿意用某些css属性，为了只好这个怪癖，爷决定写博客！！！！呵呵哒。

这是第一篇，后续会跟进，一天一篇，自己期待，嘎嘎。

第一篇传统布局之两栏式布局

原则：兼容IE8+、360 6+、360极速浏览器、chrome、firefox、opera、safari

目的：比较各种写法

方法一、float 布局

构建最初样子： IE11

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏式布局</title>
	<style type="text/css">
		* {box-sizing:border-box;}
		body{margin:0;padding:0; font:18px/1.5 "Microsoft Yahei"; color:#222222;}
		.header{width:100%; height:60px; background-color: #dedede;}
		.footer{width:100%;padding:15px; background-color: #dedede;color:#999999;font-size: 14px;text-align: center;}
		.main{width:100%; padding: 30px 5%;}
		.left,.right{<strong><span style="background-color: rgb(255, 255, 51);">display:inline-block;</span></strong>min-height: 200px;}
		.left{width:30%; background-color: rgba(0,0,0,.23);}
		.right{width:70%; background-color: #0088ff;}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer">created by C爷. @20160810 22:35</div>
</body>
</html>

原因就是display:inline-block;会有空隙，导致两个块连带空隙加起来超过100%而换行。先不讲display:inline-block;的空白问题。

一般这种时候我就开始拧巴，我就是要display:inline-block;然后就一直一直试，然后就呵呵哒。

其实最初的时候，我是非常喜欢在布局上使用float的，感觉怎么用怎么舒服，舒服到后面滥用至无法直视。。。

float会将元素带离常规文档流，display:inline-block;的空隙问题不再是问题，因为已经不在一个层面上：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏式布局</title>
	<style type="text/css">
		* {box-sizing:border-box;}
		body{margin:0;padding:0; font:18px/1.5 "Microsoft Yahei"; color:#222222;}
		.header{width:100%; height:60px; background-color: #dedede;}
		.footer{width:100%;padding:15px; background-color: #dedede;color:#999999;font-size: 14px;text-align: center;}
		.main{width:100%; padding: 30px 5%;}
		.left,.right{display:inline-block;min-height: 200px;<span style="background-color: rgb(255, 255, 102);"><strong>float: left;</strong></span>}
		.left{width:30%; background-color: rgba(0,0,0,.23);}
		.right{width:70%; background-color: #0088ff;}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer">created by C爷. @20160810 22:35</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏式布局</title>
	<style type="text/css">
		* {box-sizing:border-box;}
		body{margin:0;padding:0; font:18px/1.5 "Microsoft Yahei"; color:#222222;}
		.header{width:100%; height:60px; background-color: #dedede;}
		.footer{ <span style="background-color: rgb(255, 255, 51);">clear:both;</span>width:100%;padding:15px; background-color: #dedede;color:#999999;font-size: 14px;text-align: center;}
		.main{width:100%; padding: 30px 5%;}
		.left,.right{display:inline-block;min-height: 200px;float: left;}
		.left{width:30%; background-color: rgba(0,0,0,.23);}
		.right{width:70%; background-color: #0088ff;}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer">created by C爷. @20160810 22:35</div>
</body>
</html>

真是问题一个接着一个啊。

这是你会发现，对footer设置margin-top也是没用的。这可咋办捏？

我们给.main添加一个最小高度：min-height: 260px;发现哎哟padding-bottom出来了：

这就是我现在不爱float的原因，你总是得格外留意元素的高度问题，可是原本高度就不应该被过分关注。

待续。。。

方法二、position布局

方法三、display:table布局

方法四、display:flex布局

C_MA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页布局

写页面第一头疼的问题就是布局。我这个人有时候拧巴起来自己都害怕，总是不愿意用某些css属性，为了只好这个怪癖，爷决定写博客！！！！呵呵哒。这是第一篇，后续会跟进，一天一篇，自己期待，嘎嘎。第一篇传统布局之两栏式布局原则：兼容IE8+、360 6+、360极速浏览器、chrome、firefox、opera、safari目的：比较各种写法方法一
复制链接

扫一扫