css布局面试题及答案2019

在2019年的前端面试中，CSS布局常常被问及，下面是一些常见的CSS布局面试题及答案。

问：谈谈你对盒模型的理解。

答：盒模型即元素盒模型，是CSS中规定的元素显示模型。元素盒模型由元素本身、内边距、边框和外边距四部分组成。可以通过CSS的Box-sizing属性来控制盒模型的大小计算方式，有content-Box和border-Box两种计算方式。

问：使用Flex布局实现左右两列等高布局。

答：HTML代码：
<div class="flex-container">
  <div class="left-column"><p>Left Column</p></div>
  <div class="right-column"><p>Right Column</p></div>
</div>

CSS代码：
.flex-container{
  display: flex;
}
.left-column,.right-column{
  flex: 1;
}

问：什么是浮动？如何清除浮动？

答：浮动是CSS中一个常见的定位方式，用于将元素向左或向右移动，使其脱离文档流，从而达到其他元素环绕的效果。浮动可以通过CSS的float属性实现。浮动元素会对于其父元素造成高度塌陷的效果，需要通过清除浮动的方式来避免，常见的清除浮动的方法有：添加清除浮动的伪元素、使用overflow属性、使用clear属性等。

问：CSS中如何实现居中布局？

答：可以通过以下几种方式实现居中布局：
1、水平居中：使用text-align属性来让其内部元素水平居中；
2、垂直居中：使用line-height或vertical-align属性来让其内部元素垂直居中；
3、水平垂直居中：使用position和transform属性结合，或使用flex布局来实现居中。

以上就是一些常见的CSS布局面试题及答案，供大家参考。