面试题总结（2）—— CSS

CSS盒模型
CSS选择器优先级
Flex
BFC
定位
外边距合并
清除浮动
img默认inline却可以设置宽高
背景颜色填充
calc属性
z-index属性
重绘和重排
元素隐藏的方法和区别
link标签和import标签的区别
transition和animation的区别
block、inline、inline-block的区别
js动画和css3动画的差异性
三栏布局
两列等高布局
水平垂直居中
用CSS画三角形
用CSS实现正方体旋转效果
多行元素文本省略号

CSS盒模型

IE盒模型： widht = padding + content + border
标准盒模型： width = content
CSS3引入的box-sizeing可以统一盒子模型

CSS选择器优先级

选择器	权重
style	1000
id	0100
class、伪类、属性	0010
标签、伪元素	0001
通配符、子选择器、相邻选择器	0000

!important：优先级最高，当一个元素同时拥有两个!important时，运用计算权重

权重相加比较只适用于同级别，跨级则不适用，如：11 * class < 1 * id

Flex

参考

BFC

块级格式上下文，是一个独立的渲染区域，有一定的布局规则
可以用于清除浮动，消除外边距合并

BFC是页面上一个独立容器，子元素不会影响到外面
计算BFC高度时，浮动元素也会参与计算

生成BFC的条件：

根元素
float不为none的元素
position为fixed或absolute的元素
display为inline-block,table-cell,table-caption,flex,inline-flex的元素
overflow不为visible的元素

定位

position: fixed：相对浏览器窗口定位
position: relative：不脱离文档流，占据其原有位置
position: absolute：相对最近已定位父元素定位，如没有则相对<html>，相对点为相对元素padding至border左上角交界处
position: sticky：开始随文档流布局，超过特定的阈值后固定
float:left：脱离文档流，与absolute的区别是，float脱离文本会环绕

外边距合并

块元素（父子，兄弟）间margin在垂直方向上会重叠

重叠效果为：
相邻外边距都是正数，取最大值
相邻外边距都是负数，取最小值
相邻外边距一正一负，取两者和

清除浮动

添加clear: both
利用BFC

img默认inline却可以设置宽高

img标签默认是inline元素，但是其本身是 可替换元素 ，因此展现效果不是由CSS来控制。即CSS可以影响可替换元素的位置，但是不会影响可替换元素自身的内容。

可替换元素 拥有内置宽高，性质与 inline-block 一致，这些元素的内容都不是通过在标签内添加文本展示，而是通过某个属性或者JS控制显示

典型的可替换元素有

iframe
video
embed
img

背景颜色填充

填充content、padding、border(未单独设置颜色)

calc属性

可以计算任何CSS支持的长度值，如：width: calc(100% - 10px + 1rem)；

z-index属性

只对定位元素适用，决定元素间的覆盖关系
定位规则：

父元素决定子元素，即父元素小于其他元素，子元素大于也无效
负值只在父元素z-index: auto时隐藏子元素
值相同时，后定义的元素在上

重绘和重排

DOM的变化影响到了页面的布局，比如宽高的变化会重新计算元素的几何属性，其他的元素的也会受到影响，因此浏览器需要重新构建渲染树，这个过程称为重排

浏览器将受影响的部分重新绘制在屏幕上的过程称为重绘

重绘不一定导致重排，重排必定导致重绘

元素隐藏的方法和区别

opacity = 0：透明度为0，不会改变布局，会事件触发
visibility = hidden：可见性为隐藏，不会改变布局，不会触发事件
display: none：不渲染元素，会改变布局，不触发事件

link标签和import标签的区别

link 属于html标签，@import是css提供的
页面加载时，link会同步加载，而@import引用的css会等到页面加载结束后加载

注：页面加载结束指DOM构建完成，即DOMContentLoaded触发，无论@import写在css文件中何处，都是如此

transition和animation的区别

transition需要事件触发，animation不需要

block、inline、inline-block的区别

block：独占一行，有自动填满父元素，可以设置margin和padding以及高度和宽度
inline：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效
inline-block：展示类似inline，内容类似block。元素会排成一行显示，可以设置宽高以及边距

js动画和css3动画的差异性

