重学CSS居中变量选择器 scss flex gird 数学函数背景图文本换行样式重置隐藏元素 has

居中

/* margin */
.container1 .content {
  width: 100px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* 多个块级元素 */
.container2 .box {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.container2 .content {
  margin-left: auto;
  margin-right: auto;
}

/* flex */
.container3 .content {
  display: flex;
  justify-content: center;
}

变量

button {
  --color-initial: black;
  border-color: var(--color-initial);
}

:root {
  --color: #666;
}

body {
  --color: #777;
}

h2 {
  color: var(--color);
}

p {
  --color: #666;
}

选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
    }

    div * {
      color: green !important;
    }

    .container3 + h2 {
      color: #777;
    }

    * .aaa * {
      color: #777 !important;
    }

    [data-aaa] {
      color: #777 !important;
    }

    [data-aaa="123"] {
      color: #777 !important;
    }

    [title~="dog"] {
      color: #777 !important;
    }

    /* 正常状态 */
    input[type="text"] {
      color: #777 !important;
    }

    /* 禁止状态 */
    input[type="text"]:disabled {
      color: #777 !important;
    }

    /* 未输入的时候 */
    input[type="email"]:valid {
      background-color: pink;
    }

    /* 输入的时候 */
    input[type="email"]:invalid {
      background-color: rgb(233, 91, 114);
    }

    /* 必填 */
    input:requi#777 {
      border: 1px solid #777;
    }

    /* 非必填 */
    input:optional {
      background-color: aqua;
    }

    /* 这个类型的第一个 */
    input:first-of-type {
      background-color: rgb(189, 255, 127);
    }

    /* 这个类型的最后一个 */
    input:last-of-type {
      background-color: rgb(189, 255, 127);
    }

    /* 这个类型的第二个 */
    input:nth-of-type(2) {
      border: 10px solid #777;
    }

    input:target {
      background-color: #777;
    }

    /* 包含某个类 */
    div:has(.flat) {
      background-color: #777;
      width: 1000px;
    }

    /* 伪类 */
    .alert::before {
      content: "alert";
      color: #777;
    }

    /* 伪类 */
    .alert::after {
      content: "alert";
      color: #777;
    }

    /* 输入提示 */
    input::placeholder {
      color: #777;
    }

    /* 选中文字 */
    .word::selection {
      color: #777;
    }
  </style>

  <body>
    <p class="word">11111111111111111111111111111111</p>
    <input type="text" placeholder="1111111" />
    <div class="alert">12312123</div>
    <input type="text" target />
    <input type="text" requi#777 />
    <input type="email" />
    <input type="text" />
    <input type="text" disabled value="231456" />
    <a href="">1111111111111111111111</a>
    <div class="vvv">
      <button class="flat">dadadada</button>
      <button class="flat danger">danger</button>
    </div>
  </body>
</html>

scss

scss.scss

$red: red;
// @import "./scss1.scss"; // 引入别的scss，变量被覆盖
@use "./scss1.scss" as c; // 引入别的scss，变量不会被覆盖

.btn {
  background-color: #999;

  &-yellow {
    background-color: yellow;
  }

  &-red {
    background-color: red;
  }
}

.ppp {
  font: {
    size: 20px; // font-size
  }

  color: $red !important;
}

$red: #999; // 会覆盖之前的

.pppp {
  color: $red !important;
}

.pp {
  color: c.$red; // use需要加上文件名
}

// 定义方法及引用
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($size) {
  width: $size;
  height: $size;
}

.aa {
  @include center;
  @include size(100px);
}

// 计算
.size {
  width: 100px - 60px;
  height: 100px - 60px;
  width: calc(10px * 10);
  width: calc(2000px / 10);
}

