前端一轮面试题(css篇) 持续更新

盒模型

??CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。box-sizing: content-box（W3C盒模型，又名标准盒模型）：元素的宽高大小表现为内容的大小。 box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。

CSS3的新特性

• word-wrap 文字换行
• text-overflow 超过指定容器的边界时如何显示
• text-decoration 文字渲染
• text-shadow文字阴影
• gradient渐变效果
• transition过渡效果 transition-duration：过渡的持续时间
• transform拉伸，压缩，旋转，偏移等变换
• animation动画

transition和animation的区别：

??Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

CSS选择器及其优先级

• !important
• 内联样式style=""
• ID选择器#id
• 类选择器/属性选择器/伪类选择器.class.active[href=""]
• 元素选择器/关系选择器/伪元素选择器html+div>span::after
• 通配符选择器*

BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。?

BFC应用

• 防止margin重叠
• 清除内部浮动
• 自适应两（多）栏布局
• 防止字体环绕

触发BFC条件

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute、fixed

BFC的特性

• 内部的Box会在垂直方向上一个接一个的放置。
• 垂直方向上的距离由margin决定
• bfc的区域不会与float的元素区域重叠。
• 计算bfc的高度时，浮动元素也参与计算
• bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

div水平居中

1. 行内元素

.parent {
    text-align: center;
}
复制代码

2. 块级元素

.son {
    margin: 0 auto;
}
复制代码

3. flex布局

.parent {
    display: flex;
    justify-content: center;
}
复制代码

4. 绝对定位定宽

.son {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}
复制代码

5. 绝对定位不定宽

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
复制代码

6. left/right: 0

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}
复制代码

div垂直居中

1. 行内元素

.parent {
    height: 高度;
}
.son {
    line-height: 高度;
}
复制代码

2. table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
复制代码

3. flex

.parent {
    display: flex;
    align-items: center;
}
复制代码

4. 绝对定位定高

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}
复制代码

5. 绝对定位不定高

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}
复制代码

6. top/bottom: 0;

.son {
    position: absolute;
    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

绝对定位和相对定位

• absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
• fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

共同点：改变行内元素的呈现方式，都脱离了文档流；不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口。

让元素消失

visibility:hidden、display:none、z-index=-1、opacity：0

1. opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
2. visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3. display:none, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
4. z-index=-1置于其他元素下面

清除浮动

1. 在浮动元素后面添加 clear:both 的空 div 元素，

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>
复制代码

2. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}
复制代码

3. 使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
复制代码

推荐使用第三种方法，不会在页面新增div，文档结构更加清晰。

calc函数

calc函数是css3新增的功能，可以使用calc()计算border、margin、pading、font-size和width等属性设置动态值。

#div1 {
    position: absolute;
    left: 50px;
    width: calc( 100% / (100px * 2) );
    //兼容写法
    width: -moz-calc( 100% / (100px * 2) );
    width: -webkit-calc( 100% / (100px * 2) );
    border: 1px solid black;
}
复制代码

注意点：

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
• calc()函数支持 "+", "-", "*", "/" 运算;
• 对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持 calc()的浏览器，使用一个固定值作为回退。

移动端rem

rem官方定义『The font size of the root element』，即根元素的字体大小。rem是一个相对的CSS单位，1rem等于html元素上font-size的大小。所以，我们只要设置html上font-size的大小，就可以改变1rem所代表的大小。

(function () {
    var html = document.documentElement;
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

移动端1px

一般来说，在PC端浏览器中，设备像素比（dpr）等于1，1个css像素就代表1个物理像素；但是在retina屏幕中，dpr普遍是2或3，1个css像素不再等于1个物理像素，因此比实际设计稿看起来粗不少。

1. 伪元素+scale

<style>
    .box{
        width: 100%;
        height: 1px;
        margin: 20px 0;
        position: relative;
    }
    .box::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0; 
        background: red;
    }
</style>

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

复制代码

2. border-image

div{
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。

1. 获取不存在与DOM树中的信息。比如标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2. 获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

::after和:after的区别

在实际的开发工作中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。

CSS2 中的伪元素使用1个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写2个冒号了。

文章来自 https://juejin.im/post/5df1e312f265da33d039d06d