CSS样式.md · 刘校东/react-sty

# CSS样式

## 样式选择器

权重：!important > id > class = 属性选择器 > 标签 > 通配符*

- id

- 标签(div,h1)

- 类名(class)

- 通配符*

- 属性选择器

```html
  <style>
    [type = "text"] {
      width: 100px;
    }
    [type = "password"] {
      width: 200px;
    }
    
    /* 只要有id标签都生效 */
    [id] {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
  
  <input type="text"/>
  <input type="password"/>
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <h1 id="box3">
    box3
  </h1>
  ```

- 伪元素

- 派生选择器、父子选择器

```css
  /* 不同选择器间可随意组合，但id建议不组合，因为id已经是唯一的了 */
  div p {
    color: green;
  }
  ```

## 样式分类

- 内联样式（行内样式）==> 在标签中直接编辑style属性；
- 内部样式表 ==> html中使用<style></style>标签引入；
- 外部样式表 ==> html中引入外部css文件；

权重： 内联样式 > 内部样式表 > 外部样式表

## CSS 权重

| 选择器       | 权重值 |
| ------------ | ------ |
| *            | 0      |
| 标签，伪元素 | 1      |
| class，伪类  | 10     |
| id           | 100    |
| 内联样式     | 1000   |
| !important   | 正无穷 |

## [HTML元素分类【三种类型】](https://www.cnblogs.com/luoyishan/p/8316503.html)

- 块元素：block

1. 可设置宽高；
  2. 独占一行，并尽可能占据可用的全部宽度；
  3. 默认宽度与父元素保持一致（table除外，table的默认宽度与td单元格内容相关）；
  4. 高度由内容撑开，若无内容则为0；

```html
  常见块级标签：body、 h1~h6、 p、 div、 table、 form、 ul、 ol、li、header、footer、section、table
  ```

- 行内元素：inline

1. 默认尺寸由内容决定，不可设置宽高；
  2. 可与其他元素共行显示；

```html
  常见行内元素：span 、lable 、a 、b、 i、strong、u、s、sub、sup、em
  ```

- 行内块元素：inline-block

1. 可以与其他元素共行显示；
  2. 可以手动设置宽高；
  3. 宽度和高度都由内容撑开；
  
  ```html
  常见行内块元素：img、form、botton
  ```

### [标签嵌套](https://blog.csdn.net/yyl927117/article/details/70230044)

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素；

2. `p`中不能放块级元素里面，但是可以放`input`和`img`(可以但也建议嵌套)；

3. h1~h6不能相互嵌套;

4. **特别注意：**li 内可以包含 div 标签

5. 行内元素只能嵌套行内元素或行内块元素（可以但也不建议嵌套）

块元素可以手动设置宽高，如果内容超出尺寸范围，文本内容超出设置的宽高样式，会发生文本溢出！！
   属性：overflow  取值:

visible ： 默认值，表示溢出内容可见。
   hidden ： 溢出内容隐藏。
   scroll : 为元素添加水平和垂直方向的滚动条（不论内容是否溢出）。
   auto ： 自动在溢出方向添加可用的滚动条（哪个方向溢出加在哪个方向）。

## CSS常用属性

- text-decoration：文本修饰

- underline  下划线
  - overline  上划线
  - line-through 删除线
  - none 无

- line-height: 行高，可设置字体垂直方向居中

- cursor：光标

- pointer 小手势
  - not-allowed 禁止操作
  - help 问好

- 单行文本截断和显示省略号的三大件

```html
  <style>
    div {
      width: 200px;
      height: 22px;
      white-space: nowrap; /* 不换行 */
      overflow-x: hidden; /* 溢出部分隐藏 */
      text-overflow: ellipsis; /* 隐藏部分加省略号 */
    }
  </style>
  
  <div>
    <span>
    	我非常想成为一个成功的WEB工程师！！！
    </span>
  </div>
  ```

- 相邻兄弟选择器 +

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
          .checkbox{
            height: 100px;
            width: 100px;
            border: 6px solid black;
            border-radius: 50%; /* 圆形 */
          }
  
          .checkbox input[type="checkbox"] {
              display: none;
          }
  
          .checkbox label {
              background-color: black;
              height: 50px;
              width: 50px;
              display: block;
              margin: 25px;   /* 水平垂直居中 */
              border-radius: 50%; /* 圆形 */
              opacity: 0;
              filter: alpha(opacity=0); /* IE兼容性 */
          }
  
          /* + 表示同级标签的后一个兄弟标签 */
          .checkbox input[type="checkbox"]:checked + label {
              opacity: 1;
              filter: alpha(opacity=100); /* IE兼容性 */
          }
      </style>
  </head>
  <body>
      <div class="checkbox">
          <input type="checkbox" id="checkbox"/>
          <label for="checkbox"></label>
        </div>
  </body>
  </html>
  所有 CSS 伪类
  ```

- vertical-align：用于解决行内块和行内元素并排垂直对齐的问题

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>vertical-align用于解决行内块和行内元素并排垂直对齐的问题</title>
      <style>
          .triangle {
              height: 0;
              width: 0;
              border: 20px solid transparent;
              border-left-color: black;
              display: inline-block;
          }
  
          .content {
              width: 200px;
              height: 100px;
              border: 1px solid black;
              display: inline-block;
              /* 必须加在行内块元素中，值可以为top|middle|bottom|像素值 */
              vertical-align: middle; 
          }
      </style>
  </head>
  <body>
      
      <div class="content">123</div><span class="triangle"></span>
  </body>
  </html>
  ```