// 流程判断
@mixin theme($is-dark: true) {
  @if $is-dark ==true {
    background-color: #000;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}

.black {
  @include theme(true);
  @include size(100px);
}

.white {
  @include theme(false);
  @include size(100px);
}

// fon in 使用
$sizes: 40px, 50px, 60px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

// 继承扩展
%width {
  width: 100px;
  height: 100px;
}

%width_color {
  @extend %width;
  color: red;
}

.color {
  @extend %width_color;
}

// 媒体查询
p {
  @media (max-width: 500px) {
    font-size: 100px;

    // 嵌套
    @media (orientation: landscape) {
      line-height: 50px;
    }
  }
}

scss1.scss

$red: pink;

flex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
      color: white;
    }

    .baba {
      width: 450px;
      height: 450px;
      background-color: #666;
      display: flex;
      /* 从左到右 */
      flex-direction: row;
      /* 从右到左 */
      /* flex-direction: row-reverse; */
      /* 从上到下 */
      /* flex-direction: column; */
      /* 从下到上 */
      /* flex-direction: column-reverse; */

      /* 不换行 */
      /* flex-wrap: nowrap; */
      /* 换行 */
      flex-wrap: wrap;
      /* 换行顺序 */
      /* flex-wrap: wrap-reverse; */

      /* 两端对齐 */
      justify-content: space-between;
      /* 左对齐 */
      justify-content: flex-start;
      /* 右对齐 */
      justify-content: flex-end;
      /* 居中 */
      justify-content: center;
      /* 分散 */
      justify-content: space-around;

      /* 顶部对齐 */
      align-items: flex-start;
      /* 顶部对齐 */
      align-items: flex-end;
      /* 垂直居中对齐 */
      align-items: center;
      /* 顶部基线 */
      align-items: baseline;

      align-content: stretch;
      /* 顶部对齐 */
      align-content: flex-start;
      /* 底部对齐 */
      align-content: flex-end;
      /* 居中 */
      align-content: center;
      /* 顶部底部分散 */
      align-content: space-between;
      /* 顶部底部平分 */
      align-content: space-around;
    }

    .son {
      /* width: 100px; */
      /* height: 100px; */
      flex-grow: 0;
      background-color: #999;
    }

    .son1 {
      /* 越小越靠前 默认0 */
      order: 3;
      /* 按照这个比例分摊没用完的地方 */
      flex-grow: 3;
      /* 尺寸不够的时候，按照这个比例分摊占用自己的地方 */
      flex-shrink: 3;

      /* 简写 */
      /* 有剩余空间时候只放大不缩小 */
      flex: 0 1 auto;
      /* 不放大也不缩小 */
      flex: none;
    }

    .son2 {
      order: 1;
      flex-grow: 1;
    }
  </style>

  <body>
    <div class="baba">
      <div class="son son1 " style="height: 100px;width: 100px">1</div>
      <div class="son son2 " style="height: 110px;width: 110px">2</div>
      <div class="son son3 " style="height: 120px;width: 120px">3</div>
      <div class="son son4 " style="height: 130px;width: 130px">4</div>
      <div class="son son5 " style="height: 140px;width: 140px">5</div>
      <div class="son son6 " style="height: 150px;width: 150px">6</div>
    </div>
  </body>
</html>

gird

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
      color: white;
    }

    .container {
      width: 200px;
      height: 300px;
      display: grid;
      background-color: #666;
    }

    .item {
      background-color: #999;
      border: 1px solid #fff;
    }

    .container {
      display: grid;
      grid-template-columns: 40px 40px 40px;
      grid-template-columns: [one] 40px [two] 40px [three] 80px;
      /* 按比例分 */
      grid-template-columns: 1fr 2fr 3fr;
      /* 最小的宽度 */
      grid-template-columns: 1fr min-content 2fr;
      /* 最大宽度 */
      grid-template-columns: 1fr max-content 1fr;
      /* 重复 */
      grid-template-columns: repeat(3, 1fr);
      /* 最小最大值 */
      grid-template-columns: repeat(2, minmax(30px, max-content));
      /* 最大值传入，最小值为自身宽度 */
      grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px);

      grid-template-rows: 40px 100px 40px 40px;
      grid-template-rows: [one] 60px [two] 60px [three] 40px [four] 40px;

      grid-template-areas:
        "header header header"
        "main main .sidebar"
        "footer footer footer";

      /* 水平行间距 */
      column-gap: 10px;
      /* 垂直行间距 */
      row-gap: 10px;

      /* 分散方式 */
      justify-items: start;
      justify-items: end;
      justify-items: center;
      justify-items: stretch;

      /* 水平 整体内容对齐方式 */
      justify-content: start;
      justify-content: end;
      justify-content: center;
      justify-content: stretch;
      justify-content: space-around;
      justify-content: space-between;
      justify-content: space-evenly;

      /* 垂直 整体内容对齐方式 */
      align-content: start;
      align-content: center;
      align-content: end;
      align-content: stretch;
      align-content: space-around;
      align-content: space-between;
      align-content: space-evenly;
    }

    .item {
      /* 水平 单元格对齐方式 */
      justify-self: start;
      justify-self: end;
      justify-self: center;
      justify-self: stretch;

      /* 垂直 单元格对齐方式 */
      align-self: start;
      align-self: end;
      align-self: center;
      align-self: stretch;
    }

    .container div:nth-of-type(1) {
      /* 水平 单元格开始 */
      grid-column-start: 5;
      /* 水平 单元格结束 */
      grid-column-end: 7;
    }

    .container div:nth-of-type(2) {
      /* 垂直 单元格开始 */
      grid-row-start: 8;
      /* 垂直 单元格结束 */
      grid-row-end: 10;
    }

    .container div:nth-of-type(1) {
      /* 水平 单元格开始 */
      grid-column-start: span 2;
    }

    .container div:nth-of-type(8) {
      grid-column-start: 2;
      grid-column-end: 8;
      grid-row-start: 4;
      grid-row-end: 10;
    }

    .container {
      grid-auto-columns: 10px;
      grid-auto-rows: 10px;
    }

    .container {
      gap: 20px;
      column-gap: 10px;
      row-gap: 10px;

      /* justify-items */
      /* align-items: ; */
      place-items: start;

      /* justify-content */
      /* align-content */
      place-content: center;

      /* justify-self */
      /* align-self */
      place-self: end center;

      /* grid-column-start */
      /* grid-column-end */
      grid-column: 1 / 3;

      /* grid-row-start */
      /* grid-row-end */
      grid-row: 1 / 3;
    }
  </style>

  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
    </div>
  </body>
