CSS面试题：30道含答案和代码示例的练习题

1. 什么是 CSS？它的作用是什么？
   CSS（层叠样式表）是一种用于描述网页样式的语言。它的作用是控制网页的布局、字体、颜色、背景等方面的样式。
2. 如何在 HTML 页面中引入 CSS？
   可以使用 标签将 CSS 文件引入到 HTML 页面中。例如：

<link rel="stylesheet" href="styles.css">

1. 什么是选择器？如何使用选择器来匹配 HTML 元素？
   选择器是一种用于选择 HTML 元素的模式。可以使用标签名、类名、ID 等属性来匹配 HTML 元素。例如：

h1 { color: red; } // 选择所有的 <h1> 元素并将它们的颜色设置为红色
.my-class { font-size: 16px; } // 选择所有 class 属性为 "my-class" 的元素，并将它们的字体大小设置为 16px
#my-id { background-color: yellow; } // 选择 ID 属性为 "my-id" 的元素，并将它们的背景色设置为黄色

1. 什么是 CSS 盒模型？如何计算盒模型的宽度和高度？
   CSS 盒模型是一种用于描述 HTML 元素的尺寸和布局的模型。它由四个部分组成：内容区域、内边距、边框和外边距。盒模型的宽度和高度可以通过计算内容区域、内边距、边框和外边距的值来得到。
2. 如何设置 CSS 盒模型的尺寸？
   可以使用 width 和 height 属性来设置盒模型的尺寸。例如：

div {
  width: 100px;
  height: 50px;
}

1. 如何设置 CSS 盒模型的边框？
   可以使用 border 属性来设置盒模型的边框。例如：

div {
  border: 1px solid black;
}

1. 如何设置 CSS 盒模型的内边距和外边距？
   可以使用 padding 和 margin 属性来设置盒模型的内边距和外边距。例如：

div {
  padding: 10px;
  margin: 20px;
}

1. 如何设置 CSS 盒模型的背景颜色和背景图片？
   可以使用 background-color 和 background-image 属性来设置盒模型的背景颜色和背景图片。例如：

div {
  background-color: yellow;
  background-image: url("background.jpg");
}

1. 如何设置 CSS 文本的颜色、字体和大小？
   可以使用 color、font-family 和 font-size 属性来设置文本的颜色、字体和大小。例如：

p {
  color: blue;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

1. 如何设置 CSS 文本的对齐方式？
   可以使用 text-align 属性来设置文本的对齐方式。例如：

p {
  text-align: center;
}

1. 如何设置 CSS 文本的行高和字间距？
   可以使用 line-height 和 letter-spacing 属性来设置文本的行高和字间距。例如：

p {
  line-height: 1.5;
  letter-spacing: 2px;
}

1. 如何设置 CSS 列表的样式？
   可以使用 list-style-type 和 list-style-image 属性来设置列表的样式。例如：

ul {
  list-style-type: square;
  list-style-image: url("bullet.png");
}

1. 如何设置 CSS 超链接的样式？
   可以使用 a 标签和相关的伪类来设置超链接的样式。例如：

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

1. 如何设置 CSS 图片的样式？
   可以使用 img 标签和相关的属性来设置图片的样式。例如：

img {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

1. 如何设置 CSS 表格的样式？
   可以使用 table、tr、td 等标签和相关的属性来设置表格的样式。例如：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 5px;
}

1. 如何设置 CSS 浮动和清除浮动？
   可以使用 float 和 clear 属性来设置浮动和清除浮动。例如：

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

1. 如何设置 CSS 定位？
   可以使用 position、top、bottom、left 和 right 属性来设置定位。例如：

div {
  position: absolute;
  top: 50px;
  left: 50px;
}

1. 如何设置 CSS 动画？
   可以使用 @keyframes 规则和 animation 属性来设置 CSS 动画。例如：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
div {
  animation: rotate 2s linear infinite;
}

1. 如何设置 CSS 媒体查询？
   可以使用 @media 规则来设置 CSS 媒体查询。例如：

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

1. 如何设置 CSS 伸缩盒子布局？
   可以使用 display、flex、flex-direction、justify-content 和 align-items 属性来设置伸缩盒子布局。例如：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

1. 如何设置 CSS 网格布局？
   可以使用 display、grid-template-columns、grid-template-rows 和 grid-gap 属性来设置网格布局。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

1. 如何设置 CSS 变量？
   可以使用 --var-name 语法来定义 CSS 变量，使用 var(–var-name) 语法来引用 CSS 变量。例如：

:root {
  --primary-color: blue;
  --secondary-color: green;
}
div {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

1. 如何设置 CSS 滤镜效果？
   可以使用 filter 属性来设置 CSS 滤镜效果。例如：

img {
  filter: grayscale(100%);
}

1. 如何设置 CSS 模糊效果？
   可以使用 backdrop-filter 属性来设置 CSS 模糊效果。例如：

div {
  backdrop-filter: blur(5px);
}

1. 如何设置 CSS 框阴影效果？
   可以使用 box-shadow 属性来设置 CSS 框阴影效果。例如：

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

1. 如何设置 CSS 文字阴影效果？
   可以使用 text-shadow 属性来设置 CSS 文字阴影效果。例如：

h1 {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

1. 如何设置 CSS 透明度？
   可以使用 opacity 属性来设置 CSS 透明度。例如：

div {
  opacity: 0.5;
}

1. 如何设置 CSS 混合模式？
   可以使用 mix-blend-mode 属性来设置 CSS 混合模式。例如：

div {
  mix-blend-mode: multiply;
}

1. 如何设置 CSS 3D 变换？
   可以使用 transform 属性和相关的 3D 变换函数来设置 CSS 3D 变换。例如：

div {
  transform: perspective(1000px) rotateX(45deg) rotateY(45deg);
}

1. 如何设置 CSS 自定义光标？
   可以使用 cursor 属性和相关的自定义光标值来设置 CSS 自定义光标。例如：

div {
  cursor: url("custom-cursor.png"), auto;
}