css页面布局面试题（CSS面试常见问题）
本篇文章主要是总结几个前端面试常见的CSS面试题，希望对大家的面试有所启示。
一、CSS实现水平居中和垂直居中的方法有哪几种？
1、水平居中
- 行内元素可设置:text-align:center
.son {
display:inline-block;
text-align:center;
}
- margin:0 auto;这种方式的宽度需要固定已知
// 父布局的css 需要设置 overflow:hidden
.father{
width:100%;
height:200px;
overflow:hidden;//不可缺少否则margin-top不生效
}
.son{
width: 100px;
height: 100px;
margin:50px auto ;
}
- table-cell
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
- 弹性布局flex
.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}
- 脱离文档流，操作对象宽度确定
.father{
position:relative;
width:60%;
height:400px;
}
.son{
width:100px;
height:160px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-80px;
}
2、垂直居中
- line-height与height等高
.son {
height:60px;
line-height:60px; // line-height需要和height保持一致
display:inline-height;
}
- flex 【同上】
- table-cell 【同上】
- 脱离文档流，操作对象宽度确定【同上】
二、absolute与fixed共同点与不同点
absoluate和fixed都是position属性的值类型。position规定元素的定位类型，取值类型如下：
- absolute：相对父级的绝对定位，它的定位坐标是针对相对于static定位以外的第一个父元素进行定位。
- fixed：相对整个文档的绝对定位，相对于浏览器窗口进行定位，用法基本与absolute一致。
- relative：相对定位
- static：默认值，无定位类型，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
- sticky：粘性定位
- inherit：继承父类定位类型。
fixed和absoluate相同点：
- 脱离文档流
- 覆盖非定位元素，上层显示
fixed和absoluate不同点：
- 相对定位的父级不同，fixed相对根节点，absoluate选择对于static定位以外的第一个父元素进行定位。
- 浏览器的滚动条不会影响fixed的定位位置，absoluate会被影响【由于第一个原因导致的】
三、清除浮动的方法
CSS中经常会出现使用了float浮动元素而导致页面中某些元素不能正确地显示。那么如何清除float的浮动带来的副作用呢？
1、在父元素中添加子元素，并为添加的子元素中添加clear，清除浮动
clear的取值如下：
- none：不清除
- left：清除左浮动
- right：清除右浮动
- both：清除父布局内所有元素的浮动
<style>
.clearfix {
clear: both;
}
</style>
<div class="box1">
<div class="content1">content1</div>
<div class="clearfix"></div>
</div>
<div class="box2">
<div class="content2">content2</div>
</div>
2、伪元素清除clearfix
给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
3、使用BFC清除
通过给父元素设置：overflow:auto或者overflow:hidden。让父元素高度被撑起来。
<style>
.wrap{
width:500px;
margin:0 auto;
overflow:hidden;
}
.float{
width:200px;
height:200px;
float:left;
}
.nofloat{
width:300px;
height:150px;
overflow:hidden;
}
</style>
<div class="wrap">
<div class="float">浮动</div>
<div class="nofloat">清除浮动</div>
</div>
四、什么是BFC?
BFC的官方定义是：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单点来说就是帮我们帮BFC内的元素和BFC外的元素进行隔离，使其不会影响到外部元素。
BFC类型：
- 浮动元素（float不为none）
- 根元素（HTML）
- 绝对定位元素（ position 为 absolute 或 fixed）
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- flex布局
- overflow指定非visible的值
五、CSS和sass、LESS有什么区别？
CSS（层叠样式表）是一门非程序式语言，SASS是使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。LESS受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。简单点说就是less、sass是属于编译型CSS，需要通过编译最终生成CSS。区别如下：
- sass和less是编译型css,需要编译生成CSS
- sass、less有更为灵活的变量、函数方式实现配置化样式
- sass、less可以嵌套编写，隔离同名样式影响，减少代码量
六、rem 和 em 的区别?
em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置就参照父容器的字号大小或浏览器默认字号大小。rem是CSS3的新标准也是一种相对长度单位，其相对于html根标签的字号大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 20px;
}
#box{
width: 10rem;
height: 10rem;
background: red;
font-size:12px;
}
.remFont {
font-size:1rem;
}
.emFont {
font-size:1em;
}
</style>
</head>
<body>
<div id="box">
<div class="remFont">字体大小20px</div>
<div class="emFont">字体大小12px</div>
</div>
</body>
</html>
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