</html>

数学函数

body {
  background-color: #2a2e33;
  color: white;
}

.container {
  background-color: #666;

  width: calc(100px - 20px);
  /* 最小值,最佳值,最大值 */
  width: clamp(100px, 60%, 1000px);
  /* 同理上面的 */
  width: max(100px, min(60%, 1000px));

  font-size: clamp(16px, 5vw, 30px);

  font-size: max(16px, min(5vw, 50px));
  border: clamp(1px, 5vw, 10px) solid #fff;
  border-radius: clamp(4px, 5vw, 20px);

  width: min(50%, 500px);

  background: linear-gradient(135deg, #fff, #fff min(25vm, 60%), #666);

  height: max(30vm, 100px);
}

/* @media (max-width: 500px) {
    .container {
      background: linear-gradient(135deg, #fff, #fff 25%, #666);
    }
  } */
.box {
  width: 200px;
  height: 200px;
  margin-top: 20px;
  background-color: #666;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%);
  clip-path: circle(50% at 50% 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
}

背景图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background-color: #2a2e33;
    color: white;
  }

  img {
    width: 100px;
    height: 100px;
  }

  img:after {
    content: "\f1c5" " " attr(alt);
    font-size: 16px;
    font-family: FontAwesome;
    color: rgb(0, 0, 0);
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #fff;
  }

  .imgbox {
    width: 100px;
    height: 100px;
    background: red;
  }

  @media (min-width: 800px) {
    .imgbox {
      background: url('https://blogs.igalia.com/mshin/files/2021/12/ltr-2.png');
      webkit-print-color-adjust: exact;
    }
  }

  svg>path:nth-of-type(1) {
    fill: red;
  }
</style>


<body>
  <!-- <img src="https://www.scionresearch.com/__data/assets/image/0009/60021/icon_html.jpg" alt=""> -->
  <img src="https://www.scionr9/60021/icon_html.jpg" alt="logo">
  <!-- <img width="116" height="116" src="https://www.ionresearch.com/__data/assets/image/0009/60021/icon_html.jpg"> -->
  <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Wb-f1u63VthyaL8EhmVMbgHaD4?w=328&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"
    srcset="
    https://cn.bing.com/th/id/OIP-C.o-wNqCyhGc3XpFMfCCFpigHaEK?w=307&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7 500px, https://www.olcbd.net/wp-content/uploads/2018/05/html-800x445.jpg 800px"
    alt="">

  <picture>
    <source srcset="https://www.olcbd.net/wp-content/uploads/2018/05/html-800x445.jpg" media="(min-width: 800px)" />
    <source
      srcset="https://www.wikitechy.com/step-by-step-html-tutorials/img/html-images/code-explanation-bdo-tag-in-html.png"
      media="(min-width: 500px)" />
    <img src="https://blogs.igalia.com/mshin/files/2021/12/ltr-2.png" />
  </picture>

  <div class="imgbox"></div>

  <svg width="200" height="200">
    <title>A photo of blueberry Cheescake</title>
    <desc>A meaningful description about the image</desc>
    <image href="https://blogs.igalia.com/mshin/files/2021/12/ltr-2.png" height="100%" width="100%"
      preserveAspectRatio="xMid">
  </svg>

  <svg t="1700013706736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="4032" width="200" height="200">
    <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="4033"></path>
    <path
      d="M463.735467 975.735467l-161.518934-161.518934A17.066667 17.066667 0 0 1 314.2656 785.066667h395.4688a17.066667 17.066667 0 0 1 12.0832 29.149866l-161.553067 161.518934a68.266667 68.266667 0 0 1-96.529066 0z"
      fill="#FFAA44" p-id="4034"></path>
    <path
      d="M512 34.133333c-129.706667 0-238.250667 90.4192-266.1376 211.626667-3.652267 15.9744-16.7936 28.330667-32.8704 31.470933A221.866667 221.866667 0 0 0 256 716.8H375.466667a34.133333 34.133333 0 0 0 34.133333-34.133333v-204.8a68.266667 68.266667 0 0 1 68.266667-68.266667h68.266666a68.266667 68.266667 0 0 1 68.266667 68.266667v204.8a34.133333 34.133333 0 0 0 34.133333 34.133333h119.466667a221.866667 221.866667 0 0 0 43.008-439.569067 42.052267 42.052267 0 0 1-32.8704-31.470933A273.169067 273.169067 0 0 0 512 34.133333z"
      fill="#FF7744" p-id="4035"></path>
  </svg>
</body>

</html>

文本换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
      color: white;
    }

    .one {
      width: min-content;
      width: 100px;
      height: 100px;
      /* overflow-wrap: normal; */
      /* overflow-wrap: break-word; */
      /* 将溢出的单词分解成⽂本块，这样就可以将其放⼊容器中。这⾥⽂本所在的容器宽度是固定的。 */
      /* overflow-wrap: anywhere; */

      word-break: normal;
      word-break: break-all;
      word-wrap: keep-all;

      /* 防⽌⽂本⾃动换⾏： */
      white-space: normal;
      white-space: inherit;
      white-space: pre-wrap;
      white-space: pre-line;
      /* ⽂本之间的空⽩会被浏览器保留 */
      white-space: pre;

      line-break: loose;

      hyphens: auto;

      /* 当⽂本所在容器的宽度固定时，可以使⽤ overflow-wrap: break-word; 和 overflow-wrap:anywhere; 来实现⽂本的⾃动换⾏；如果容器宽度为 min-content ，就只能使⽤ overflow-wrap: break-word; 实现⽂本换⾏； overflow-wrap: break-word; 也可以⽤于⻓标符号的换⾏。 */
      /* word-break: break-all; 也可以⽤于⽂本换⾏，但是该属性不能让⻓标点符号换⾏； */
      /* white-space: nowrap; 可以⽤于防⽌⽂本⾃动换⾏； */
      /* line-break: anywhere 可以⽤于将⻓标点符号进⾏换⾏； */
      /* hyphens: auto; 可以⽤于使⽤连字符连接单词。 */
    }
  </style>

  <body>
    <p class="one">https://juejin.cn/post/7280847216658038821</p>
    <p class="one">https://juejin.cn/post/7280847216658038821</p>
  </body>
