CSS基础知识｜青训营在青训营的课程中，我对CSS技术进行了全面的学习，从基础概念到高级特性，深入了解了CSS在网页

在青训营的课程中，我对CSS技术进行了全面的学习，从基础概念到高级特性，深入了解了CSS在网页设计和开发中的重要性和灵活性。下面是我的学习笔记

一、CSS基础知识

1.1 选择器和样式规则

CSS的核心是选择器和样式规则的配合。选择器用于定位HTML文档中的元素，而样式规则则定义了这些元素的外观和布局。我深入了解了各种类型的选择器，如元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。学会灵活使用不同的选择器，可以更好地控制页面的样式。

1.2 盒模型

盒模型是CSS布局的基础，了解了内容区域、内边距、边框和外边距四个部分，以及盒模型的两种标准：content-box和border-box。理解了盒模型有助于解决布局相关的问题，并能更好地控制元素的大小和间距。

1.3 浮动和定位

浮动和定位是CSS中常用的布局技术。通过学习浮动和定位，我掌握了如何实现响应式布局、制作吸顶菜单和实现一些特殊效果等。同时，也了解到它们在现代CSS布局中的应用已经逐渐减少，应该优先考虑Flexbox和Grid等新的布局方式。

1.4 盒模型的更多细节

除了常见的content-box和border-box盒模型，CSS还有padding-box和margin-box盒模型，但它们在实际开发中使用较少。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* content-box */
    .box1 {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid red;
      margin: 10px;
    }

    /* border-box */
    .box2 {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid red;
      margin: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box1">Content Box</div>
  <div class="box2">Border Box</div>
</body>
</html>

1.5 CSS选择器的组合

CSS选择器的组合可以帮助我们更精确地选择目标元素，以实现更具针对性的样式控制。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 选择所有带有class为"button"的a标签 */
    a.button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      text-decoration: none;
    }

    /* 选择父元素为<ul>的第一个子元素<li> */
    ul > li:first-child {
      font-weight: bold;
    }

    /* 选择类名为"selected"的li元素下的所有直接子元素a */
    li.selected > a {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li class="selected">Item 2 <a href="#">Link</a></li>
    <li>Item 3</li>
  </ul>
  <a href="#" class="button">Click me!</a>
</body>
</html>

二、CSS高级特性

2.1 Flexbox

Flexbox是一种用于一维布局的弹性盒模型。学习了Flexbox后，我对网页布局有了更深的理解，并发现它比传统布局更加灵活和方便。通过控制容器和项目的属性，我们可以轻松地实现水平居中、垂直居中等布局效果。

2.2 Grid

Grid是一种用于二维布局的弹性网格模型。与Flexbox相比，Grid更适用于复杂的布局需求。我学会了如何定义网格容器和网格项目，并灵活运用它们来创建网页布局。Grid提供了更多的布局控制选项，对于网页的响应式设计和多列布局非常有用。

2.3 过渡与动画

CSS过渡和动画能够为网页增添生动的效果，提升用户体验。我了解了如何使用过渡和关键帧动画（@keyframes）来实现平滑的动画效果，同时避免滥用动画对性能造成不良影响。

2.4 响应式设计

响应式设计是现代网页设计的重要概念。学习了媒体查询（Media Queries）后，我可以根据设备的不同特性，为不同的屏幕尺寸和分辨率编写不同的CSS样式，使得网页在不同终端上都能有良好的显示效果。

CSS基础知识 ｜ 青训营