CSS笔记

## 简介

> 本文用于记录常用的CSS技巧。
> 
> 持续更新中。。。

<!-- more -->

## 选择器

### 子选择器


```css
/* class为div的子元素中，class为sunDiv的元素，将其`margin-top`设置为`0.2rem` */
.div > .sunDiv {
  margin-top: 0.2rem;
}
```

## 布局

### Flex居中

> flex详解推荐阅读：[Flex 布局教程：语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

- 只需在想要其内部居中的盒子上增加以下css样式即可

```css
.div {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 事件

### div移入变色

```css
.div:hover {
  background-color: aliceblue;
}
```

### div移入变小手

```css
.div {
  cursor: pointer;
}
```

## 文本

### 字体加粗

```css
.bold-text {
    font-weight: bold;
}
```

### a标签去除下划线

```css
a {
  text-decoration: none;
}
```

## 函数

### calc()计算函数

```css
/* 使div高度与浏览器高度一致 */
.div {
  height: calc(100vh);
}
```

## @media

@media是一种响应式设计的技术，它可以根据不同的设备屏幕大小和分辨率，自适应地调整网页的样式和布局。下面是几个@media常见的使用示例：

1. 响应式布局

> 响应式布局是指网页的布局可以随着设备屏幕大小的变化而自适应调整。通常使用@media规则来实现响应式布局。
>
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，页面中的图片会缩小，以适应较小的屏幕大小：

```css
@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}
```

2. 隐藏某些元素

> 有时候，我们希望在手机屏幕上隐藏某些较大的元素，以便页面更好地适应较小的屏幕。可以使用@media规则来实现这一功能。
> 
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，隐藏网页上的某个div元素：

```css
@media screen and (max-width: 768px) {
  #myDiv {
    display: none;
    
    /*display: block; 显示*/
    /*visibility: visible; 显示*/
    /*visibility: hidden; 隐藏*/
  }
}
```

3. 调整字体大小

> 当屏幕尺寸较小时，为了让文本在较小的屏幕上更容易阅读，我们可能需要调整字体大小。可以使用@media规则来实现这一功能。
>
> 例如，下面的代码片段定义了当屏幕宽度小于等于768像素时，将段落文本的字体大小调整为14像素：

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

这些都是@media规则的一些常见用法示例，开发者可以根据具体的需求，自由组合和使用这些规则，实现网页的响应式设计。