前端面试题及答案 - CSS篇

这篇文章并不是最全的前端面试题(没有最全,只有更全),只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记,方便后面有面试需要的小伙伴们借鉴,后续内容会不定时更新,有错误之处希望大家不吝指出。

1、CSS3的新特性

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

具体
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)详细介绍

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

    1. 标准盒模型元素宽度width=content=100px,高度计算相同
      前端面试题及答案 - CSS篇
    2. IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。
      前端面试题及答案 - CSS篇

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、在父元素后面额外添加标签

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>

3、父元素上使用after伪类

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

4、利用overflow清除浮动

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

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

<div class="parent">
    <div class="son"></div>
</div>
  • 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;
}
  • 前端面试题及答案 - 浏览器篇
  • 前端面试题及答案 - HTML篇
  • 前端面试题及答案 - JS篇
  • 前端面试题及答案 - 性能优化篇

相关推荐