前端面试题之CSS

摘要

盒模型分为W3C的标准模型和IE模型
盒模型又称为框模型，包含了元素内容（content）、内边距（padding）、外边距（margin）、边框（border）
如图：

两种盒模型

盒模型分为W3C的标准模型和IE模型
盒模型又称为框模型，包含了元素内容（content）、内边距（padding）、外边距（margin）、边框（border）
如图：

W3C的标准模型：width/height属性指content

IE模型：width/height属性由content+padding+border组成

这两种模型的区别就是计算的宽度和高度不同

通过CSS3新增的属性box-sizing:content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）
W3C的标准模型：

<div class="content-box"></div> 

.content-box {   box-sizing: content-box;   width: 100px;   height: 100px;   padding: 20px;   border: 5px solid red;   margin: 10px; } 

其中：width=100px

---

IE模型：

    <div class="border-box"></div> 

.border-box {   box-sizing: border-box;   width: 100px;   height: 100px;   padding: 20px;   border: 5px solid red;   margin: 10px; } 

其中：width= content + 2padding + 2border = 100px

相对比较而言：border-box更好用！！！

扩展：JS如何设置获取盒模型对应的宽和高呢？

dom.style.width / height;   // 设置获取的是内联样式 dom.currentStyle.width / height;   // IE支持 window.getComputedStyle(dom).width / height;   // 兼容性好 dom.getBoundingClientRect().width / height;   // 计算一个元素的绝对位置 

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器的部分标签默认值都是不同的，如果没有对CSS样式初始化会出现各个浏览器之间的页面显示差异。

对CSS样式初始化后会对SEO有一定的影响，所以力求影响最小的情况下进行初始化。

最简单也不建议初始化的方式：

* {   margin: 0;   padding: 0; } 

如何垂直居中

传送门 - CSS实现垂直居中的几种方法

flex怎么用，常用属性有哪些

传送门 - Flex布局讲解

display:none;与visibility:hidden;有什么区别呢

display:none;：隐藏对应的元素，在文档布局中不再分配空间

visibility:hideen;：隐藏对应的元素，在文档布局中仍保留原来的空间

使用display:none;属性后，HTML元素（对象）的宽度、高度等各种属性值都将丢失；而使用visibility:hideen;属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

BFC是什么，举例回答

概念

BFC，全称Block Formatting Context，意为块格式化上下文。
BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

以下方式会创建块格式化上下文：

• 根元素()
• 浮动元素（元素的float不是none）
• 绝对定位元素（元素的position为absolute或fixed）
• 行内块元素（元素的display为inline-block）
• 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）
• overflow值不为visible的块元素
• display值为flow-root的元素
• contain值为layout、content或paint的元素
• 弹性元素（display为flex或inline-flex元素的直接子元素）
• 网格元素（display为grid或inline-grid元素的直接子元素）
• 多列容器（元素的column-count或column-width不为auto，包括column-count为1）
• column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

特性与功能

清除浮动

<div class="parent">     <div class="child1"></div>     <div class="child2"></div>     <div class="child3"></div> </div> 

.parent {   width: 400px;   border: 1px solid red;      /*给parent创建了BFC*/   overflow: hidden;  } .child1, .child2, .child3 {   width: 100px;   height: 100px;   background-color: blue;   float: left; } .child1 {   background: purple; } .child2 {   background: yellow; } 

未添加overflow: hidden;时：

添加后创建了BFC：

解决外边距合并问题

<div class="container">     <p>1</p> </div> <div class="container">     <p>2</p> </div> 

.container {   overflow: hidden; } p {   width: 100px;   height: 100px;   background: red;   margin: 50px; } 

未在父元素添加overflow: hidden;时：

添加后：

实现两列自适应布局

<div class="parent">     <div class="left">左</div>     <div class="right">右</div> </div> 

.parent {   width: 400px;   height: 400px;   border: 1px solid red; } .left {   width: 100px;   height: 100px;   background-color: blue;   float: left; } .right {   height: 300px;   background-color: yellow;   overflow: hidden; } 

未在第二个子元素添加overflow: hidden;时：

添加后：

特性

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗来讲，可以把BFC理解为一个封闭的箱子，箱子内部的元素无论如何改变，都不会影响到外部。

CSS选择器的优先级

1. 越具体优先级越高；
2. 写在后面的覆盖前面的；
3. !important，最高，但是要少用！！！

如何清除浮动

方法一

为float后的元素添加clear属性

  <div class="a">a</div>   <div class="b">b</div>   <div class="c">c</div> 

.a, .b {   width: 100px;   height: 100px;   border: 5px solid red; } .b {   float: right; } .a {   float: left; } .c {   border: 5px solid blue;   height: 100px;   clear: both; } 

方法二

给父容器添加clearfix的class，用伪元素clearfix::after设置样式，清除浮动。

<div class="parent clearfix">     <div class="a">a</div>     <div class="b">b</div> </div> 

.parent {   border: 5px solid red; } .a, .b {   width: 100px;   height: 100px;   border: 5px solid blue; } .a {   float: left; } .b {   float: right; } .clearfix::after {   content: '';   display: block;   clear: both; } 

方法三

给父容器添加overflow:hidden或者auto

<div class="parent">     <div class="a">a</div>     <div class="b">b</div> </div> 

.parent {   border: 5px solid red;   overflow: auto; } .a, .b {   width: 100px;   height: 100px;   border: 5px solid blue; } .a {   float: left; } .b {   float: right; } 

em与rem

传送门 - 动态REM

用纯CSS创建一个三角形

CSS代码如下：

.triangle {   width: 0;   height: 0;   border-width: 40px;   border-style: solid;   border-color: transparent transparent red transparent; } 

点击预览?