</html>

样式重置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    * {
      margin: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    img,
    picture,
    video,
    canvas,
    svg {
      display: block;
      max-width: 100%;
    }

    input,
    button,
    textarea,
    select {
      font: inherit;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      overflow-wrap: break-word;
    }

    #root,
    #__next {
      isolation: isolate;
    }

    body {
      background-color: #2a2e33;
      color: white;
    }

    .word {
      width: 200px;
      height: 100px;
      /* overflow-wrap 属性可以调整换⾏算法，并允许它在找不到软换⾏机会时使⽤硬换⾏： */
      overflow-wrap: break-word;
      hyphens: auto;
    }
  </style>

  <body>
    <p class="word">
      Bright moi1t in fronedddddddddddddddddddddddddddddddddddddeeeeet of the
      bed, bowing my head to think
    </p>
  </body>
</html>

隐藏元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
      color: white;
    }

    html {
      width: 100vw;
    }

    div {
      width: 50px;
      height: 50px;
      background-color: #999;
    }

    .box {
      opacity: 0;
      filter: opacity(0%);
    }

    .box1 {
      background-color: rgba(0, 0, 0, 0);
    }

    .box2 {
      transform: scale(0);
      transform: translate(-9999px, 0);
    }

    .box3 {
      clip-path: circle(0);
    }

    .box4 {
      visibility: hidden;
    }

    .box5 {
      display: none;
    }

    .box6 {
      z-index: -1;
    }

    .box7 {
      position: absolute;
      left: -10000px;
    }

    .box8 {
      position: absolute;
      content: "";
      top: 0;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
    }
  </style>

  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- <div class="box6"></div> -->
    <div class="box7"></div>
    <div class="box8"></div>
  </body>
