CSS前端面试题

  1. 一、盒模型哪两种模式?什么区别?如何设置 ?
    1. 1、标准盒模型:
    2. 2、怪异盒模型:
  2. 二、子盒子在父盒子中水平垂直居中有哪几种方法?
    1. 1、定位 + transform(不需要知道盒子宽高):
    2. 2、flex 弹性盒(不需要知道盒子宽高):
    3. 3、flex 弹性盒 + margin: auto(不需要知道盒子宽高):
    4. 4、定位 + margin: auto(不需要知道盒子宽高):
    5. 5、把父元素转换成表格用 vertical: middle 垂直居中,子元素转换成行内块用 text-aligin: center 居中(不需要知道盒子宽高):
  3. 三、flex 怎么用,常用属性有哪些?
    1. 1、常用属性:
  4. 三、使用自适应布局的时候用rem为什么可以实现自适应布局?
    1. 1、为什么:
    2. 2、公式:
  5. 四、对BFC规范(块级格式化上下文)的理解及其应用?
    1. 1、概念:
    2. 2、形成要素:
  6. 五、CSS选择器的优先级?
    1. 1、比较:
  7. 六、CSS选择器的权重问题
    1. 1、权重大小比较:
  8. 七、为什么要清除浮动?请列举几种可以清除浮动的方法
    1. 1、为什么要清除浮动:
    2. 2、清除浮动的方法:
  9. 八、请列举隐藏元素的方法?
    1. 1、visibility: hidden
    2. 2、opacity: 0
    3. 3、display: none
    4. 4、position: absolute; left: -500
    5. 5、transform: scale(0)
    6. 6、height: 0; overflow: hidden
    7. 7、filter: blur(0)
  10. 九、怎么实现文本不自动换行?超出显示省略号(单行和多行)
    1. 1、单行:
    2. 2、多行:
  11. 十、至少说出两种CSS实现自适应的方式?
    1. 1、自适应方式:
  12. 十一、css动画可以用JavaScript实现,为什么还要用CSS实现?
    1. 1、为什么:
    2. 2、注意:
  13. 十二、Position的值有哪些?(定位)有什么区别?
    1. 1、relative(相对定位):
    2. 2、absolute(绝对定位):
    3. 3、static(静态定位):
    4. 4、fixed(固定定位):
    5. 5、sticky(粘性定位):
  14. 十三、CSS3有哪些新特性?
    1. 1、border-radius(盒子圆角):
    2. 2、box-shadow(盒子阴影):
    3. 3、border-image(图片边框):
    4. 4、text-shadow(文字阴影):
    5. 5、linear-gradient(线性渐变):
    6. 6、transform(旋转,缩放,定位,倾斜):
    7. 7、@media(媒体查询):
    8. 8、flex(弹性盒布局):
  15. 十四、使用CSS实现两栏布局的几种方法?
    1. 1、float + margin-left(浮动):
    2. 2、float + calc(浮动):
    3. 3、flex + flex-shrink + flex(弹性盒):
    4. 4、BFC(overflow):
    5. 5、position(子绝父相):
    6. 6、position(子绝父相):
  16. 十五、使用CSS实现三栏布局的几种方法?
    1. 1、flex + flex-shrink + flex(弹性盒):
    2. 2、position(子绝父相):
  17. 十六、px && em && rem的区别?
    1. 1、px:
    2. 2、em:
    3. 3、rem:
  18. 十七、CSS优化、提高性能的方法有哪些?
    1. 1、优化方法:
  19. 十八、移动端怎样解决字体小于12px的问题?
    1. 1、使用 scale:

