CSS面试15问，让你成为前端专家！

前端

2023-07-28 19:14:12

CSS面试高频必考指南：15道核心题助你轻松脱颖而出

CSS3新特性
元素垂直水平居中的方法
display属性
伪类和伪元素
BFC（块级格式化上下文）
清除浮动
盒子模型
Flex布局
绘制三角形
px/em/rem/vh/vw区别
文本溢出的省略样式
CSS选择器权重计算
不可继承的CSS属性
display:none与visibility:hidden的区别
position属性

CSS3新特性

CSS3引入了许多令人兴奋的新特性，为Web开发人员提供了更强大的工具。这些新特性包括：

灵活布局（Flexbox）： 一种用于创建灵活、响应式布局的布局系统。
媒体查询（Media Queries）： 允许您根据设备或浏览器的特性定制CSS样式。
边框圆角（Border Radius）： 允许您创建具有圆角的元素。
渐变（Gradients）： 允许您在元素上创建平滑的颜色过渡。
动画（Animations）： 允许您创建元素的动画效果。
过渡（Transitions）： 允许您在元素的样式更改之间创建平滑的过渡。
变换（Transforms）： 允许您旋转、缩放、平移和倾斜元素。

元素垂直水平居中的方法

有几种方法可以将元素垂直或水平居中。

垂直居中：

使用flex布局 ：设置父元素的display属性为flex，并使用justify-content: center和align-items: center属性。
使用绝对定位 ：将子元素定位为绝对位置，并使用top和left属性将其居中。

水平居中：

使用flex布局 ：设置父元素的display属性为flex，并使用justify-content: center属性。
使用**margin: auto属性：将子元素的margin属性设置为auto`。

display属性

display属性指定元素如何在文档中显示。最常用的值包括：

block： 创建一个块级元素，占用水平空间并换行。
inline： 创建一个行内元素，不会换行。
inline-block： 创建一个块级元素，但可以在同一行上与其他元素并排显示。
flex： 创建一个flex布局容器。
grid： 创建一个网格布局容器。

伪类和伪元素

伪类和伪元素允许您在特定情况下或为特定元素添加样式。

伪类：

:hover ：当鼠标悬停在元素上时应用样式。
:active ：当元素被激活时应用样式。
:focus ：当元素获得焦点时应用样式。
:visited ：当链接被访问过时应用样式。
:link ：当链接未被访问时应用样式。

伪元素：

::before ：在元素之前插入内容。
::after ：在元素之后插入内容。

BFC（块级格式化上下文）

块级格式化上下文（BFC）是一种布局环境，其中元素与外部元素隔离。BFC中的元素不会影响外部元素的布局，也不会受到外部元素的影响。创建BFC的方法包括：

设置元素的float属性为left或right。
设置元素的display属性为block、inline-block、flex或grid。
设置元素的overflow属性为hidden或scroll。

清除浮动

浮动元素会影响其后面的元素的布局。清除浮动的方法包括：

使用clearfix ：在浮动元素的父元素之后添加一个具有clear: both属性的空元素。
使用**overflow: hidden属性：设置浮动元素的父元素的overflow属性为hidden`。

盒子模型

盒子模型了元素的尺寸和布局。它由以下部分组成：

内容区域： 元素的内容。
内边距： 内容区域与元素边框之间的空间。
边框： 元素的边框。
外边距： 边框与周围元素之间的空间。

Flex布局

Flex布局是一种用于创建灵活、响应式布局的布局系统。Flex布局的属性包括：

flex-direction： 指定元素的排列方向。
flex-wrap： 指定是否允许元素换行。
justify-content： 指定元素在主轴上的对齐方式。
align-items： 指定元素在交叉轴上的对齐方式。
align-content： 指定多行元素在交叉轴上的对齐方式。

绘制三角形

可以使用CSS绘制三角形。代码示例：

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid red;
}

px/em/rem/vh/vw区别

px (像素)： 一种绝对单位，表示元素的物理大小。
em： 一种相对单位，表示元素的字体大小。
rem： 一种相对单位，表示元素的根字体大小。
vh (视口高度)： 一种相对单位，表示视口高度的百分比。
vw (视口宽度)： 一种相对单位，表示视口宽度的百分比。

文本溢出的省略样式

可以使用text-overflow属性设置文本溢出的省略样式。常用的值包括：

ellipsis： 显示省略号(...)。
clip： 剪切文本。
initial： 默认值，不省略文本。

CSS选择器权重计算

CSS选择器权重用于确定当多个选择器应用于同一元素时哪个选择器具有最高优先级。权重由以下因素计算：

元素名称：1
类选择器：10
ID选择器：100
内联样式：1000

不可继承的CSS属性

以下CSS属性不可继承：

cursor： 指定光标形状。
display： 指定元素如何在文档中显示。
visibility： 指定元素是否可见。
position： 指定元素的定位类型。
float： 指定元素是否浮动。

display:none与visibility:hidden的区别

display:none： 元素不会在页面上显示，也不会占用空间。
visibility:hidden： 元素不会在页面上显示，但仍会占用空间。

position属性

position属性指定元素的定位类型。可能的取值包括：

static： 元素在正常流中定位。
relative： 元素相对于其正常流中的位置定位。
absolute： 元素相对于其最近的定位祖先元素定位。
fixed： 元素相对于视口定位。
sticky： 元素在正常流中定位，直到滚动到指定位置时才固定到视口上。

常见问题解答

CSS中有哪些常见的布局方式？
- 浮动布局
- 块级布局
- 内联布局
- Flex布局
- 网格布局
如何创建一个垂直居中的菜单？
- 使用flex布局：设置菜单父元素的display属性为flex，并使用align-items: center属性。
- 使用绝对定位：将菜单定位为绝对位置，并使用top: 50%和transform: translateY(-50%)属性将其垂直居中。
如何使一个元素响应浏览器窗口大小？
- 使用百分比单位：设置元素的宽度或高度为百分比。
- 使用视口单位：使用vh或vw单位来设置元素的大小。
- 使用媒体查询：根据浏览器窗口大小调整元素的样式。
如何创建带有圆角的按钮？
- 使用border-radius属性：设置按钮的border-radius属性为非零值。
- 使用伪元素：创建一个具有圆角的伪元素并将其定位在按钮上。
如何使一个元素在滚动时固定在屏幕顶部？
- 使用position: fixed：将元素的position属性设置为fixed。
- 使用sticky定位：将元素的position属性设置为sticky，并在达到所需位置时使用top属性将其固定。