前端学习：面试问到某某布局时的回答思路

专门写个文章提醒自己思考顺序，每次问到布局脑子就开始蒙开始混乱，千万不要败在布局上

一、考虑元素是块级元素还是行内元素还是行内块元素，考虑需要多少盒子

• 块级元素自上而下布局，独占一行，可以设置宽高；
• 行内元素从左到右，不能设置宽高，宽高和内容有关（因此高度可以用行高控制），外边距（margin）和内边距（padding）仅设置左右方向有效上下无效；
  -行内块元素高度、行高、外边距以及内边距都可以控制。 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的font-size为0，才会消除间隙
• 注意盒子外边距塌陷的问题，上下塌陷，父子塌陷——解决方法：BFC

二、如果涉及到一行多个盒子，考虑flex布局还是float布局

弹性布局

• 弹性盒子由容器（父元素）和项目（子元素）组成，设置弹性盒子，应从父元素中设置diapaly:flex；在flex眼中众生平等
• 父元素重要的相关属性：
• flex-direction（指定子元素排列方向（主轴），为横向排列还是纵向排列，还可以翻转）
• justify-content设置 主轴上子元素排列的方式（靠左对齐flex-start、靠右对齐flex-end、居中对齐center、平分剩余空间space-around、先两边贴边再平分剩余空间space-between）
• flex-wrap：wrap换行（nowrap不换行）默认不换行
• align-items：设置侧轴上子元素排列方式（具体和justify-content一样）

由此可见，要实现子元素水平垂直居中，可以justify-content和align-items都为center。

• 父元素中出现子项目换行（多行）的情况：
• align-content可以设置侧轴上子元素排列的方式

float布局

• 脱离文档流（盒子坍塌）——解决办法：清除浮动
• 清除浮动
• 为什么要清除浮动？
  浮动的盒子不在文档流中，会导致父盒子的高度变成0。

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题,此时就需要在该元素中清除浮动。

• 如何清除浮动？（三种办法）

1. 在父盒子中，浮动元素最后面加一个空标签，空标签css设置clear:both：

<div style="clear: both;"></div>

clear:both本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。

2. 父元素添加overflow:hidden

原理：通过触发BFC方式，实现清除浮动
什么是BFC？
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
————————————————————————————————
触发BFC的条件及其相关影响：
1、float的值不是none。（float: left 将把元素移至左侧，并被其他元素环绕）
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex（display:
table 可能引发响应性问题）
4、overflow的值不是visible（overflow: scroll
可能产生多余的滚动条、overflow: hidden 将裁切溢出元素）

3. 使用after伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;//重点
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>

4. 使用before、after伪元素

.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>

三、考虑是响应式布局还是自适应布局

flex自适应布局

原来的自适应布局思路是用百分比设置宽高

• flex属性（写在子盒子里），把某个父盒子剩余空间中分n等份。
• align-self控制自己在侧轴上的排列位置，可以结合nth-child来单领出某个子元素。

和高度有关的自适应

高度无法利用百分比来布局，每次涉及到高度的自适应，就开始懵逼

• 相关题目：
• 自适应九宫格布局

题目：在不规定父盒子宽高的情况下（自适应），九宫格布局
思路：子元素高度要和宽度一样，而宽度由百分比实现，因此高度可以使用padding来撑开，子元素padding的百分比高度相对于父级元素（和子元素的宽度一样）
具体实现在另一篇博文

• 自适应高度布局（盒子高度随窗口大小变化而变化）

题目：有两个盒子纵向排列，第一个盒子固定高度，宽度自适应，第二个盒子宽度同上，高度自适应（不能出现滚动条）
思路：绝对定位，利用top和bottom属性来撑开盒子

<div class='father'>
		<div class="div1">宽度为屏幕宽度，高度固定</div>
		<div class='div2'>宽度同上，高度自适应</div>
	</div>

.father{
		display: flex;
		position: relative;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: pink;
	}
	.div1{
		width: 100%;
		height: 100px;
		background-color: red;
	}
	.div2{
		position: absolute;
		top:100px;
		bottom: 0px;
		left:0px;
		width: 100%;
		background-color: blue;
	}

效果：

和左右有关的自适应（规定float布局的情况，一般用flex布局即可解决）

• BFC实现左右两列布局，左边固定，右边自适应

原理：触发BFC可以避免被浮动元素所覆盖，因此给右边的元素设置为BFC（右边元素overflow:hidden），则可以实现以下布局

响应式布局

• 媒体查询
  可以根据不同的媒体（比如screen大小不同）来设置不同的css

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

• em、rem
  （1）em相对于父元素的字体大小
  （2）rem相对于html的字体大小
  举例：

html{
   font-size:12px;
}
div{
   width:10rem;//换算为px单位宽度为10 * 12 = 120px
}

• 可以结合媒体查询改变html的字体大小，从而改变其他元素的大小。

三、考虑定位（Position）

• static（默认）
• relative
• absolute
• fixed
• sticky

四、考虑位移（位置在哪）

• top、bottom、left、right
• transform: translate
• 定位为relative的元素位移相对于自己。
• 定位为absolute的元素位移相对于定位不是static的父级元素。
• 定位为fixed的元素位移相对于窗口。
• 定位为sticky的元素刚开始位移与绝对元素相同，滑动后相对于窗口。

五、考虑内容位置（内容水平垂直居中）

• text-align：center（文本水平居中）
• line-height（设置行高，文本垂直居中）
• margin：auto（内容水平居中）
• vertical-align：middle（垂直居中）
• 定位+margin：绝对定位，left: 50%; top: 50%; margin往左和往上走自己盒子的一半宽度和高度（垂直水平居中）
• 定位+translate：绝对定位，left: 50%; top: 50%; 利用translate走自己盒子一半的高度。

.center { 
         height: 200px; 
         position: relative; 
         border: 3px solid green; 
       } 
       .center p { 
         margin: 0; 
         position: absolute; 
         top: 50%; 
         left: 50%; 
         transform: translate(-50%, -50%); 
       }

• flex布局居中：
• justify-content：center（子元素在主轴方向上居中）
• align-items：center（单行子元素在侧轴方向上居中）
• align-content：center（多行子元素在侧轴方向上的居中）