前端面试题--css篇

一、选择器及优先级

1. 元素选择器

2. id选择器

3. 类别选择器

4. 通配符选择器

5. 复合选择器--交集选择器：div.red{} 并集选择器：div，.red{}

6. 关系选择器

子元素选择器：父元素>子元素

后代元素选择器：祖先 后代

兄弟元素选择器：只选择一个兄弟：前一个+后一个 选择下边所有兄弟：兄~弟

属性选择器：【属性名】 选择含有指定属性的元素

7. 伪类选择器

：first-child 第一个子元素

：last-child 最后一个子元素

：nth-child（n） 选中第n个子元素

超链接伪类 a：hover 鼠标移入 a：active 鼠标点击

8. 伪元素选择器

：：first-letter 第一个字母

：：first-line 第一行

：：before 元素开始的位置

：：after 元素结束的位置

选择器的权重

内联样式>id选择器>类和伪类选择器>元素选择器>通配符选择器

二、css中可继承属性和不可继承属性

可继承属性：

1. 字体系列属性 font-size font-family等

2. 文本系列属性 text-align text-indent line-height color等

3. 元素可见性 visibility 控制元素显示隐藏

4. 列表布局属性 list-style

不可继承属性：

1. display属性

2. 盒子模型属性 width height margin border padding等

3. 背景属性 background background-color background-image等

4. 定位属性 position float top bottom left right等

5. 轮廓样式属性：outline-style、outline-width、outline-color、outline等

三、display属性值及作用

inline：将元素设置成行内元素

block：将元素设置成块元素

inline-block：将元素设置成行内块元素，既可以设置宽度和高度又不会独占一行

none：元素不显示并且会从文档流中移除

inherit：规定从父元素继承display属性值

四、隐藏元素的方法有哪些

display：none 不占据页面空间，不会响应绑定的事件

visibility：hidden 仍占据页面空间，但不响应绑定的事件

opacity：0 占据页面空间，响应绑定的事件

position：absolute 绝对定位移出可视区

z-index：负值 其他元素盖住

五、link和@import的区别

link和@import都是外部引入css的方式

link是XHTML标签，除了加载css外，还可以定义其他事务，@import只能加载css；

link引入css时，在页面载入时同时加载，@import在页面完全载入以后再加载

link无兼容问题，@import低版本浏览器不支持

link支持JavaScript控制DOM改变样式，@import不支持

六、盒模型

标准盒模型：

content-padding-margin-border

标准盒模型width和height属性范围只包含content

IE盒模型：

content-padding-border-margin

IE盒模型width和height属性范围包含content、padding和border

box-sizing：content-box表示标准盒模型

box-sizing：border-box表示IE盒模型

border-style属性的值：solid-实线 dotted-点状虚线 dashed-虚线 double-双线

七、px、em和rem的区别

px是固定的单位长度

em是相对于元素的字体大小来计算的

rem是相对于根元素字体大小来计算的

八、css优化和提高性能的方式

1. 加载性能

css压缩；

使用单一样式

减少使用@import，尽量使用link

2. 选择器性能

选择器的最后部分为关键选择器；

避免使用通配符选择器，少用标签选择器，少用后代选择器

3. 渲染性能

慎用浮动和定位

4. 可维护性

将具有相同属性的样式抽离出来；

样式与内容分离；

九、单行、多行文本溢出

单行文本溢出：

overflow：hidden text-overflow：ellipsis（溢出部分省略号显示）white-space: nowrap;（规定段落中的文本不换行）

多行文本溢出：

overflow: hidden; // 溢出隐藏

text-overflow: ellipsis; // 溢出⽤省略号显示

display:-webkit-box; // 作为弹性伸缩盒⼦模型显示。

-webkit-box-orient:vertical; // 设置伸缩盒⼦的⼦元素排列⽅式：从上到下垂直排列

-webkit-line-clamp:3;

十、媒体查询

通过使用@media可以根据不同屏幕尺寸设置不同样式，当重置浏览器大小的过程，页面也会根据浏 览器的宽度和高度重新渲染页面

@media属性有四种类型 all--适用所有设备 print--打印页面 screen--计算机屏幕（默认） speech--朗读页面

关键字将媒体类型或多个特性连接到一起作为媒体查询的条件 包括：and not only

十一、浮动

定义：通过浮动可以使一个元素可以向其父元素的左侧或右侧移动

none：默认值 元素不浮动

left：元素向左浮动

right：元素向右浮动

脱离文档流的特点：

元素脱离文档流后不再区分块元素和行内元素，块元素不再独占页面一行，块元素的高度和宽度被内

容撑开；行内元素变为块元素，特点和块元素一样

十二、高度塌陷

在浮动布局中，父元素的高度默认是由子元素撑开的，当子元素设置浮动后，就会脱离文档流，不能撑

起父元素的高度，导致父元素高度塌陷；

解决办法：1、为父元素设置overflow：hidden 原理是为父元素开启了BFC，使父元素变为一个独立 的布局；

2、通过.clearfix

.clearfix::before,.clearfix::after{

content:'';

display:table;

clear:both;}

如果不希望某个元素因为其他元素的影响而改变位置，可以为该元素设置clear：left或right

十三、定位position的属性及作用

1、relative 相对定位

relative的参照物是其在文档流中的位置；

相对定位会提升元素的层级，不会脱离文档流；

2、absolute 绝对定位

绝对定位是相对其包含块进行定位，包含块是指离当前元素最近的开启定位的祖先元素，当其所有祖先

元素都没有开启定位时则相对根元素进行定位；

元素会脱离文档流；

3、fixed 固定定位

固定定位是一种特殊的绝对定位，其大部分特点都和绝对定位一样，不同的是固定定位永远是相对于浏

览器窗口进行定位，视口的特点是固定不动，所以固定定位也不动；

4、sticky 粘性定位

粘性定位和相对定位的特点基本一致，不同之处是粘性定位可以在到达某个位置将其固定，所以还需要

设置一个top值

十四、flex弹性布局

主要用来代替浮动来完成页面的布局，可以响应式的实现页面的布局；

display：flex 设置为块级的弹性容器

display：inline-flex 设置为行内的弹性容器

属性：

1、flex-direction指定容器中弹性元素的排列方式

row 默认左向右水平排列 row-reverse 右向左水平排列

column 上向下纵向排列 column-reverse 下向上纵向排列

2、flex-wrap 指定弹性元素是否可以自动换行

nowrap 默认不可以 wrap 可以

3、justify-content 如何分配主轴的空白空间

flex-start 排列在当前行的最左边 flex-end 排列在当前行的最右边

center 居中 space-between 相同间隔排列，两边不留白

space-around 相同间隔排列，两边留白等于间隔的一半

4、align-items 同一行子元素在辅轴的对齐方式

stretch 默认值 将元素的长度设置为相同的值

center 居中

flex-start 不拉伸，元素沿辅轴对齐

flex-end 元素沿辅轴终边对齐

5、align-content 同一列子元素在主轴的对齐方式

flex-start flex-end space-between space-around center

十五、水平垂直居中

1、使用flex布局，设置align-items：center和justify-content：center

2、使用绝对定位，将四个方向的值都设置为0，并将margin设置为auto，适用于有宽高