codernie

通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案。

目录

1.怎样会产生浮动?
2.如何清除浮动?
3.盒子模型,以及IE和其他浏览器的却别?
4.CSS3新特性有哪些?
5.em 和 rem 的区别?
6.重排和重绘?
7.行元素和块元素?
8.border-box 和 content-box 的区别?
9.伪元素和伪类?
10.unset?
11.CSS选择器优先级?
12.水平垂直居中布局?
13.两列等高布局?

1.怎样会产生浮动?

某一个元素的float属性设置为left或者right,这个元素就会脱离文档流,左右浮动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。

2.如何清除浮动?

方法比较多,这里介绍三种典型的方法:
a.在与浮动元素的同级元素中加一个空的div,并将其css属性设置为

.clear1 {
   clear: both;
}

优点:通俗易懂,容易掌握
缺点:添加了太多空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。
b.父元素css属性设置为
.ovef2 { overflow: auto; zoom:1; }
优点:不存在结构和语义化问题,代码量极少
缺点:overflow为hidden时内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;overflow为auto时会产生firefox和IE的兼容性问题。
c.父元素使用:after 伪元素

.clear-fix3 {
    zoom:1
}
.clear-fix3::after {
    display: block;
    visibility: hidden;
    clear:both;
    height:0;
    content:''
}

优点:简洁,没有其他问题
缺点:代码量看似略大

3.盒子模型,以及IE和其他浏览器的区别?

盒子模型由内往外分别包括:
content、padding、border、margin

box-model.png

上图为标准W3C盒子模型示意图,它的
width = content的宽度
height = content的高度
而IE盒子模型的
width = (content + padding + border) 的宽度
height = (content + padding + border) 的高度

4.CSS3新特性有哪些?

这个题答案就比较多了,建议大家回答一些比较常用的特别是自己用过的新特性,下面我简单介绍一些:
a.css选择器
(1)E:last-child 匹配父元素的最后一个子元素E。
(2)E:nth-child(n)匹配父元素的第n个子元素E。
(3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
b.加载字体
@font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。

@font-face {   
    font-family: Runic;   
    src:url(RUNICMT0.eot);   
} 

c.圆角
设置border-radius属性
d.设置阴影
box-shadow / text shadow
属性值:水平移动距离 垂直移动距离 阴影距离 颜色

.shadow {
    box-shadow: 2px 2px 2px black;
    text-shadow: 2px 2px 2px black;
}

e.多列布局
column-count 列数
column-gap 列之间的间隔大小
column-rule 列之间的分隔线

.column-container {
    column-count: 3;
    column-gap: 35px;
    column-rule: 1px solid gray;
}

f.背景颜色渐变效果
linear-gradient(方向,初始颜色,结束颜色)

.gradient_bg {
    background-image : linear-gradient(to top, red, yellow);
}

g.弹性盒子模型
即flex布局,这里不详细说明了,有兴趣的可以看:runboo上面的教程
h.过渡动画效果
transition:过渡属性 动画时间 动画类型 动画延迟时间

.transition-demo {
    transition:border-color .5s ease-in .1s;
}

i.动画效果
animation:动画名称 动画时间 动画类型 动画延迟时间
@keyframes 动画名称 { 中间状态 }

.animation-demo {
    animation:mymove .5s ease-in .1s;
}
@keyframes mymove {
    0% { opacity : 0 }
    100% { opacity : 1 } 
}

5.em 和 rem 的区别?

em的值并不是固定的, em会继承父级元素的字体大小。看一下例子:

<style>
    .font-father {
      font-size: 1.5em; /* 实际为24px */
    }
    .font-son {
      font-size: 1.5em; /* 实际为36px */
    }
</style>
<div class='font-father' >
    <a>hello </a>
    <span class='font-son' >boy</span>
</div>

屏幕快照 2018-06-14 下午1.15.56.png
而rem只会继承根元素root的字体大小,所以把上例中em都改成rem,就成了下图:
屏幕快照 2018-06-14 下午1.15.33.png

6.重排和重绘?

重绘:当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素。
重排:当变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素。
根据浏览器的加载顺序:(所以重排一定会引起重绘)
1、构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Content Tree/DOM Tree);
2、构建渲染树(construct):解析对应的CSS样式文件信息(包括js生成的样式和外部css文件),而这些文件信息以及HTML中可见的指令(如),构建渲染树(Rendering Tree/Frame Tree);
3、布局渲染树(reflow/layout):从根节点递归调用,计算每一个元素的大小、位置等,给出每个节点所应该在屏幕上出现的精确坐标;
4、绘制渲染树(paint/repaint):遍历渲染树,使用UI后端层来绘制每个节点。

7.行内元素(内联元素)和块级元素有哪些,区别是什么?

行内元素:
a、b、small、strong、i、img、input、textarea、span
块级元素:
标题类h1、h2...,列表类ul、ol、li,表格类table、tbody、thead、th...,段落p、div
区别:
a.位置占据上不同
行内元素会在一条直线上排列,都是同一行的,水平方向排列
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
b.包含关系不同
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
c.盒模型属性上不同
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
进一步提问:img是行内元素为何可以设置宽高?
因为img是置换元素,浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看HTML代码,则看不到图片的实际内容;又例如根据标签的type属性来决定是显示输入框,还是单选按钮等。(这些元素拥有内在尺寸 内置宽高 他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。)

8.border-box 和 content-box 的区别?

这两个值是CSS3中新增加了box-sizing属性的取值,简单来说border-box代表IE盒子模型,content-box代表W3C盒子模型

9.伪元素和伪类?

伪元素:
在不增加dom结构的基础上添加的一个元素,在用法上跟真正的dom无本质区别。普通元素能实现的效果,伪元素都可以。有些用伪元素效果更好,代码更精简。常见的伪元素选择器包括:
:first-letter 选择元素文本的第一个字(母)。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
伪类分为两类:
状态伪类:
基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。常见的状态伪类主要包括:
:link 应用于未被访问过的链接;
:hover 应用于鼠标悬停到的元素;
:active 应用于被激活的元素;
:visited 应用于被访问过的链接,与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
结构性伪类:
利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。常见的包括:
:first-child 选择某个元素作为第一个子元素;
:last-child 选择某个元素作为最后一个子元素;
:nth-child() 选择某个元素作为一个或多个特定的子元素;
:nth-last-child() 选择某个元素作为一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

10.unset?

如果该属性是默认继承属性,该值等同于 inherit
如果该属性是非继承属性,该值等同于 initial
以下是默认继承属性:
所有元素可继承:visibility 和 cursor
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承:text-indent和text-align
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
表格元素可继承:border-collapse

11.CSS选择器优先级?

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一优先级的选择器,后写的会覆盖之前的。

12.水平垂直居中布局?

方案一:flex布局

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

方案二:position transform

.father {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

13.两列等高布局?

方案一:flex布局

.equalHeight-flex {
    display: flex;
}

方案二:浮动布局

.equalHeight-float-father {
    overflow: hidden;
}
.equalHeight-float-son {
    float: left;
    width: 300px;
    margin-bottom:-2000px;
    padding-bottom:2000px;
}

相关文章: