# [ 深入理解CSS - 1 | 青训营笔记]

个人总结

感觉老师的ppt做的非常好，照着老师贴的代码敲了一下然后查阅相关资料感觉又熟悉起来了，讲的涵盖了css主要知识点，面试之前一定要好好复习！！！！基础很重要很重要！！ 这个笔记主要写的是1，2，3点内容，4，5，6之后有空的时候补上，主要是css太多啦真的然后之前基础也不是很扎实所以感觉复习起来就比较痛苦吧。加油加油！！

目录

1. 基础知识
2. 布局和定位
3. 层叠上下文
4. 变形 过度 动画
5. 响应式设计
6. css生态相关

基础知识

层叠式 优先级

层叠三大规则

样式表来源 > 选择器优先级 > 源码位置

样式表优先级

用户代理样式表中的 !important > 用户样式表中的 !important > 作者样式表中的 !important > 作者样式表(developer) > 用户样式表> 用户代理样式( 浏览器默认样式)

选择器类别

基础选择器

#id一一ID选择器 Tagname一一类型选择器或者标签选择器 .class一一类选择器*一一通用选择器。该选择器匹配所有元素

组合器

• 子组合器(>) 匹配的目标元素是其他元素的直接后代 如：.parent > .child
• 相邻兄弟组合器(+) 匹配的目标元素紧跟在其他元素后面 如：p+h2
• 通用兄弟组合器 (~) 匹配所有跟随在指定元素之后的兄弟元素 如：Ii.active ~ i
• 复合选择器 多个基础选择器可以连起来使用 如：h1.page ~ header

属性选择器

通过约束属性值，div[data-title="aaa"]

伪类选择器

选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。 如：first-child，：hover

伪元素选择器

匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2::first-letter，div::before

逻辑选择器

较新的选择器 :is（）:has() :where() :not()

内联 > id > class = attribute = pseudo - class > type = pseudo-element

源码顺序

the last declaration in ducument arder wins

1. 对于@import 的样式， 根据@import的顺序
2. 对于link和style标签的样式， 根据在document中的顺序决定

继承

• 大部分具有继承特性的属性跟文本相关：

color、font、font-family、font-size、font-weight、font-variant、font- style、line-height、letter--spacing、text-align、text-indent、text- transform、white-space以及word-spacing

• 还有少部分列表、表格的属性

可以使用inherit关键字显式指定一个属性值从其父元素继承

<template>
  <h1> I am a title </h1>
<div class="card">
	<h1>I am a inside title</h1>
</div>
</template>
<style>
  .h1{
    font-size:20px;
  }
  .card{
    font-size:24px;
  }
  .card h1{
    font-size : inherit;
  }
 </style>

盒模型

浏览器根据视觉格式化模型(visual formatting model)， 将所有元素表示为盒子模型，css通过盒模型做layout 控制盒子类型 display:block、inline、inline-block、flex、 控制盒子大小&计算方式 width,height... box-sizing:content-box border-box 控制盒中内容流 overflow:auto、scroll、hidden、. 控制定位 position:static、relative、absolute、fixed、sticky 是否可见 visibility:visible、hidden、..

根据盒模型特性实现一些示例

<template>
  <div id="app">
    <!--     实现三角形 -->
    <div class="triangle-bottom">
    </div>
    <!--     实现固定比例的长方形 -->
    <div class="radio-box">
    </div>
    <div class="fixed-ratio"></div>
    <!--     实现水平居中 -->
    <div class="wrap">
      <div class="h-inline">
      </div>
    </div>
    <!-- 实现渐变色的边框 -->
    <div class="awesome-border">
    </div>
  </div>
</template>
<script>
export default {
};
</script>
    
<style lang="less">
.awesome-border {
  width: 150px;
  height: 100px;
  border: 8px solid transparent;
  border-radius: 12px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(135deg, #e941ab, #a557ef);
}
.wrap {
  width: 100%;
  height: 400px;
  border: 1px dashed grey;


  .h-inline {
    width: 300px;
    height: 300px;
    background-color: black;
    margin: 50px auto;


  }
}
.radio-box {
  background-color: purple;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
}
.triangle-bottom {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}
</style>

盒模型 - 负外边距

设置左边或顶部的负外边距，元素就会相应地向左或向上移动， 导致元素与它前面的元素重叠： 如果设置右边或者底部的负外边距，并不会移动元素， 而是将它后面的元素拉过来；

布局

常规流 弹性盒子 grid 定位

外边距塌陷

• 两个兄弟元素之间相邻的上下外边距
• 父子元素之间相邻的上下外边距
• 内容为空元素自己上下外边距相邻

消除外边距塌陷的方法

内联级格式化上下文

:::info vertical-align :::

一些实际的case

利用了line box中计算高度的原 理和vertica-align的设置，垂直对齐，但不是完全垂直居中 如果设置父元素font-size：0，基线和中线重叠，则居中对齐

<template>
  <div class="page">
    <!-- 文本居中 -->
    <div class="text">
      <h2 class="text-center">文本居中</h2>


    </div>


    <!-- icon 和文本居中对齐 -->
    <div class="wrap">
      <img class="icon" src="../../public/dy.png">
      <span class="text"> 我是抖音</span>
    </div>
  </div>
</template>



<script setup lang="ts">


</script>
<style lang="less" scoped>
.wrap {
  .icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }


  .text {
    font-size: 16px;
    margin-left: 3px;
    line-height: 30px;
    vertical-align: middle;
  }


  border: 1px solid grey;
}


.text-center {
  text-align: center;
  height: 40px;
  line-height: 40px;
  border: 1px solid grey;
}
</style>

弹性盒子布局

示例

1. 展示灵活的文件长度省略
2. 展示骰子

<template>
  <div class="page">
    <!-- 文本居中 -->
    <div class="text">
      <h2 class="text-center">文本居中</h2>


    </div>


    <!-- icon 和文本居中对齐 -->
    <div class="wrap">
      <img class="icon" src="../../public/dy.png">
      <span class="text"> 我是抖音</span>
    </div>
  </div>
</template>



<script setup lang="ts">


</script>
<style lang="less" scoped>
.wrap {
  .icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }


  .text {
    font-size: 16px;
    margin-left: 3px;
    line-height: 30px;
    vertical-align: middle;
  }


  border: 1px solid grey;
}


.text-center {
  text-align: center;
  height: 40px;
  line-height: 40px;
  border: 1px solid grey;
}
</style>

网格布局grid

展示骰子

<template>
  <div class="grid">
    <div class="all-grid">
      <div class="grid-cc dot red"></div>
    </div>
    <div class="all-grid">
      <div class="grid-lt  dot"></div>
      <div class=" grid-cc dot"></div>
      <div class="grid-rb  dot"></div>
    </div>
    <div class="all-grid">
      <div class="grid-lt  dot"></div>
      <div class="grid-rt  dot"></div>
      <div class=" grid-cc dot "></div>
      <div class="grid-lb  dot"></div>
      <div class="grid-rb  dot"></div>
    </div>
  </div>
</template>



<script setup lang="ts">


</script>
<style lang="less" scoped>
.red {
  background-color: red;
}


.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}


.all-grid {
  margin: 10px auto;
  align-items: center;
  justify-items: center;


  display: grid;
  width: 100px;
  height: 100px;
  border: 1px solid grey;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "lt . rt"
    "lc cc rc"
    "lb . rb";




  .grid-lt {
    grid-area: lt;
  }


  .grid-rt {
    grid-area: rt;
  }


  .grid-cc {
    grid-area: cc;
  }


  .grid-lb {
    grid-area: lb;
  }


  .grid-rb {
    grid-area: rb;
  }
}
</style>

Flex

1. 一维布局
2. 基于内容
3. 浏览器兼容性更好

Grid

1. 二维布局
2. 基于布局
3. 2017年后浏览器的版本普遍支持

定位position

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top，right，bottom，left对其进行定位。

遮罩层示例

<template>
  <div class="modal">
    <div class="modal-mask"></div>
    <div class="modal-container">
      <div class="header">这是header</div>
      <div class="body">
        <p>我是内容内容</p>
      </div>
      <div class="footer">
        <button class="comfirm">确认</button>
      </div>
      <button class="close">关闭</button>
    </div>
  </div>
</template>



<script setup lang="ts">


</script>
<style lang="less" scoped>
.header::after {
  content: '';
  width: 2px;
  background-color: #999;
  margin: 8px 20px;
}


.close {
  position: absolute;
  top: 18px;
  right: 20px;
}


.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: gray;
}


.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 600px;
  min-height: 400px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
</style>

层叠上下文

• position:relative或absolute;并且z-index不是auto
• position:fixed sticky
• flex或grid的子元素;并且z-index不是auto
• opacity的值小于1
• transform的值不为none
• will-change的值不为通用值

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序：

• z-index只在同一个层叠上下文内比较
• 子元素的z-index无法超越父元素的z-index显示顺序

变形 过渡 动画

响应式设计

CSS生态相关