- 容器内文本设置居中

- 单行文本，设置line-height属性和容器宽度相同即可
  - 多行文本：借助表格table的默认居中对齐特性
    1. 将容器的display设置为table
    2. 将容器内文本的display设置为table-cell
    3. 将容器内文本的verticall-align设置为middle

- 两栏设计：左边栏固定300px宽度，剩下宽度为右边栏，可伸缩

- 方法一，使用定位
  
  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>使用定位进行两栏设计</title>
      <style>
          html,
          body {
              margin: 0;
              height: 100%; /* 占据整个高度 */
              overflow-y: hidden; /* 浏览器无垂直滚动条 */
          }
          .left {
              height: 100%;
              width: 300px;
              background-color: red;
              position: absolute;
              left: 0;
              top: 0;
          }
  
          .right {
              height: 100%;
              margin-left: 300px;
              background-color: yellow;
          }
      </style>
  </head>
  <body>
      <div class="left">left</div>
      <div class="right">right</div>
  </body>
  </html>
  ```
  
  - 方法二：使用弹性布局
  
  ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        overflow-y: hidden;
      }
  
      body {
        display: flex; /* 必须给父级设弹性布局 */
      }
  
      .left {
        width: 300px;
        height: 100%;
        background-color: black;
      }
  
      .right {
        flex: 1; /* 设置右侧伸缩因子为1 */
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  </html>
  ```

## [所有 CSS 伪类](https://www.w3school.com.cn/css/css_pseudo_classes.asp)

## [CSS 伪元素](https://www.w3school.com.cn/css/css_pseudo_elements.asp)

**注：伪元素是内联元素**

js通过dom获取元素样式

```js
// window.getComputedStyle(node, null | '伪元素')

node = document.getElementsByClassName('box');
// 获取自身样式
window.getComputedStyle(node, null)
// 获取伪元素before样式
window.getComputedStyle(node, 'after')
// 获取伪元素after样式
window.getComputedStyle(node, 'before')
```

## 浮动

- 清除浮动的借用元素必须是块级元素；

- 块级元素是无法识别浮动元素的位置，需要借助块级元素来清除浮动

