CSS全面知识点及其应用

CSS（Cascading Style Sheets）是一种用于描述网页外观的样式表语言。以下是全面的 CSS 知识点：

一、CSS 基础概念

定义：CSS 用于控制 HTML 或 XML 文档的呈现方式，包括布局、颜色、字体、大小等。
层叠性和继承性：多个样式规则可以层叠应用于同一元素，同时某些样式属性可以从父元素继承到子元素。

二、CSS 语法

选择器：用于指定要应用样式的 HTML 元素。常见选择器有：
- 元素选择器（如 p 选择所有 <p> 元素）。
- 类选择器（以 . 开头，如 .my-class）。
- ID 选择器（以 # 开头，如 #my-id）。
- 后代选择器（如 div p 选择 <div> 元素内部的所有 <p> 元素）。
- 子选择器（如 div > p 选择 <div> 元素的直接子元素 <p>）等。
属性和值：指定要设置的样式属性及其值，如 color: red; 设置文本颜色为红色。

三、CSS 引入方式

1.内联样式：在 HTML 元素的 style 属性中直接编写 CSS 样式。

   <p style="color: blue;">This is blue text.</p>

2.内部样式表：在 HTML 文件的 <head> 标签中使用 <style> 标签定义 CSS 样式。

   <head>
     <style>
       p {
         color: green;
       }
     </style>
   </head>

3.外部样式表：将 CSS 代码保存为一个独立的 .css 文件，然后在 HTML 文件的 <head> 标签中使用 <link> 标签引入。

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

四、CSS 盒模型

组成：由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
```
div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}
```

计算实际尺寸：元素的实际宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度；实际高度同理。

五、CSS 布局

1.浮动（float）：使元素向左或向右浮动，可用于实现多列布局。

  .left-column {
     float: left;
     width: 30%;
   }
  .right-column {
     float: right;
     width: 70%;
   }

2.定位（position）：

· 相对定位（relative）：相对于元素在正常文档流中的位置进行定位。

  .box {
     position: relative;
     top: 20px;
     left: 20px;
   }

绝对定位（absolute）：相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于文档的初始包含块进行定位。
```
.absolute-box {
   position: absolute;
   top: 50px;
   right: 50px;
 }
```

固定定位（fixed）：相对于浏览器窗口进行定位。

.fixed-box {
   position: fixed;
   bottom: 20px;
   left: 20px;
 }

弹性布局（Flexbox）：
- 容器属性：
  - display: flex;：将容器设置为弹性布局。
  - flex-direction：设置主轴方向（row、column 等）。
  - justify-content：设置主轴上的对齐方式（center、flex-start、flex-end 等）。
  - align-items：设置交叉轴上的对齐方式（center、flex-start、flex-end 等）。
- 项目属性：
  - flex-grow：定义项目的放大比例。
  - flex-shrink：定义项目的缩小比例。
  - flex-basis：定义项目在主轴上的初始大小。
  .flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  }
  .flex-item {
  flex-grow: 1;
  }
网格布局（Grid）：
- 容器属性：
  - display: grid;：将容器设置为网格布局。
  - grid-template-columns：定义列的轨道大小和数量。
  - grid-template-rows：定义行的轨道大小和数量。
  - grid-gap：设置网格间隙。
- 项目属性：
  - grid-column：指定项目在网格中的列位置。
  - grid-row：指定项目在网格中的行位置。
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
  }
  .grid-item {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  }

六、CSS 文本样式

字体属性：
- font-family：设置字体。
- font-size：设置字体大小。
- font-weight：设置字体粗细。
- font-style：设置字体样式（normal、italic 等）。
  
  p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  }
文本对齐：
- text-align：设置文本的水平对齐方式（left、center、right 等）。
- vertical-align：设置文本的垂直对齐方式（top、middle、bottom 等）。
  
  .text-center {
  text-align: center;
  }
  img {
  vertical-align: middle;
  }
文本装饰：text-decoration：设置文本的装饰（underline、overline、line-through 等）。
```
a {
  text-decoration: none;
}
```

七、CSS 颜色和背景

颜色表示：
- 颜色名称（如 red、blue）。
- 十六进制值（如 #ff0000 表示红色）。
- RGB 值（如 rgb(255, 0, 0) 表示红色）。
- HSL 值（如 hsl(0, 100%, 50%) 表示红色）。
背景属性：
- background-color：设置背景颜色。
- background-image：设置背景图片。
- background-repeat：设置背景图片的重复方式（repeat、no-repeat、repeat-x、repeat-y）。
- background-position：设置背景图片的位置。
- background-size：设置背景图片的大小。
  
  .box {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  }

八、CSS 过渡和动画

1.过渡（transition）：用于在元素的状态发生变化时实现平滑的过渡效果。

  .button {
     background-color: blue;
     color: white;
     transition: background-color 0.5s ease;
   }
  .button:hover {
     background-color: green;
   }

2.动画（animation）：可以创建更复杂的动画效果。

   @keyframes move {
     from {
       left: 0;
     }
     to {
       left: 200px;
     }
   }
  .box {
     position: relative;
     animation: move 5s infinite;
   }

九、CSS 响应式设计

1.媒体查询（media query）：根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式。

   @media screen and (max-width: 768px) {
     body {
       font-size: 14px;
     }
   }

2.弹性布局和网格布局在响应式设计中的应用：可以根据不同的屏幕尺寸调整布局。

十、CSS 预处理器（如 Sass、Less）

1.变量：可以定义和使用变量来存储颜色、尺寸等常用值。

   $primary-color: blue;
  .button {
     background-color: $primary-color;
   }

2.嵌套：可以将 CSS 规则嵌套在其他规则中，提高代码的可读性和组织性。

  .nav {
     ul {
       list-style: none;
       margin: 0;
       padding: 0;
     }
     li {
       display: inline-block;
     }
   }

3.混合（mixin）：可以定义可重用的样式块，并在需要的地方调用。

   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     border-radius: $radius;
   }
  .box {
     @include border-radius(10px);
   }