目录

  1. 一、盒模型哪两种模式?什么区别?如何设置 ?
    1. 1、标准盒模型:
    2. 2、怪异盒模型:
  2. 二、子盒子在父盒子中水平垂直居中有哪几种方法?
    1. 1、定位 + transform(不需要知道盒子宽高):
    2. 2、flex 弹性盒(不需要知道盒子宽高):
    3. 3、flex 弹性盒 + margin: auto(不需要知道盒子宽高):
    4. 4、定位 + margin: auto(不需要知道盒子宽高):
    5. 5、把父元素转换成表格用 vertical: middle 垂直居中,子元素转换成行内块用 text-aligin: center 居中(不需要知道盒子宽高):
  3. 三、flex 怎么用,常用属性有哪些?
    1. 1、常用属性:
  4. 三、使用自适应布局的时候用rem为什么可以实现自适应布局?
    1. 1、为什么:
    2. 2、公式:
  5. 四、对BFC规范(块级格式化上下文)的理解及其应用?
    1. 1、概念:
    2. 2、形成要素:
  6. 五、CSS选择器的优先级?
    1. 1、比较:
  7. 六、CSS选择器的权重问题
    1. 1、权重大小比较:
  8. 七、为什么要清除浮动?请列举几种可以清除浮动的方法
    1. 1、为什么要清除浮动:
    2. 2、清除浮动的方法:
  9. 八、请列举隐藏元素的方法?
    1. 1、visibility: hidden
    2. 2、opacity: 0
    3. 3、display: none
    4. 4、position: absolute; left: -500
    5. 5、transform: scale(0)
    6. 6、height: 0; overflow: hidden
    7. 7、filter: blur(0)
  10. 九、怎么实现文本不自动换行?超出显示省略号(单行和多行)
    1. 1、单行:
    2. 2、多行:
  11. 十、至少说出两种CSS实现自适应的方式?
    1. 1、自适应方式:
  12. 十一、css动画可以用JavaScript实现,为什么还要用CSS实现?
    1. 1、为什么:
    2. 2、注意:
  13. 十二、Position的值有哪些?(定位)有什么区别?
    1. 1、relative(相对定位):
    2. 2、absolute(绝对定位):
    3. 3、static(静态定位):
    4. 4、fixed(固定定位):
    5. 5、sticky(粘性定位):
  14. 十三、CSS3有哪些新特性?
    1. 1、border-radius(盒子圆角):
    2. 2、box-shadow(盒子阴影):
    3. 3、border-image(图片边框):
    4. 4、text-shadow(文字阴影):
    5. 5、linear-gradient(线性渐变):
    6. 6、transform(旋转,缩放,定位,倾斜):
    7. 7、@media(媒体查询):
    8. 8、flex(弹性盒布局):
  15. 十四、使用CSS实现两栏布局的几种方法?
    1. 1、float + margin-left(浮动):
    2. 2、float + calc(浮动):
    3. 3、flex + flex-shrink + flex(弹性盒):
    4. 4、BFC(overflow):
    5. 5、position(子绝父相):
    6. 6、position(子绝父相):
  16. 十五、使用CSS实现三栏布局的几种方法?
    1. 1、flex + flex-shrink + flex(弹性盒):
    2. 2、position(子绝父相):
  17. 十六、px && em && rem的区别?
    1. 1、px:
    2. 2、em:
    3. 3、rem:
  18. 十七、CSS优化、提高性能的方法有哪些?
    1. 1、优化方法:
  19. 十八、移动端怎样解决字体小于12px的问题?
    1. 1、使用 scale:

一、盒模型哪两种模式?什么区别?如何设置 ?

1、标准盒模型:

  • 标准盒模型:只设置 content 的大小

  • 标准盒模型只是对content设置了宽高,那么这个元素真正的宽高就还要加上他的padding(内边距)border(边框)margin(外边距)。

box-sizing="content-box";

2、怪异盒模型:

  • 将整个元素看成整体设置大小

  • 怪异盒模型把整个盒子看成是一个整体,给整个盒子一个宽高,如果你还给盒子设置了额外的边距和边框,那么中间的content蓝色部分就要受到挤压变小。

box-sizing="border-box";

二、子盒子在父盒子中水平垂直居中有哪几种方法?

