• 再谈布局,栅栏式自适应布局的学习和实现(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{
    			 100%;
    			height: 200px;
    			background-color: #f23244;
    			float: left;
    		}
    		.left{
    			 200px;
    			height: 200px;
    			background-color: blue;
    			float: left;
    		}
    		.right{
    			 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{
    			 100%;
    			height: 200px;
    			background-color: #f23244;
    			float: left;
    			}
    		.left{
    			position: relative;
    			left: -200px;
    			margin-left: -100%;
    			 200px;
    			height: 200px;
    			background-color: blue;
    			float: left;
    		}
    		.right{
    			position: relative;
    			right: -200px;
    			margin-left: -200px;
    			 200px;
    			height: 200px;
    			background-color: yellow;
    			float: left;
    		}
    	</style>
    

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

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

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

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

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

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

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

    		.container{
    			height: 200px;
    			/*overflow: hidden;*/
    			padding: 0 200px;
    			/*box-sizing: border-box;*/
    			min- 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{
    			 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{
    			 calc(100% - 40px);
    			margin: auto;
    			background-color: yellow;
    			min- 300px;
    		}
    		header{
    			margin: 0 auto;
    			padding: 20px;
    			 calc(100% - 40px);
    			background-color: blue;
    			color: #fff;
    		}
    		main{
    			border:8px solid #b8c172;
    			float: left;
    			margin-right: 20px;
    			padding: 20px;
    			 calc(75% - 20px*2 - 8px*2);
    		}
    		aside{
    			border:8px solid #b8c172;
    			float: left;
    			padding: 20px;
    			 calc(25% - 20px*2 - 8px*2 - 20px);
    		}
    		footer{
    			clear: both;
    			background-color: #000;
    			 984px;
    			 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{
    			 100%;
    			height: 100%;
    			box-sizing: border-box;
    		}
    		body:after{
    			content: "";
    			 0;
    			height: 0;
    			display: block;
    			visibility: hidden;
    		}
    		.header,
    		.footer{
    			 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;
    			 100px;
    		}
    		.content{
    			margin: 20px 20px;
    			 calc(100% - 240px);
    			background-color: #832333;
    		}
    		.right{
    			margin: 20px 0;
    			 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{100%;height:100%}
    	// 
    </script>
    </html>
    

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

  • 相关阅读:
    java.lang.RuntimeException: HRegionServer Aborted的问题
    Solr 读数据流程
    Solr 写数据流程
    solr索引创建流程
    Solr 倒排索引
    Solr 核心组成
    Solr的关键特性
    poj3308 Paratroopers --- 最小点权覆盖-&gt;最小割
    YII 路由配置
    MySQL具体解释(5)-----------函数超全总结
  • 原文地址:https://www.cnblogs.com/can-i-do/p/7446986.html
走看看 - 开发者的网上家园