css前端知识点总结(必看篇)

这里是详细讲解“CSS前端知识点总结(必看篇)”的完整攻略。

1. 前言

文章主要分为以下几个部分：选择器、盒模型、布局、定位、浮动、清除浮动、伪类和伪元素、字体属性、文本属性、背景属性、边框属性、动画、响应式布局、Flex布局、Grid布局。

2. 选择器

选择器是指CSS中的样式规则，用于选中要应用样式的HTML元素。本篇文章介绍了CSS中最常见的选择器：元素选择器、ID选择器、类别选择器和组合选择器，以及CSS3新增的一些选择器，如属性选择器、伪类选择器和伪元素选择器。

示例代码：

/* 元素选择器 */
p {
  color: red;
}

/* ID选择器 */
#main {
  width: 80%;
}

/* 类别选择器 */
.list {
  list-style: none;
}

/* 组合选择器 */
ul.nav li.active a {
  color: blue;
}

/* 属性选择器 */
a[target='_blank'] {
  background-color: yellow;
}

/* 伪类选择器 */
a:hover {
  text-decoration: underline;
}

/* 伪元素选择器 */
h1::before {
  content: 'Chapter: ';
}

3. 盒模型

盒模型是Web页面布局中的基本概念，理解盒模型非常重要。本篇文章介绍了CSS盒模型的概念和计算方法，以及如何通过设置盒模型的属性来控制盒子的位置和大小。

示例代码：

/* 盒模型属性 */
.box {
  width: 500px;
  height: 300px;
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

4. 布局

布局是Web开发中最关键的一环，需要掌握CSS中的常用布局方式。本篇文章介绍了流动布局、浮动布局和定位布局，以及如何使用Flex布局和Grid布局。

示例代码：

/* 流动布局 */
.container {
  width: 100%;
}

.item {
  width: 25%;
  float: left;
}

/* 定位布局 */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Flex布局 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.item {
  flex: 1 0 auto;
}

/* Grid布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.item {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

5. 定位

定位是CSS中的一种概念，用于控制网页中元素的位置和大小。本篇文章详细介绍了CSS中的定位方式：相对定位、绝对定位、固定定位和粘滞定位。

示例代码：

/* 相对定位 */
.box {
  position: relative;
  left: 50px;
  top: 20px;
}

/* 绝对定位 */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 固定定位 */
.box {
  position: fixed;
  top: 0;
  left: 0;
}

/* 粘滞定位 */
.box {
  position: sticky;
  top: 0;
}

6. 浮动

浮动是CSS中的一种概念，用于控制网页中元素的位置和大小。本篇文章详细介绍了CSS中的浮动方式和如何清除浮动。

示例代码：

/* 浮动 */
.box {
  float: left;
}

/* 清除浮动 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

7. 伪类和伪元素

伪类和伪元素是CSS中的两个重要概念，用于选中一些HTML元素并对其应用特定的样式。本篇文章介绍了常见的伪类和伪元素，并且提供了一些使用示例。

示例代码：

/* 鼠标悬停 */
a:hover {
  text-decoration: underline;
}

/* 第一个元素 */
li:first-child {
  font-weight: bold;
}

/* 最后一个元素 */
li:last-child {
  font-style: italic;
}

/* 第一个子元素 */
ul > li:first-child {
  color: red;
}

/* 平行的前一个元素 */
h1 + p {
  margin-top: 20px;
}

/* 选中元素的前面 */
h3::before {
  content: 'Chapter: ';
}

/* 选中元素的后面 */
p::after {
  content: '...';
}

8. 字体属性、文本属性和背景属性

字体属性、文本属性和背景属性是CSS中非常重要的概念，用于控制文字和背景的样式。本篇文章详细介绍了CSS中的各种字体属性、文本属性和背景属性，以及如何使用这些属性来控制样式。

示例代码：

/* 字体属性 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

/* 文本属性 */
p {
  color: red;
  text-align: center;
  text-decoration: underline;
}

/* 背景属性 */
div {
  background-color: #ccc;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

9. 边框属性

边框属性是CSS中控制元素边框样式的一种方法。本篇文章详细介绍了CSS中边框属性的各种用法和示例。

示例代码：

/* 边框属性 */
div {
  border: 2px solid black;
  border-radius: 5px;
}

10. 动画

动画是CSS中非常重要的一种概念，可以让网页视觉上更加丰富和生动。本篇文章详细介绍了如何在CSS中使用动画，以及如何控制动画的时长、速度和方向等。

示例代码：

/* 动画 */
@keyframes anim-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

.box {
  animation-name: anim-bounce;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

11. 响应式布局

响应式布局是指网页可以根据不同设备和屏幕尺寸自动调整布局。本篇文章介绍了使用CSS媒体查询来实现响应式布局的方法。

示例代码：

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .box {
    width: 100%;
  }
}

12. Flex布局

Flex布局是一种相对新的CSS布局方式，可以使元素更加灵活地布局和排版。本篇文章详细讲解了Flex布局的各种属性。

示例代码：

/* Flex布局 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.item {
  flex: 1 0 auto;
}

13. Grid布局

Grid布局是一种基于网格的CSS布局方式，可以更加精细地控制元素的大小和位置。本篇文章详细介绍了Grid布局的各种属性和示例。

示例代码：

/* Grid布局 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

希望这份总结对你有所帮助！