- 方法一：浮动元素后加一个块级元素，设置清除浮动

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
      .box {
        width: 400px;
        border: 5px solid black;
      }
  
      .box1 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
      }
  
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
      }
  
      .clear-fix {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <p class="clear-fix"></p>
    </div>
  </body>
  </html>
  ```

- 方法二：使用伪元素，设置清除浮动（推荐）

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        
      /* 定义类clear-fix::after，清除浮动 */
      .clear-fix::after {
        content: "";
        display: block;
        clear: both;
      }
        
      .box {
        width: 400px;
        border: 5px solid black;
      }
  
      .box1 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
      }
  
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box clear-fix">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
    </div>
  </body>
  </html>
  ```

**行内/行内块元素是可以识别浮动元素的位置的，但不可以识别绝对定位元素位置。因此对话框一般用绝对定位处理**

**[清除浮动的四种方法](https://blog.csdn.net/weixin_45297746/article/details/108581448)**

## 盒模型

- 当设置盒子属性box-sizing为border-box时，边框宽度不会占据子元素的空间大小

```css
  /* box-sizing 的浏览器兼容性 */
  box-sizing: border-box;			/* css标准 */
  -moz-box-sizing: border-box;	/* firefox */
  -webkit-box-sizing: border-box; /* chrome、safari */
  -ms-box-sizing: border-box;		/* IE8以下 */
  -o-box-sizing: border-box;		/* opera */
  ```

## BFC

全称：Block Formatting Context，块级格式化上下文

**BFC触发条件：**

**可解决以下问题：**

1. 阻止元素被浮动元素覆盖
2. 阻止margin合并
3. 阻止margin塌陷

## CSS 书写顺序

1. 布局
   - display
   - position
   - float
   - clear
2. 自身属性：
   - width
   - height
   - margin
   - padding
   - border
   - background
3. 文本属性
   - color
   - font
   - text-align
   - vertical-align
   - whitespace

## 案例

- todolist

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <style>
      ul,
      ol,
      li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
  
      input,
      textarea {
        outline: none;
        box-sizing: border-box;
      }
  
      .todo-list {
        width: 400px;
        /* border: 1px solid red; */
        font-size: 14px;
        color: #333;
      }
  
      .todo-list > * {
        margin-top: 10px;
      }
  
      .add-list {
        width: 100%;
        height: 30px;
        border: 1px solid skyblue;
        border-radius: 3px;
      }
  
      .list li {
        border: 1px solid #666;
        height: 30px;
        line-height: 30px;
        position: relative;
      }
  
      .list li:hover {
        background-color: #eee;
      }
  
      button {
        /* float: right; */
        position: absolute;
        right: 10px;
        top: 1px;     
        /* 浮动布局top right bottom left 无效, 只能通过margin设置 */
        /* margin-right: 10px; */
        padding: 3px 10px;
        background-color: coral;
        color: white;
      }
  
      .summary {
        position: relative;
        height: 30px;
        line-height: 30px;
        /* border: 1px solid red; */
      }
    </style>
  </head>
  <body>
    <div class="todo-list">
      <input class="add-list" type="text" placeholder="请输入你任务的名称，按回车键确认...">
      <ol class="list">
        <li>
          <input type="checkbox" id="eat">
          <label for="eat">吃饭</label>
          <button>删除</button>
        </li>
        <li>
          <input type="checkbox" id="sleep">
          <label for="sleep">睡觉</label>
          <button>删除</button>
        </li>
      </ol>
      <div class="summary">
        <input type="checkbox" id="total">
        <label for="total">已完成{0}/全部{2}</label>
        <button>删除已完成</button>
      </div>
    </div>
  </body>
  </html>
  ```

![image-20211022150221348](.assets/image-20211022150221348.png)

- 走马灯carousel  [ˌkarəˈsɛl]

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>走马灯</title>
  
      <style>
          .carousel {
              position: relative;
              border: 1px solid black;
              display: inline-block;
          }
  
          img {
              height: 400px;
              display: none;
          }
          
          img.active {
              display: block;
          }
  
          .slider {
              /* height: 18px; */
              /* width: 180px; */
              /* background-color: #666; */
              position: absolute;
              left: 50px;
              bottom: 40px;
          }
  
          .indicator {
              /* height: 18px; */
              /* width: 18px; */
              display: block;
              float: left;
              /* background-color: yellow; */
              /* border: 1px solid black; */
              box-sizing: border-box;
              margin-right: 4px;
          }
  
          .indicator::before {
              content: "";
              height: 11px;
              width: 11px;
              box-sizing: border-box;
              border: 3px solid #666;
              opacity: .3;
              display: block;
              float: left;
              border-radius: 50%;
          }
  
          .indicator.active::after {
              content: "";
              height: 11px;
              width: 11px;
              background-color: white;
              display: block;
              border-radius: 50%;
          }
      </style>
  </head>
  <body>
      <div class="carousel">
          <div class="img">
              <img class="active" src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/59973545811/FocusFullshop/CkRqZnMvdDEvMTg2NjAzLzM5LzE0NDkzLzQxNzk0Ny82MGY4ZWM1ZUU2OTM5MTJhYy9hMzU4NGU1OTVhYzEyZTJiLnBuZxIJMi10eV8wXzUzMAI47ot6QhMKD-WNjuS4uueslOiusOacrBAAQhEKDeenkuadgOS7tzYzODgQAUIQCgznq4vljbPmiqLotK0QAkIHCgPmiqIQB1jT3s613wE/cr/s/q.jpg" />
              <img src="https://img14.360buyimg.com/babel/s1180x940_jfs/t1/170210/26/26239/131007/616cd997Ecbe5ae6f/b92b3b715211325f.jpg.webp" alt="">
          </div>
          <div class="slider">
              <i class="indicator active"></i>
              <i class="indicator"></i>
              <i class="indicator"></i>
              <i class="indicator"></i>
              <i class="indicator"></i>
              <i class="indicator"></i>
              <i class="indicator"></i>
          </div>
      </div>
  </body>
  </html>
  ```

- 伪元素使用attr，拼接语句。

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        p::after {
          content: attr(username);
        }
      </style>
  <body>
    <p username="xiao">welcome master </p>
  </body>
  </html>
  ```

- [回到顶部](https://www.cnblogs.com/xuzhudong/p/8697533.html)

1. 使用锚点Anchor，`<a>`标签;
  2. 设置document.documentElement.scrollTop = 0;
  3. 使用函数scrollTo (x, y)；
  4. 使用函数scrollBy (x, y);
  5. 使用函数Element.scrollIntoView (true | false);

- 码云

```html
  ```

![image-20211022173236579](.assets/image-20211022173236579.png)

![image-20211022173313406](.assets/image-20211022173313406.png)

![image-20211022173332532](.assets/image-20211022173332532.png)

刘校东/react-sty

简介

发行版

贡献者

近期动态

刘校东/react-sty .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

刘校东/react-sty