前端面试题及答案 - CSS篇

太过爱你忘了你带给我的痛 2021-09-20 04:52 297阅读 0赞

**1、CSS3的新特性**

*  实现圆角（border-radius）
 *  阴影（box-shadow）
 *  文字加特效（text-shadow）
 *  线性渐变（gradient）
 *  旋转（transform）
 *  媒体查询，多栏布局

[具体][Link 1]  
**2、CSS中 link 和@import 的区别**

*  link属于HTML标签，而@import是CSS提供的;
 *  页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
 *  import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
 *  **link方式的样式的权重 高于@import的权重.**

**3、介绍一下CSS的盒子模型**

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）[详细介绍][Link 2]

*  两种盒模型：标准W3C盒模型、IE盒模型。
 *  区别对比：***(注意蓝色背景区域大小)***

1.  **标准盒模型元素宽度width=content=100px，高度计算相同**

![v2-2b0eb08fdfad0591b9497ebfcf77ffef_hd.png][]

1.  1.  **IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。**

![v2-0e8810541a0b83edd31911b53829752c_hd.png][]

**4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？**

*  选择符

1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = "external"]）
    9.伪类选择器（a: hover, li:nth-child）

*  继承

1. 可继承的样式： font-size font-family color, text-indent;
    2. 不可继承的样式：border padding margin width height;

*  新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled  :disabled 控制表单控件的禁用状态。
    :checked        单选框或复选框被选中。

*  优先级算法规则:**优先级就近原则，同权重情况下样式定义最近者为准;**

!important >  id > class > tag  
    important 比 内联优先级高,但内联比 id 要高

**5、为什么要清除浮动？如何清除？**  
引起的问题：  
（1）父元素的高度无法被撑开，影响与父元素同级的元素  
（2）与浮动元素同级的非浮动元素会跟随其后  
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：  
1、利用clear清除浮动

.son {
            clear: left | right | both | auto
        }

2、在父元素后面额外添加标签

3、父元素上使用after伪类

#parent:after {
        content: '';
        clear: both;
        height: 0;
        display: block;
    }

4、利用overflow清除浮动

#parent {
        overflow: auto;
        display: inline-block;
    }

**6、实现垂直居中的几种方法**

*  margin: auto

.parent {
        width: 400px;
        height: 400px;
        position: relative;
        .son {
            position: absoulte;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }

*  margin-left、margin-top负值法(需知道子元素width、height)

.parent {
        width: 400px;
        height: 400px;
        position: relative;
        .son {
            position: absolute;
            width: 100px;
            height: 160px;
            left: 50%;
            top: 50%;
            //margin-top: translateY(-50%);
            //margin-left: translateX(-50%);
            margin-top: -80px;
            margin-left: -50px;
        }
    }

*  flex

.parent{
        display: flex;
        align-items: center;
        justify-content: center;
    }

*  table-cell(未脱离文档流)

.parent {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

[Link 1]: https://link.zhihu.com/?target=https%3A//juejin.im/entry/595f1e3c5188250d914dd53c
[Link 2]: https://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000013069516
[v2-2b0eb08fdfad0591b9497ebfcf77ffef_hd.png]: /images/20210812/e441f2f9aba1413ab7ff6d5a50fef7a0.png
[v2-0e8810541a0b83edd31911b53829752c_hd.png]: /images/20210812/22a3126ec0954f578cafc17908c06b4d.png