再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)

布局真的很重要。一个不好的布局后期会有很多很多的bug，就像是建房子的地基一样。

首先，再一次地圣杯布局的学习，来源于该教程： http://www.jianshu.com/p/f9bcddb0e8b4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
		}
		.container{
			height: 200px;
			/*overflow: hidden;*/
		}
		.middle{
			width: 100%;
			height: 200px;
			background-color: #f23244;
			float: left;
		}
		.left{
			width: 200px;
			height: 200px;
			background-color: blue;
			float: left;
		}
		.right{
			width: 200px;
			height: 200px;
			background-color: yellow;
			float: left;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="middle">我是中间弹性区</div>
		<div class="left">我是左边栏</div>
		<div class="right">我是右边栏</div>
	</div>
</body>
</html>

以上是其中的一部分，剩下的一部分为：

	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
		}
		.container{
			height: 200px;
			overflow: hidden;
			padding: 0 200px;
		}
		.middle{
			width: 100%;
			height: 200px;
			background-color: #f23244;
			float: left;
			}
		.left{
			position: relative;
			left: -200px;
			margin-left: -100%;
			width: 200px;
			height: 200px;
			background-color: blue;
			float: left;
		}
		.right{
			position: relative;
			right: -200px;
			margin-left: -200px;
			width: 200px;
			height: 200px;
			background-color: yellow;
			float: left;
		}
	</style>

写的太少，终究还是磕磕绊绊。

这就完了吗？？？并没有，我们的自适应测试开始了，于是我们也发现了bug，当页面小到一定程度的时候，两边的东西都没了，当然这是我们设置了 overflow:hidden 的缘故

在这里，我们可以直接通过在 container 中设置 min-width:700px 直接解决。

其次，我们看到那篇文章下方的评论，确实不错，首先是我们这个 relative 定位是否必要呢？可以不要的。

我们可以在 container 中加入 box-sizing:border-box 这样的话我们的 padding值就会从 外扩 变成 内缩，之后去掉relative也会是对的了。

在这里严肃更正一下，box-sizing是必须加的东西，否则你在刚开始看到时候好像是正确的，但其实，当你缩小了界面之后，其实就是错的了，我会将正确的代码放在下面。问题出在哪里呢

问题出在我们上面加的 min-width:700px上，我们来看看完整的代码。

		.container{
			height: 200px;
			/*overflow: hidden;*/
			padding: 0 200px;
			/*box-sizing: border-box;*/
			min-width: 700px;
		}

当我们没有box-sizing:border-box;的时候，内边距是外扩的，这个时候的 min-width其实只是指中间栏的长度，而我们想要的是整个可视宽度变为 700px 的时候。

	let oRight=document.getElementsByClassName("right")[0];
	let oMiddle=document.getElementsByClassName("middle")[0];
	const onWindowResize=()=>{
		console.log("window的宽度为：",document.body.clientWidth);
		console.log("中间栏的宽度为：",oMiddle.offsetWidth);
	}
	window.addEventListener('resize',onWindowResize);

我写了一个测试函数，通过以上测试能够证明以上说法的正确性。

之后我们还可以继续简化我们的代码。使用自动计算属性calc，这就是我们公司高手用的方式，虽然我暂时还不会用，但是通过阅读代码也是知道了有这么一种方法。我们先来写一段简单的代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.middle{
			width: calc(100% - 400px);
			margin:0 auto;
			height: 300px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="middle"></div>
	<div class="left"></div>
	<div class="right"></div>
</body>
</html>

真的好简单啊，就这样看起来的话。听说这种写法 对性能有损耗（但是现在是个性能过剩的时代，这个真的要紧吗？？？接着是兼容性问题，这个IE9以上和chrome等是能用的？ IE8，再见吧）
下面我根据网上的教程也DIY了一个自适应布局，用的是calc的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul,li{
			list-style: none;
		}
		body{
			background-color: #e8eadd;
			color: #3c323a;
			padding: 20px;
		}
		.wrap{
			width: calc(100% - 40px);
			margin: auto;
			background-color: yellow;
			min-width: 300px;
		}
		header{
			margin: 0 auto;
			padding: 20px;
			width: calc(100% - 40px);
			background-color: blue;
			color: #fff;
		}
		main{
			border:8px solid #b8c172;
			float: left;
			margin-right: 20px;
			padding: 20px;
			width: calc(75% - 20px*2 - 8px*2);
		}
		aside{
			border:8px solid #b8c172;
			float: left;
			padding: 20px;
			width: calc(25% - 20px*2 - 8px*2 - 20px);
		}
		footer{
			clear: both;
			background-color: #000;
			width: 984px;
			width: calc(100% - 40px);
			padding: 20px;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<header>
			<h1>I'm header.</h1>
		</header>
		<main>
			<h1>古诗</h1>
			<p>春水碧于天</p>
		</main>
		<aside>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</aside>
		<footer>
			<h5>I'm footer.</h5>
		</footer>
	</div>
</body>
</html>

接下来这个是使用了 box-sizing 的写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
		body:after{
			content: "";
			width: 0;
			height: 0;
			display: block;
			visibility: hidden;
		}
		.header,
		.footer{
			width: 100%;
		}
		.header,
		.left,
		.content,
		.right,
		.footer{
			box-sizing: border-box;
			border: 10px solid #000;
		}
		.left,
		.content,
		.right{
			float: left;
			height: calc(100% - 240px);
		}
		.header{
			height: 100px;
			background-color: red;
		}
		.footer{
			position: absolute;
			bottom: 0;
			height: 100px;
			background-color: yellow;
		}

		.left{
			margin: 20px 0;
			background-color: green;
			width: 100px;
		}
		.content{
			margin: 20px 20px;
			width: calc(100% - 240px);
			background-color: #832333;
		}
		.right{
			margin: 20px 0;
			width: 100px;
			background-color: #666;
		}
	</style>
</head>
<body>
	<div class="header">header</div>
	<div class="left">left</div>
	<div class="content">content</div>
	<div class="right">right</div>
	<div class="footer">footer</div>
</body>
<script type="text/javascript">
	// 需要注意的是那个 body和html 部分，需要这样写  
	// html,body{width:100%;height:100%}
	// 
</script>
</html>

这里主要需要注意的是，body和html需要设置 width 和 height 为 100%。

posted @ 2017-08-29 10:15  海客无心x  阅读(1179)  评论(0)  编辑  收藏  举报