1、定位 + transform(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*实现水平垂直居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2、flex 弹性盒(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    display: flex;
    justify-content: center;
    algin-item: center
}

3、flex 弹性盒 + margin: auto(不需要知道盒子宽高):

.father {
    display: flex;
    width: 300px;
    height: 300px;
    background: red;
}
.son {
    margin: auto;
    width: 100px;
    height: 100px;
    background: blue;
}

4、定位 + margin: auto(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*实现水平垂直居中*/
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

5、把父元素转换成表格用 vertical: middle 垂直居中,子元素转换成行内块用 text-aligin: center 居中(不需要知道盒子宽高):

.father {
    height: 300px;
    width: 300px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}

.son {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 100px;
    background-color: blue;
}

三、flex 怎么用,常用属性有哪些?

1、常用属性:

  • flex-direction:主轴方向,默认是横向的 row,纵向为 column
  • justify-content:项目在主轴上的对齐方式, 默认是 flex-start ,常用的 center 、space-between、space-around
  • align-items:项目在交叉轴上的对齐方式,默认是 flex-start, 常用的 center
  • flex-wrap:项目存在多行的情况下换行,默认是 nowrap,有时候用到 wrap

三、使用自适应布局的时候用rem为什么可以实现自适应布局?

1、为什么:

  • rem 是相对于根元素< html>来决定的,这样就意味着,我们只需要在根元素确定一个 px 字号,则可以来算出元素的宽高。

2、公式:

  • 通过js动态获取屏幕的宽度(document.clientWidth)然后根据屏幕宽度动态计算出rem的实际值。

假设:640px的设备 1rem = 100px
公式:rem = document.clientWidth / 640 * 100px

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };

    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

四、对BFC规范(块级格式化上下文)的理解及其应用?

1、概念:

  • BFC:块级格式上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。
  • BFCWeb页面中盒模型布局的一种 CSS 渲染模式,它的定位体系属于 常规文档流。

2、形成要素:

  • float 的值不为 none
  • position 的值不为 static 或者 relative
  • overflow 的值不为 visible
  • display 的值为 table-cell,table-caption,inline-block,flex,或者 inline-flex中的其中一个。

五、CSS选择器的优先级?

1、比较:

优先级为: !important > id > class > tagName

important内联 优先级高

六、CSS选择器的权重问题

1、权重大小比较:

/ 以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下/// 例子是演示各种定义的权重值:

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

// 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

七、为什么要清除浮动?请列举几种可以清除浮动的方法

1、为什么要清除浮动:

  • 父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果是父元素的高度为0,这也就导致了父元素高度塌陷问题。
  • 浮动脱离文档流,这个问题会对整个页面布局带来很大影响

2、清除浮动的方法:

  • 在浮动盒子的后面添加一个空盒子,对该空盒子添加CSS样式:clear: both。

  • 对浮动的盒子父级添加该属性:overflow: hidden。

  • :after 伪元素,谁出问题就给谁加一个clearfix类名。

.clearfix:after {
    content: “”;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    dispaly: block;
    clear: both;
}
.clearfix {
    zoom: 1;/*IE678*/
}

八、请列举隐藏元素的方法?

1、visibility: hidden

  • 这个属性只是简单的隐藏某个元素,元素占用的空间任然存在。

2、opacity: 0

  • 透明的为0,元素占用的空间任然存在。

3、display: none

  • 元素会变得不可见,元素不会再占用文档空间。

4、position: absolute; left: -500

  • 使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。

5、transform: scale(0)

  • 将一个元素设置为无限小,这个元素将不可见,元素占用的空间任然存在。

6、height: 0; overflow: hidden

  • 将元素在垂直方向上收缩为0使元素消失。只要元素没有可见的边框,该方法就可以正常工作。

7、filter: blur(0)

  • 将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中,元素占用的空间任然存在。

九、怎么实现文本不自动换行?超出显示省略号(单行和多行)

1、单行:

.ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;// 文本溢出显示省略号
    white-space:nowrap;// 文本不会换行(单行文本溢出)
    width:130px;// 宽度是必须的
}

2、多行:

.mult_line_ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;// 文本溢出显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 3;// 最多几行
    -webkit-box-orient: vertical;
    width:130px;// 宽度是必须的
}

十、至少说出两种CSS实现自适应的方式?

1、自适应方式:

  • rem && em
  • 百分比
  • 媒体查询
  • bootstrap,antd等的栅格布局

十一、css动画可以用JavaScript实现,为什么还要用CSS实现?

1、为什么:

  • JavaScript 实现的是帧动画
  • css 实现的是补间动画
  • 帧动画:使用定时器,每隔一段时间,更改当前的元素
  • 补间动画:过渡(加过渡只要状态发生改变产生动画)动画(多个节点来控制动画)性能会更好

2、注意:

  • 在支持css3的浏览器尽可能的使用css3动画(适用于移动端开发)

十二、Position的值有哪些?(定位)有什么区别?

1、relative(相对定位):

  • 生成绝对定位的元素,相对于浏览器窗口进行定位。脱离文档流。

2、absolute(绝对定位):

  • 生成绝对定位的元素,相对于值不为 static 的第一个父元素进行定位。脱离文档流。

