word-break

• word-break: normal

• word-break: break-all

记忆: 当一个单词到达边界时，下个字母会自动到下一行。

深度选择器的使用场景一般是 修改第三方UI组件库，如vant，elementUI，antd，同时页面中又使用了 scoped

>>>

原生css式样使用 >>>

<style scoped>

.myclass >>> .el-tag {
  // 样式
}
</style>

选择器

• a[href="#"]
• :last-child
• :nth-of-type(n)
• :first-of-type
• :last-of-type

新样式

• border-radius 圆角边框

• box-shadow 盒子阴影

  语法: box-shadow: h-shadow v-shadow blur spread color inset

  属性	描述
  h-shadow	必需的。水平阴影的位置。允许负值
  v-shadow	必需的。垂直阴影的位置。允许负值
  blur	可选。模糊距离
  spread	可选。阴影的大小
  color	可选。阴影的颜色。
  inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

• background-image 背景图

SASS(SCSS) 、LESS

语法

sass语法不带大括号和分号，并且有严格的缩进

.img
  width: 200px
  height: 200px
  object-fit: cover

垂直居中

水平垂直居中

1. flex布局：父元素（display：flex；justify-content：center；align-items：center）
2. 绝对定位：父元素（position：relative）子元素（position：absolute） ​知道宽高（top：50%；left：50%；margin-top：-[高/2]px；margin-left：-[宽/2]px）
   ​不知道宽高（top：50%；left：50%；transform：translate（-50%，-50%）【左右，上下】）

概念

BFC（Block Formatting Context）即“块级格式化上下文”表现为：

1. 内部的元素在垂直方向上一个接一个排列
2. 上下相邻的两个元素的margin会重叠
3. 一个独立的渲染区域，里面的元素不会影响外面的元素
4. 不会与浮动元素发生重叠
5. 计算bfc高度的时候，需要计算浮动元素的高度

如何创建

1. 浮动元素，float 除 none 以外的值；
2. 绝对定位元素，position（absolute，fixed）
3. overflow的值不为visible（hidden，scroll，auto，inherit）
4. display的值为table-cell, table-caption, inline-block中的任何一个

静态布局

定位布局 position

弹性布局 flex

❓ flex: 1 表示什么意思？
💬 flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow: 1 该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
flex-shrink: 1 该属性默认为 1 ，如果空间不足，元素缩小。
flex-basis: 0% 该属性定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值

盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。

W3C盒子模型(默认): ​box-sizing: content-box
IE盒子模型: box-sizing: border-box

W3C标准盒模型：width=content
​IE怪异盒模型：width=content+padding+border

记忆法：给一个div元素设置width，修改padding或border，元素实际占的width不变的是怪异，变的是标准

• !important
• 内联样式（如 style）
• ID 选择器（如 #id{}）
• 类选择器（如 .class{}） = 属性选择器（如 a[href="#"]{}） = 伪类选择器（如 :hover{}）
• 标签选择器（如 span{}） = 伪元素选择器（如 ::before{}）
• 通配选择器（如 *{}）

复杂选择器关系

1. 如果存在内联样式，那么 A = 1，否则 A = 0；
2. B 的值等于 ID选择器（#id） 出现的次数；
3. C 的值等于 类选择器（.class） 和 属性选择器（a[href="#"]） 和 伪类（:first-child） 出现的总数；
4. D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。（0,0,0,0）从左至右比较，如果是样式优先级相等，取后面出现的样式。