CSS笔记及实践 ｜ 青训营

这几天我在字节跳动前端青训营学到了许多CSS的知识和实践技巧，接下来在这篇文章里想总结一下我的学习心得与体会。

CSS的基本语法结构,它是由选择器、属性和值这三部分组成的。选择器用于匹配HTML元素,属性是希望改变的样式,值就是样式属性的值。比如:

h1 { color: red; }

这里h1是选择器,color是属性,red是值。还有很多选择器比如后代选择器、子选择器、相邻兄弟选择器等。

盒模型,决定了元素如何布局和占用空间。盒模型由外到内包括:边距、边框、内边距和内容。理解盒模型对掌握布局非常关键。还要注意标准盒模型和怪异盒模型的区别。

布局方面,之前使用的传统布局方式是浮动和定位,这两种方法存在一定问题,CSS3发展出了更强大的Flex和Grid这两种布局方式。Flex用于一维布局,可以轻松实现均分和对齐等效果。Grid是二维布局,可以通过网格线来分成行和列布局。这两种布局方式可以大大减少布局代码。

对于样式的复用,过去我们通过给元素添加class来复用样式。但是这样会产生大量样式类名。CSS3提出了自定义属性的特性,我们可以定义一些变量,然后在不同的选择器里复用这些变量。这种方式可以大大提高样式编写的复用性和维护性>

在实践CSS动画方面,之前我们通过定时改变类名的方式来实现动画,这很笨重。CSS3 Animation提供了keyframe和transition,可以通过关键帧来描述一个动画,并控制其时长、速度曲线等。配合JavaScript事件,我们可以很方便地触发这些预定义好的动画

CSS的兼容性问题一直是一个大坑。不同浏览器对CSS特性的支持程度各有不同。我们需要注意css hack的写法适配不同浏览器,以及一些特性需要添加浏览器前缀等问题。同时要使用Autoprefixer工具来自动添加前缀。

下面是一个CSS代码展现学习成果：

:root {
  --main-color: #3498db;
  --accent-color: #f1c40f;
}

/* Flex布局 */
.flex-container {
  display: flex; 
}

.flex-item {
  flex: 1;
}

/* 响应式布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

/* 过渡实现悬停效果*/
.box {
  transition: all 0.3s ease;
}

.box:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
}

/* 动画 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.slide {
  animation: slideIn 1s ease;
}