3、static(静态定位):

  • 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right - z-index 声明)。

4、fixed(固定定位):

  • 生成绝对定位的元素,相对于浏览器窗口进行定位。脱离文档流。

5、sticky(粘性定位):

  • 粘性定位,同时给一个(top,bottom,right,left)之一即可。

十三、CSS3有哪些新特性?

1、border-radius(盒子圆角):

2、box-shadow(盒子阴影):

3、border-image(图片边框):

4、text-shadow(文字阴影):

5、linear-gradient(线性渐变):

6、transform(旋转,缩放,定位,倾斜):

7、@media(媒体查询):

8、flex(弹性盒布局):


十四、使用CSS实现两栏布局的几种方法?

1、float + margin-left(浮动):

// 左边盒子设置左浮动,右边盒子设置左外边距为200px
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    margin-left: 200px;
    height: 100%;
    background-color: darkcyan;
}

2、float + calc(浮动):

// 左边盒子设置左浮动,右边盒子也设置左浮动,使用calc减去左边盒子的宽度
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: darkcyan;
}

3、flex + flex-shrink + flex(弹性盒):

// 父盒子为弹性盒,左边盒子设置不被压缩,右边盒子占据剩余区域
.wrapper {
    height: 100%;
    display: flex;
}
.left {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    flex: 1;
    height: 100%;
    background-color: darkcyan;
}

4、BFC(overflow):

// 左边盒子设置左浮动,右边盒子设置overflow: hidden
.left {
    width: 200px;
    height: 100%;
    float: left;
    background-color: salmon;
}
.right {
    overflow: hidden;
    background-color: darkcyan;
    height: 100%;
}

5、position(子绝父相):

// 父盒子为相对定位,左边盒子设置绝对定位,右边盒子设置左外边距为200px
.wrapper {
    height: 100%;
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    margin-left: 200px;
    height: 100%;
    background-color: darkcyan;
}

6、position(子绝父相):

// 父盒子为相对定位,左边盒子设置宽度,右边盒子设置绝对定,位然后设置left为200px,其他为0
.wrapper {
    height: 100%;
    position: relative;
}
.left {
    width: 200px;
    height: 100%;
    background-color: salmon;
}
.right {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: darkcyan;
}

十五、使用CSS实现三栏布局的几种方法?

1、flex + flex-shrink + flex(弹性盒):

// 父盒子为弹性盒,左边盒子设置不被压缩,右边盒子也设置不被压缩,中间盒子占据剩余区域
.wrapper {
    height: 100%;
    display: flex;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: salmon;
    flex-shrink: 0;
}
.main {
    flex: 1;
    background-color: darkcyan;
}
.right {
    float: right;
    width: 200px;
    height: 100%;
    background-color: salmon;
    flex-shrink: 0;
}

2、position(子绝父相):

// 父盒子为相对定位,左边盒子设置为绝对定位left为0,右边盒子也设置为绝对定位right为0,也设置为绝对定位right为200,left为200
.wrapper {
    height: 100%;
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: salmon;
    left: 0;
}
.main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 200px;
    background-color: darkcyan;
}
.right {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: salmon;
    right: 0;
}

十六、px && em && rem的区别?

1、px:

  • px 像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em:

  • em 是根据使用它的元素的大小决定,em 会继承父级元素的字体大小。
  • em 的值并不是固定的。

3、rem:

  • rem 是根据html根节点来计算的。

十七、CSS优化、提高性能的方法有哪些?

1、优化方法:

  • 多个css合并,尽量减少HTTP请求
  • 将css文件放在页面最上面
  • 移除空的css规则
  • 避免使用css表达式
  • 选择器优化嵌套,尽量避免层级过深
  • 充分利用css继承属性,减少代码量
  • 抽象提取公共样式,减少代码量
  • 属性值为0时,不加单位
  • 属性值为小于1的小数时,省略小数点前面的0
  • css雪碧图

十八、移动端怎样解决字体小于12px的问题?

1、使用 scale:

transform: scale(0.7);

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:CSS前端面试题

文章字数:3.4k

本文作者:Spicy boy

发布时间:2019-04-01, 15:08:35

最后更新:2021-03-24, 14:39:46

原始链接:http://www.spicyboy.cn/2019/04/01/CSS%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