阅读681 返回首页    go 阿里云 go 技术社区[云栖]

精通css（5）-布局

css布局被认为是一个很麻烦的东西，可能它本身并不复杂，只是浏览器的不一致让人觉得很头疼。对于初学者来说或许框架能更快的得到想要的结果，但这种傻逼的使用方式蒙蔽了布局的内部原理，这是非常可怕的！

所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操控（喵了个咪的，怎么又是3个）。下面开始写代码（一定要自己写一遍）。

1.浮动布局

貌似浮动布局是最简单也是最可靠的，先来一个简单的两栏布局，页面居中：

代码方案：

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/
body{
	text-align: center;/*IE6君认为该属性让所有的东西都居中*/
}
.wrapper{
	width: 960px;
	margin: 0 auto;
	text-align: left;/*调整text-align为左对齐*/
}
.header,.footer{
	height: 60px;
	background-color: #9a2;
}
.leftbar{
	width: 200px;
	float: left;
	background-color: #00f;
}
.content{
	width: 740px;/*空出20px作为隔离带*/
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
</style>
</body>
</html>


 然后再来个三栏布局，只要稍微改一下代码：

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<div >
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
			</div>
			<div >
				<p>right</p>
				<p>right</p>
			</div>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/
body{
	text-align: center;/*IE6君认为该属性让所有的东西都居中*/
}
.wrapper{
	width: 960px;
	margin: 0 auto;
	text-align: left;/*调整text-align为左对齐*/
}
.header,.footer{
	height: 60px;
	background-color: #9a2;
}
.leftbar{
	width: 200px;
	float: left;
	background-color: #00f;
}
.content{
	width: 740px;/*空出20px作为隔离带*/
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
/*在content内部再分浮动，形成3栏布局*/
.main-content{
	width: 600px;
	float: left;
	background-color: #7621de;
}
.rightbar{
	width: 120px;
	float: right;
	background-color: #b23aa2;
}
</style>
</body>
</html>
效果图：


浮动布局的方法有很多，用起来也特别方便。虽然效果图是挫了点，但不要在意这些细节，这不是重点。。。

2.固定宽度、流式和弹性布局

2.1固定宽度布局

固定宽度布局就是以像素为单位的布局，上面的两个例子都是固定宽度布局。这种布局的好处是知道每个元素的精确宽度，非常方便。坏处就是在不同分辨率的显示器下会出现显示溢出或者大量空白。随着屏幕尺寸的多样化，外加移动web的需求，固定宽度布局常常被认为是糟糕的权益之计。

2.2流式布局

流式布局的灵活性更大，因为它采用的是百分数布局。这样随着不同窗口大小可以进行伸缩。一般还会添加以像素或em为单位的min-width来防止布局变得太窄。（有关min-width和min-height与浏览器兼容性问题，请戳这里：点击打开链接）。

在这里再总结一下px和em的关系。px是按像素计算的绝对单位。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px)。

那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：

  • em的值并不是固定的;
  • em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意几点：

  • body选择器中声明Font-size=62.5%;
  • 将你的原来的px数值除以10，然后换上em作为单位;
  • 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问 题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。

2.3弹性布局

虽然流式布局比固定布局好，但是当分辨率过大时行会过长，窗口太窄时行会很短。对于这个问题，弹性布局可能是一种解决方案。

弹性布局相对于字号来设置元素的宽度，而不是浏览器宽度。以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<div >
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
			</div>
			<div >
				<p>right</p>
				<p>a a a a</p>
			</div>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/
body{
	text-align: center;/*IE6君认为该属性让所有的东西都居中*/
}
.wrapper{
	font-size: 62.5%;/*调整字号为默认16px的62.5%，使10px=1em，方便计算*/
	max-width: 95%;
	width: 96em;
	margin: 0 auto;
	text-align: left;/*调整text-align为左对齐*/
}
.header,.footer{
	height: 6em;
	background-color: #9a2;
}
.leftbar{
	width: 20%;
	float: left;
	background-color: #00f;
}
.content{
	width: 78%; 
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
/*在content内部再分浮动，形成3栏布局*/
.main-content{
	width: 80%;
	float: left;
	background-color: #7621de;
}
.rightbar{
	width: 18%;
	float: right;
	background-color: #b23aa2;
}
</style>
</body>
</html>

上面只是以em为容器单位，但内部div使用的仍然是百分比。这样内部宽度仍然是相对字号的，可以很方便的修改布局的总尺寸，不必修改每个宽度的尺寸。



最后更新：2017-04-03 14:54:04

  上一篇：go java 把64位long，转成2个32位的Int，再回转成long
  下一篇：go Android BadgeView使用介绍 （数字提醒提示）