</html>

has

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #2a2e33;
      color: white;
    }

    .section-header .input {
      display: none;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
    }

    .section-header:has(> a) {
      align-items: center;
      border-bottom: 1px solid;
      padding-bottom: 0.5rem;
    }

    .section-header:has(.h2, .h3) {
      background-color: #866e6e;
    }

    .section-header:has(img) {
      background-color: #303030;
    }

    .section-header:has(input:checked) .box {
      color: red;
      background-color: #4b3737;
    }

    form:has(option[value="ohter"]:checked) .input {
      display: block;
    }
  </style>

  <body>
    <div class="section-header">
      <h2>Latest articles</h2>
      <a href="/articles/">See all</a>
    </div>
    <div class="section-header">
      <h2>Latest articles</h2>
      <h2 class="h3">Latest articles</h2>
    </div>
    <div class="section-header">
      <h2 class="h2">Latest articles</h2>
    </div>
    <div class="section-header">
      <h2>Latest articles</h2>
      <img
        src="http://www.cleverpdf.com/statics/images/og-cn/cleverpdf-win-ui.jpg"
        width="100"
        height="100"
        alt=""
      />
    </div>
    <div class="section-header">
      <input type="checkbox" checked />
      <div class="box">123</div>
    </div>
    <div class="section-header">
      <form action="">
        <select name="" id="">
          <option value="1">1</option>
          <option value="ohter">ohter</option>
        </select>
        <input type="text" class="input" />
      </form>
    </div>
  </body>
</html>