CSS3学习之box-sizing

最新推荐文章于 2024-08-11 20:00:00 发布

何东狮吼

最新推荐文章于 2024-08-11 20:00:00 发布

阅读量963

点赞数

分类专栏： css 文章标签： css class ie 浏览器 safari border

本文链接：https://blog.csdn.net/hedong37518585/article/details/6628485

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>顶部和尾部固定高度，中间自适应</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
html{
	/** 启用IE6的盒模型 **/
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
	padding:80px 0 120px 0;
	overflow:hidden;
}
html,body {
	height:100%;
}
.header{	
	width:100%;
	height:80px;
	position:relative;
	margin-top:-80px;
	background:#CC6666;
	overflow:auto;
}
.content{
	width:100%;
	height:100%;
	background:#006666;
	overflow:auto;
}
.footer{
	width:100%;
	height:120px;
	background:#33CCFF;
	overflow:auto;
}
</style>
</head>

<body>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>
</body>
</html>

上面的代码实现了头部和尾部固定高度，中间内容区域自适应浏览器高度，且各个容器里面内容太多后均出现滚动条

众所周知IE6的盒模型BUG，这里就是利用了IE6的盒模型，因为可以让浏览器帮我们计算出中间区域的高度，也就形成了自适应

W3C标准盒模型 内容+padding+border 3部分组成，内容里面不包含其他

而IE6盒模型只是内容，且border和padding都已经被内容包含于内容

上面代码中间内容区的自适应就是利用了CSS3的新属性box-sizing，这个属性有两个值 border-box 和 content-box

使用content-box就是让盒子按照W3C标准去计算

使用border-box就是让盒子还按照IE6的盒模型计算，即便文档开始有DOCTYPE也按IE6盒模型计算

上面使用了border-box也就是说 padding和border 的改变不影响容器整体的大小，这就使得内容区域自适应大小

最后讲解一下代码的原理，通过设置文档盒模型为IE6的盒模型，然后设置padding上和下分别是80PX和120PX，也就是顶部尾部区域的高度

顶部区域的默认位置应该是距浏览器顶部80PX，所以我把它设置成相对定位并让它相对于默认位置向上偏移80PX，这样视觉上就是0PX

内容区域高度设置成100%，这样浏览器自动帮我们计算出高度，就是文档盒模型高度减去80 再减去120，它的默认位置就是距浏览器顶部80PX

尾部区域只需按照文档流给出的默认位置即可

上面的-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 分别解决了 chrome和safari、firefox、IE8和Opera

而IE6依然是W3C的盒子模型，由于父元素加上了overflow:hidden，所以IE6下双倍padding-bottom已经被隐藏，或者直接给尾部区域加上display:inline也可以消除双倍

现在，一个顶部尾部固定高度，内容区自适应高度的框架就出来了，测试通过IE6 IE8 firefox chrome safari Opera

以上是用body做容器的，下面再贴一个DIV做容器的，方便直接放于其他页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试放入容器</title>
<style type="text/css">
*{  
    margin:0;  
    padding:0;  
}  
html{  
    /** 启用IE6的盒模型 **/  
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}  
html,body {  
    height:100%;  
}  
.box{
	width:100%;
	height:350px;
	padding:80px 0 120px 0;  
    overflow:hidden;  
}
.header{      
    width:100%;  
    height:80px;  
    position:relative;  
    margin-top:-80px;  
    background:#CC6666;  
    overflow:auto;  
}  
.content{  
    width:100%;  
    height:100%;  
    background:#006666;  
    overflow:auto;  
}  
.footer{  
    width:100%;  
    height:120px;  
    background:#33CCFF;  
    overflow:auto;  
}
.imgs{
	width:500px;
	height:550px;
	background:#999999;
	float:left;
}
.news{
	width:200px;
	height:550px;
	background:#336600;
	float:left;
}
</style>
</head>

<body>
<div class="imgs">
	<div class="box">
		<div class="header">1</div>  
		<div class="content">2</div>  
		<div class="footer">3</div>
	</div>
</div>
<div class="news"></div>
</body>
</html>