CSS面试题总结
1. CSS3新特性
- 颜色:
- 文字阴影(text-shadow);
- 背景:
background-size、background-origin、background-clip
;
- 边框:
- 盒模型;
- 渐变(线性渐变、径向渐变、锥形渐变);
- 过渡:
transation
; - 自定义动画:
animation @keyfrom
; - 媒体查询、多栏布局、@media screen and (width:800px) {…};
- 图片边框:
border-image
; - 2D转换/3D转换:
transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
; - 字体图标;
- 弹性布局:
flex
; - 网格布局:
grid
; - 保持盒子宽高比例:
- 给盒子设置宽度不设高度;
aspect-ratio: 宽/高;
;
2. 外部样式表、内部样式表、行内样式声明各自的使用场景是什么?
- 外部样式表:
- 内部样式表:
- 行内样式表:
3. @import指令有什么用处,应该用在哪里,有什么限制?
- 用来导入其他的CSS样式表;
- 仅允许用在 样式文档 中;
- 必须位于CSS文档的 首行;
4. 什么是块级元素,行内元素,行内块元素,有哪些限制?
- 块级元素:
- 默认垂直排列,可以设置宽高;
div、table、ul、ol...
;
- 行内元素:
- 行内块元素:
- 默认水平排列,可以设置宽高;
img、input...
;
5. 简单选择器有哪几种,写出基本语法形式
- 元素选择器:
- id选择器:
- 类选择器:
- 属性选择器:
- 群组选择器:
- 通配符选择器:
6. 结构(上下文)选择器有几种,并举例说明?
- 后代选择器:
- 子元素选择器:
- 同级相邻:
- 同级所有:
7. :nth-child(n) 和 :nth-of-type(n) 有什么区别?
:nth-child(n)
::nth-of-type(n)
:
8. :nth-child(n)和:nth-of-type(n)中的参数n的使用规则
- 用在字面量中, 从1开始, 如
::nth-child(3)
; - 用在表达式中, 从0开始, 如
::nth-child(2n+1)
; - 允许负值;
9. 如何画一个三角形?
- 给一个块级元素设置 宽高为0;
- 边框设置一定的像素值(
border: 5px solid transparent;
); - 根据项目需要给对应的边框设置颜色即可(
border-top-color: red;
);
10. 如何实现一条 0.5px 的border?
- 给一个块级元素设置相对定位,并设置其伪元素为绝对定位;
- 伪元素的大小为父级的
200%
,边框宽度设置为1px
; - 让伪元素缩小一半,再设置伪元素的原点为
(0, 0)
;
div {position: relative;width: 100px;height: 100px;}div::before {content: '';position: absolute;top: 0;left: 0;width: 200%;height: 200%;border: 1px solid #333;transform: scale(.5);transform-origin: 0 0;}
11. 介绍一下CSS盒模型?
- 不管是哪种盒模型,都是由以下四部分构成:
margin + border + padding + content
;
- 分类:
- 标准盒模型:
box-sizing: content-box;
;- 设置的 width 只是盒子内容的宽度;
- 额外设置
border、padding
都会改变盒子的大小;
- IE盒模型(怪异盒模型):
box-sizing: border-box;
;width = content-width + padding + border
;- 我们设置的宽度就是盒子本身的宽度,额外设置
border、padding
不会改变盒子的大小,他会去压缩内容的宽度;
12. 什么是flex布局?
- 定义:
- 是一种一维布局模型,它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力;
- 组成:
- 主轴对齐方式:
juetify-content(space-around、space-between、space-evenly、center)
;
- 侧轴(交叉轴)对齐方式:
- 改变轴向:
13. 弹性盒子(FlexBox)解决CSS中布局的什么问题,最适合用在哪里
- 解决了传统布局中的元素垂直对齐, 以及响应式布局的问题;
- 主要用于跨设备的页面布局,特别适合响应式,如移动端;
14. 弹性元素flex属性的常用值,与对应的值组合有哪些,并一一说明
nitial, auto, content, 数值
;- 默认值:
flex: flex-grow flex-shrink flex-basis
;- 各种组合,如flex: 1 1 auto; 等价于: flex: auto,…
15. 什么是grid布局?
Grid
布局即网格布局,它是一种新的CSS
布局模型,二维布局模型,主要作用是将一个页面或元素划分为几个区域,以及定义这些区域的大小、位置、层次等关系;- 它将一个页面或元素划分为一个个的网格,可以任意组合不同的网格,做出各种各样的布局;
16.position属性比较,说一下每个属性的区别
- relative:
- 相对定位;
- 相对于自身原来的位置,不脱离标准流;
- 左右
margin
为auto
仍然有效;
- absolute:
- 绝对定位;
- 找到最近一级具有
position
属性 的祖先元素进行位置的移动,脱离标准流; - 若没有找到,则相对于浏览器窗口进行位置的移动;
- 左右
margin
为auto
就会失效;
- fixed:
- 固定定位:
- 相对于浏览器可视化窗口,脱离标准流;
- 当元素祖先的
transform
、perspective
、filter
或 backdrop-filter
属性非 none
时,容器由视口改为该祖先。
- sticky:
- static
- 默认状态,使用正常的布局行为,不脱离文档流;
top、left、right、bottom
等属性不会生效;
- 当绝对定位和固定定位的参照物都是浏览器窗口时的区别:
- 当出现滚动条的时候,固定定位不会随着页面的滚动而滚动;
- 绝对定位的元素会随着滚动条进行滚动;
17. 为什么需要浮动,浮动带来的影响
- 最早的浮动是为了实现文字环绕的效果;
- 浮动的元素会脱离标准流,不占据空间;
- 为什么需要浮动?
- 实现多个块级元素一行显示;
- 实现两个盒子一左一右的布局方式;
- 浮动带来的影响?
- 元素浮动之后,脱离标准流,不占据位置,撑不开父级的高度,会影响后面元素的布局;
18. 清除浮动的方法?
- 给父级设置高度;
- 给父级设置
overflow: hidden / auto;
(本质是构建一个BFC); - 额外标签法:
- 在父级元素的最后面添加一个块级元素,添加
clear: both;
属性;
- 单伪元素法;
.clearfix::after {content: '';display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom: 1;}
- 双伪元素法;
19. CSS选择器有哪些,它们的优先级是怎么样的?
- 选择器:
- 通配符、id、类、伪类、属性、标签、伪元素、后代、交集、并集、子代;
- 优先级:
!important
> 行内样式(1000) > id选择器(100) > 类选择器 = 伪类选择器 = 属性选择器(10) > 标签选择器 = 伪元素选择器(1) > 通配符 / 继承 (0);
20. CSS隐藏元素的方法有哪些,区别是什么?
display: none;
- 元素隐藏后不占有原来的位置,引起重排(回流)和重绘;
- 该元素下的所有元素都会隐藏;
visibility: hidden
- 元素继续占有原来的位置,引起重绘;
- 该属性具有继承性,其子元素也会继承此属性;
- 若设置
visibility: visible;
,则子元素会显示;
opacity: 0;
- 元素继续占有原来的位置,引起重绘;
- 该元素下的所有元素都会隐藏;
overflow: hidden
;
21. 实现一个盒子的水平垂直居中
margin
(margin-top、margin-left);position
;position + margin
;position + transform
;flex
;grid
;
22. px、rem、em、vw、vh、vmin、vmax的区别
- px:
- rem:
- em:
- 相对单位,相对于当前标签的字号大小,如果当前标签没有设置字体大小,则相对于浏览器的默认字体大小;
- em会继承父级元素的字体大小,因此并不是一个固定的值;
- vw:
- 将视口宽度均分为100等份;
1vw
就等于是视口宽度的1%;
- vh:
- 将视口高度均分为100等份;
1vh
就等于视口高度的1%;
- vmin:
- vmax:
23. 如何解决 margin 塌陷?
- 两个同级元素,垂直排列,上面盒子设置
margin-bottom
,下面盒子设置 margin-top
,那么它们两个的margin就会重叠,以大的那个为准; - 两个子元素,内部的盒子给
margin-top
,其父级也会受到影响,同时产生上边距,父子元素会粘连;
24. ::before 和 ::after 中双冒号和单冒号有什么区别、作用(伪类和伪元素的区别)?
- 区别:
- 在CSS中 伪类 一直用 : 表示,如
:hover、:active
等; - 伪元素在CSS1中已经存在,当时语法是用 : 表示,如
:before、:after
,后来在CSS3中修订, 伪元素 使用 :: 表示,如::before、::after
(单冒号的写法依然可以生效); - 单冒号(:)用于CSS3的伪类;
- 双冒号(::)用于CSS3的伪元素;
- 想让插入的内容出现在其他内容的前面,使用
::before
,否则使用::after
; - 在代码顺序上,
::after
生成的内容也比::before
生成的内容靠后;
- 作用:
::before
和 ::after
的主要作用是在元素内容的前后加上指定内容;- 伪类 于 伪元素 都是用于向选择器加特殊效果;
- 伪类 于 伪元素 的 本质区别在于是否抽象的创建了新的元素;
- 伪类 只要 不是互斥 的就可以 叠加使用;
- 伪类优先级 === 类优先级;
- 伪元素优先级 === 标签优先级;
25. 使用CSS怎么让谷歌浏览器支持小于12px的文字?
26. BFC是什么?
- 定义:
- BFC简称为块级格式化上下文,它是一个完全独立的渲染区域(布局环境),它规定了内部的盒子如何布局,并且不会影响到外面元素的布局;
- 布局规则:
- 内部的 Box 会在垂直方向,一个接一个地放置;
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠; - 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC 的区域不会与 float box 重叠;
- BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此;
- 计算 BFC 的高度时,浮动元素也参与计算;
- 哪些CSS属性会触发BFC:
float
属性不为 none
;position
为 absolute
或 fixed
;display
为 inline-block、table-cell、table-caption、flex、inline-flex
;overflow
不为 visible
;
27. vh/vw单位,与auto, 100%有什么区别
vh/vw
: 视口大小占比, 与设备相关;auto
: 为默认值, 通常与设备无关;100%
: 受父容器的影响;