2_本周学习——css各种选择器、css盒子模型、文档流、css新增特性

CSS各种选择器：

1. 标签选择器：直接使用标签名作为选择器。

p { color: blue; }

2. 类选择器：通过.前缀指定一个class名。

.my-class { color: red; }

3. ID选择器：通过#前缀指定一个元素的ID。

#my-id { color: green; }

4. 通用选择器：用*表示匹配任何元素。

* { margin: 0; padding: 0; }

5. 群组选择器：使用,分隔多个选择器。

h1, h2, h3 { font-weight: bold; }

6. 子选择器：用>表示直接子元素。

div > p { color: purple; }

7. 后代选择器：用空格表示所有后代元素。

div p { color: orange; }

8. 相邻兄弟选择器：用+表示紧跟在另一个元素后的元素。

p + div { background-color: cyan; }

9. 通用兄弟选择器：用~表示同一父元素下的所有某一元素之后的兄弟元素。

p ~ div { border: 1px solid black; }

10. 伪类选择器：用以表示元素的特殊状态，比如:hover、:active、:focus。

a:hover { text-decoration: underline; }

CSS盒子模型：

div {
  width: 300px;  /* 内容宽度 */
  height: 200px; /* 内容高度 */
  padding: 10px; /* 内边距 */
  border: 5px solid black; /* 边框 */
  margin: 20px; /* 外边距 */
}

文档流：

• 块级元素：默认占据一行，可以设置宽高。
• 内联元素/行内元素：与其他元素在同一行，不可以设置宽高。

CSS新特性：

1. Flexbox布局：

.container {
  display: flex; /* 开启Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. Grid布局：

.container {
  display: grid; /* 开启Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 三个等宽列 */
  grid-gap: 10px; /* 网格间隙 */
}

3. 媒体查询：响应式设计。

@media (max-width: 768px) {
  .column {
    flex-direction: column; /* 小屏设备列方向变为垂直 */
  }
}

4. CSS变量：

:root {
  --main-bg-color: coral; /* 定义全局变量 */
}
 
body {
  background-color: var(--main-bg-color); /* 使用变量 */
}

5. 阴影效果：

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 盒子阴影 */
  text-shadow: 2px 2px 4px #000000; /* 文字阴影 */
}

6. 圆角：

div {
  border-radius: 10px; /* 圆角 */
}

7. 渐变背景