前端经典面试题合集, CSS 选择器有哪些?优先级分别是什么?

Step 1

Q:: CSS选择器有哪些？优先级分别是什么？

A:: CSS选择器包括基础选择器、组合选择器和伪类选择器等。基础选择器有：元素选择器（如 div）、类选择器（如 .class）、ID选择器（如 #id）、通配符选择器（如 *）。组合选择器包括：后代选择器（如 div p）、子选择器（如 div > p）、相邻兄弟选择器（如 div + p）和通用兄弟选择器（如 div ~ p）。伪类选择器包括：:hover、:active、:focus 等。

CSS 优先级从高到低依次为：!important > 内联样式 > ID 选择器 > 类选择器和伪类选择器 > 元素选择器 > 通配符选择器。

Step 2

Q:: 解释一下CSS的盒模型是什么？

A:: CSS 盒模型是指一个元素在网页上占据的空间，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。标准盒模型中，元素的总宽度和高度由内容宽度/高度加上内边距、边框和外边距决定；而在 IE 盒模型中，内容宽度/高度包含内边距和边框。可以通过 box-sizing 属性来切换这两种模型。

Step 3

Q:: 什么是Flexbox布局？它有哪些常用属性？

A:: Flexbox（弹性盒子布局）是一种一维的布局模型，用来分配容器内空间并对齐其内容。常用属性包括：

- 容器属性：display: flex 或 display: inline-flex，flex-direction，flex-wrap，justify-content，align-items，align-content - 项目属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。