html5css3面试题及答案,前端面试题及答案 - 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盒模型。

区别对比：(注意蓝色背景区域大小)

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

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

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:last-of-type 选择属于其父元素的最后

元素。

p:only-of-type 选择属于其父元素唯一的

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

: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;

}