渲染线程分为 main thread 和 compositor thread
main thread 维护一棵 LayerTreeHost 树
compositor thread 维护了一棵 LayerTreeHostImpl 树
两个线程可以互不干扰

如果CSS动画只改变transform和opacity时，动画可以只在 compositor thread 上完成且不layout和paint

因此，在大部分应用场景下，效率角度更值得关注的还是下列问题

是否导致layout
repaint的面积
是否是有高消耗的属性（css shadow等）
是否启用硬件加速

三栏布局

两侧宽度固定，中间自适应
中间优先渲染
允许三列中任意一列成为最高列

flex

.box {
    
    
	min-width: 500px;
	display: flex;
}
.left, .right {
    
    
	width: 100px;
}
.left {
    
    
    order: -1;
}
.center {
    
    
	flex: 1;
}

position（无法撑开父元素高度）

.box {
    
    
	position:relative;
}
.left, .right {
    
    
	width: 100px;
	position: absolute;
	top: 0;
}
.left {
    
    
	left: 0;
}
.right{
    
    
	right: 0;
}
.center {
    
    
	position: absolute;
	left: 100px;
	right: 100px;
}

float

.box {
    
    
	min-width: 500px;
    padding-left: 100px;
    padding-right: 100px;
    overflow: hidden;
}
.left, .right, .center {
    
    
    float: left;
}
.left, .right {
    
    
    width: 100px;
}
.center {
    
    
    width: 100%;
}
.left {
    
    
    margin-left: calc(-100px - 100%);
}
.right {
    
    
    margin-right: -100px;
}

还有table和grid，用的不多，效果也没这几个好，就不说了，感兴趣的自己去找

两列等高布局

.box {
    
    
   overflow: hidden;
}
.left {
    
    
    width: 100px;
    height: 200px;
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.right {
    
    
    height: 400px;
    margin-left: 150px;
}

水平垂直居中

已知高度：

padding 或 margin + BFC

vertical-align: middle; 
text-align: center; 
line-height: xxx;

未知高度

display:flex; 
align-items:center; 
justify-content: center;

position: absolute; 
left: 50%; 
top:50%; 
transform: translateX(-50%) translateY(-50%);

position: absolute; 
top: 0; 
bottom: 0;
left: 0; 
right: 0; 
margin: auto

用CSS画三角形

运用border

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

用CSS实现正方体旋转效果

在父元素上设置transform-style: preserve-3d使子元素具有3D效果
定义六个面，使用transform在空间上构造成立方体
用@keyframe或transition定义动画实现旋转

.main{
    
    
    height: 500px;
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    border:0 solid black;
    transform: translate(-50%,-50%) rotateX(30deg) rotateY(30deg);
    transform-style: preserve-3d;
}
.main div{
    
    
    position: absolute;
    left: 50%;
    top: 50%;
    height: 250px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    font-weight: bold;
}
.main:hover{
    
    
    transform: translate(-50%,-50%)  rotateX(145deg) rotateY(45deg) rotateZ(105deg);
    transition: all 5s;
}
.face1{
    
    
    background-color: pink;
    transform:translate(-50%,-50%) translateY(-125px) rotateX(90deg);
}

.face2{
    
    
    background-color: red;
    transform:translate(-50%,-50%) translateX(-125px) rotateY(90deg);
}

.face3{
    
    
    background-color: blue;
    transform:translate(-50%,-50%) translateZ(-125px);
}

.face4{
    
    
    background-color: yellow;
    transform:translate(-50%,-50%) translateY(125px) rotateX(90deg);
}

.face5{
    
    
    background-color: green;
    transform:translate(-50%,-50%) translateX(125px) rotateY(90deg);
}

.face6{
    
    
    background-color: orange;
    transform:translate(-50%,-50%) translateZ(125px);
}
<div class="main">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
    <div class="face4">4</div>
    <div class="face5">5</div>
    <div class="face6">6</div>
</div>

多行元素文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

画响应式正方形

.box {
    
    
   display: inline-block; // block会发生外边距合并
    position: relative;
    width: 100%;
}
.box > div {
    
    
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: red;
}
.box:after {
    
    
    content: '';
    display: block;
    width: 100%;
    margin-top: 100%;
}
<div class="box">
    <div></div>
</div>