2018前端最新 HTML布局 面试题

布局面试
一、flex弹性布局，

• 可以简单的使一个 div 元素居中（包括水平和垂直居中）

CSS片段：
- 水平居中
	.box{
    	display: flex;
    	justify-content:center;
    }
- 垂直居中
	.box{
    	display: flex;
    	width: 500px;
    	height: 20rem;
    	align-items: center;
    }
- 水平垂直居中
	.box{
    	display: flex;
    	width: 500px;
    	height: 20rem;
    	align-items: center;
    	justify-content:center;
    }
HTML片段：
	<div class="box">
    	<p>弹性布局实现元素居中</p>
	</div

• 栅格式系统布局，bootstrap grid
  • 栅格系统是bootstrap中最为重要的部分，它通过

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

这样的形式来实现网页布局，只要调节class="col-md-6"就可以轻松改变单元格区域的排布，如图：

二、圣杯和双飞翼布局 三栏式布局（两边两栏宽度固定，中间栏宽度自适应）

• 方案一：position（绝对定位法） center的div 需要放在最后面
  • 绝对定位法原理将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们的上卖弄，然后margin属性，留出左右两边的宽度。就可以自适应了。
• 方案二：float 自身浮动法 center的div 需要放到后面
  • 自身浮动法的原理就是对左右使用 float：left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，使用margin指定左右外边距对其进行一个定位。
• 圣杯布局：原理就是 margin 赋值法。使用圣杯布局首先需要在center元素外部包含一个div,包含的div需要设置 float 属性使其形成一个BFC，并且这个宽度和margin的赋值进行匹配。

三、左边定宽，右边自适应

• 方案一：左边设置浮动，右边宽度设置100% .left{float:left} .right:{width:100%}

	.left {
    	float: left;
 	}
 	.right {
    	width: 100%
 	}

• 方案二：左边设置浮动，右用cacl去补宽度计算 .left{float:left} .right:{width:cacl(100vw-200px}

	.left {
    	float: left;
  	}
  	.right {
    	width: calc(100vw-200px);
  	}

-【分析】
1、 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）
2、calc() = calc(四则运算) 用于在 css 中动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
3、vw： viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。
浏览器支持情况： 主流浏览器、IE10+
vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。

• 方案三：父容器设置display：flex right部分是设置flex：1

	.contain {
    	display: flex
  	}
  	.right {
    	flex: 1
  	}

• 方案四：右边div套个包裹、并前置、左及包裹 双浮动

CSS 样式：
	.contain{
   		background: pink;
   		float: left;
   		width: 100%;
 	}
 	.left{
   		height: 200px;
   		width: 200px;
   		float: left;
   		margin-left: -100%;
   		background: red;
 	}
 	.right {
   		background: blue;
   		height: 300px;
   		margin-left: 200px;
 	}
HTML 结构：
	<div class="contain">
    	<div class="right">
       		rrr
    	</div>
	</div>
	<div class="left">lll </div>

四、水平居中

• 行内元素的水平/垂直居中

	div{
		text-align:center
	}
	/*DIV内的行内元素均会水平居中*/ 
	div{
		height:30px;
		line-height:30px;
	}
	 /*DIV内的行内元素均会垂直居中*/ 
	 div{
	 	text-align:center;
	 	height:30px;
	 	line-height:30px;
	 } 
	 /*DIV内的行内元素均会水平/垂直居中*/ 

• 块状元素水平/垂直的居中

	div p{
		margin:0 auto; 
		width:500px;
		/*块级元素p一定要设置宽度，才能相当于DIV父容器水平居中*/ 
		height:30px; 
		line-height:30px;
		/*块级元素p也可以加个高度，以达到相对于DIV父容器的垂直居中效果*/ 
	} 

四、BFC：块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的

• 理解：BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素（全局污染）
• 如何生成BFC：（脱离文档流）
  【1】根元素，即HTML元素（最大的一个BFC）
  【2】float的值不为none（生成浮动）
  【3】position的值为absolute或fixed
  【4】overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
  【5】display的值为inline-block、table-cell、table-caption
• BFC布局规则：
  1.内部的Box会在垂直方向，一个接一个地放置。
  2.属于同一个BFC的两个相邻的Box的margin会发生重叠
  3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
  4.BFC的区域不会与float box（浮动的盒子）重叠。
  5.计算BFC的高度，浮动元素也参与计算
• BFC作用：
  1.自适应两栏布局
  2.可以阻止元素被浮动元素覆盖
  3.可以包含浮动元素—清除内部浮动 原理:：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内（当子 div盒子同时处于同一个父div的BFC区域之内，可以实现清除内部浮动）
  4.分属于不同的BFC时，可以阻止margin重叠