us apple developer accounts for sale:面试官问:你有若干种方式实现三栏结构?

admin 3个月前 (07-06) 科技 37 0

一、什么是三栏结构

  三栏结构即左右元素牢固宽度,中央元素自适应。代表结构有圣杯结构和双飞翼结构,固然另有其他方式可以实现,下面是详细先容。

二、实现方式

  1.自身浮动  

    元素顺序:中央盒子必须放在最后,左右元素随便排列
    原理:左边元素左浮动 右边元素右浮动
    瑕玷:当浏览器宽度不足以容纳三个元素时,中央元素不消逝,最右侧的元素会被挤到第二排。浮动对后续元素影响较大(使用时一定要消灭浮动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				height: 600px;
				width: 100%;
			}
			.left{
				width: 160px;
				height: 100px;
				background-color: #000;
				float: left;
			}
			.right{
				width: 480px;
				height: 100px;
				background-color: red;
				float: right;
			}
			.middle{
				width: 100%;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left"></div>
			<div class="right"></div>
			<div class="middle"></div>	
		</div>
	</body>
</html>

  2.绝对定位

    元素顺序:随便摆放即可
    原理:将左右双方使用absolute定位,中央元素使用margin预留左右元素的宽度
    瑕玷:当浏览器页面不足以容纳三个元素时,中央元素会宽度减小(最小到0),右侧元素会笼罩到左侧元素上。两侧高度无法支持总高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				height: 600px;
				width: 100%;
				position: relative;
				margin: 0;
			}
			.left{
				width: 260px;
				height: 100px;
				background-color: #000;
				position: absolute;
				top: 0;
				left: 0;
			}
			.right{
				width: 280px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 0;
				right: 0;
			}
			.middle{
				height: 100px;
				background-color: blue;
				margin: 0 280px 0 260px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left"></div>
			<div class="right"></div>
			<div class="middle"></div>	

		</div>
	</body>
</html>

  3.函数盘算    

    元素顺序:无要求
    原理:使用calc函数,盘算父元素的宽度减去左右元素的宽度
    瑕玷:存在兼容性问题,需要IE9+才可以正常使用。元素采用了浮动,对后续元素有影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				overflow: hidden;
			}
			.left,.right{
				float: left;
				height: 100px;
				width: 100px;
				background:red;
			}
			.center{
				float: left; 
				height: 100px;
				width:calc(100% - 200px);
				background:yellow;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">left</div>
	        <div class="center">center</div>
	        <div class="right">right</div>
	    </div>
	</body>
</html>

  4.表格结构

    元素顺序:中央元素必须在两个div之间
    原理:父元素设置display:table,子元素设置display:table-cell
    瑕玷:兼容性IE8+,不利于SEO

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>表格结构</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.main{
				width:100%;
				display:table;
			}
			.main> div{
				height:200px;
				display:table-cell;
			}
			.left{
				width:100px;
				background-color: black;
			}
			.middle{
				background-color:red;
			}
			.right{
				width: 200px;
				background-color: blue;

			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left"></div>
			<div class="middle"></div>
			<div class="right"></div>
			
				
		</div>
		
	</body>
</html>

  5.圣杯结构(重点,面试常问)

    元素顺序:中央元素位于开头,左右元素无要求
    原理:父元素使用padding预留左右元素的位置,三个元素浮动,左元素使用margin负值和相对定位调整位置,右元素用margin负值调整位置
    瑕玷:中央部门宽度小于左侧时,结构杂乱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
		*{
			margin: 0;
			padding: 0;
		}
		.main {
			height: 600px;
			padding: 0 100px;/* 左右元素的宽度决议 */
			
		}

		.middle {
			width: 100%;
			height: 100px;
			background-color: blue;
			float: left;
		}

		.left{
			width: 100px;
			height: 100px;
			background-color: #000;
			margin-left: -100%;
			position: relative;
			float: left;
			right: 100px;/* 自身宽度 */
			
		}
		.right {
			width: 100px;
			height: 100px;
			background-color: red;
			margin-right: -100px;/* 自身宽度 */
			float: left;
		}
		
		</style>
	</head>
	<body>
		<div class="main">
		    <div class="middle">main</div>
		    <div class="left">left</div>
		    <dvi class="right">right</div>
		</div>
	</body>
</html>

  6.双飞翼结构(重点,面试常问)

    元素顺序:中央元素位于开头,左右元素无要求
    原理:在中央元素内部建立子元素,子元素设置margin(值是左右元素的宽),用来预留左右元素的位置。左中右元素都设置浮动,左右元素设置margin负值
    瑕玷:增加了DOM节点,加大了渲染树天生的盘算量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双飞翼结构</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.col{
				float: left;
			}			
			#main {
				width: 100%;
				height: 200px;
				background-color: #ccc;
			}			
			#main-wrap {
				margin: 0 190px;/*这是圣杯和双飞翼最显著的区别,在main内部使用的是margin,而圣杯是直接在container部门使用padding*/		
			}	
			#left{
				width: 190px;
				height: 200px;
				margin-left: -100%;
				background-color: #0000FF;
			}		
			#right {
				width: 190px;
				height: 200px;
				margin-left: -190px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="container">
		    <div id="main" class="col">
		        <div id="main-wrap"> #main </div>
		    </div>
		    <div id="left" class="col">#left</div>
		    <div id="right" class="col">#right</div>
		</div>
	</body>
</html>

  7.flex结构(重点,面试常问)

    元素顺序:无要求
    原理:父元素设置flex,中央元素设置flex:1
    瑕玷:flex有兼容性问题,IE11+支持较好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		   *{
			   margin: 0;
			   padding: 0;
		   }
			#box{
				width:100%;
				height:100px;
				display:flex;
			}
			#left,#right{
				width:200px;
				height:100px;
				background-color:blue;
			}
			#center{
				flex:1;
				height:100px;
				background-color:#f00;
			}

		</style>
	</head>
	<body>
		<div id="box">
			<div id="left">left</div>
			<div id="center">center</div>
			<div id="right">right</div>
		</div>
	</body>
</html>

  8.网格结构

    元素顺序:中央元素必须在两个div之间
    原理:父元素设置display:grid,使用grid-template-rows界说行高,使用grid-template-columns界说列宽即可
    瑕玷:兼容性IE10+

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>表格结构</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.main{
				width:100%;
				display:grid;
				grid-template-rows: 100px;
				grid-template-columns: 300px auto 300px;
			}
			.left{
				background-color: black;
			}
			.middle{
				background-color:red;
			}
			.right{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left"></div>
			<div class="middle"></div>
			<div class="right"></div>
			
				
		</div>
		
	</body>
</html>

三、总结

  上面一共列举了8中方式去实现三栏结构,也列出了他们各自的瑕玷,效果图我就不放了,cv代码自己运行一下就可以了。博主小我私家以为,若是在不思量兼容性的情况下,一定选择后四种是比较好的,固然还可能有其他实现方式,迎接人人谈论、留言

  ps:面试可能会问你若是中央元素需要优先加载,最好是选择方式5、6、7。由于他们的中央元素都是在左右元素的前面的

  

,

皇冠APP下载

:www.huangguan.us是一个提供皇冠代理APP下载、皇冠会员APP下载、皇冠体育最新登录线路、新2皇冠网址的的体育平台。新皇冠体育官网是多年来值得广大客户信赖的平台,我们期待您的到来!

Sunbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:us apple developer accounts for sale:面试官问:你有若干种方式实现三栏结构?

网友评论

  • (*)

最新评论

文章归档

站点信息

  • 文章总数:642
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1010
  • 评论总数:267
  • 浏览总数:7544