css

属性

inherit：继承其父元素的值
initial：恢复默认属性（是指恢复到属性的默认值而不是元素的默认值）
可继承属性
- 文本相关 color,font-family,font-size,font-weight,font-variant,font-style,line-height,letter-spacing,text-align,text-indent,text-transform,white-space,word-spacing
- 列表相关 list-style,list-style-type,list-style-position,list-style-image,
- 表格边框 border-collapse,border-spacing

选择器

属性选择器:
- [attr] 属性名
- [attr=value] 属性名=属性值
- [attr~=blue] 包含这个blue整个单词就可以
- [attr^=c] 以这个字母c开头的
- [attr$=b] 以这个字母b结尾的
- [attr*=a] 只要包含a这个字母就行
- [attr|=z] 只要以字母z-开头的或者就是字母z的

伪类选择器:

结构性

  /*第n个子节点*/
  div:nth-child(n)
  /*奇数行*/
  div:nth-child(odd)
  /*偶数行*/
  div:nth-child(even)
  /*2的倍数 - 偶数*/ 
  div:nth-child(2n)
  /*倒数第n个*/
  div:nth-last-child(n)
  /*第一个子节点、和 E:nth-child(1)等价*/
  div:first-child
  /*倒数第一个、和 E:nth-last-child(1)等价*/
  div:last-child

伪元素

/*第一行*/
E:first-line
/*第一个字*/
E:first-letter
/*选中文本的时候*/
E::selection
/*E标签前面添加东西,需要配合content来用*/
E::before 
/*E标签后面添加东西*/
E::after

其他:

后代选择器：空格
子代选择器：>
相邻选择器：+

后续选择器：~

E~F /*E后面的F兄弟节点*/
E:not(s) /* 不包括s*/
h1:not(.red) /* 排除有class为red的h1元素*/

选择器 - 扩展

伪元素选择器以child和type结尾的选择器区别
- 以child结尾的选择原理是先定位，再匹配
  - 标签选择：先定位到兄弟元素中的指定位置，若与指定标签匹配则有效果，否则无效果
  - 类名选择：先定位到兄弟元素中的指定位置，若与指定类名匹配则有效果，否则无效果
- 以type结尾的选择原理是先分组，再定位，后匹配
  - 标签选择：定位到此元素的第一个/最后一个，
  - 类名选择：若兄弟元素包含多种，则先按标签分组，再定位到元素的第一个/最后一个，进行匹配
- only-of-type
  - 标签选择：在兄弟元素中，指定元素的标签只有一个时，被选中
  - 类名选择：在兄弟元素中，拥有此类名的标签只有一个时，被选中

基础知识点

相对单位
- rem、 em使用
  - 两者都是相对于font-size:来取值
  - rem:
    - 通过设置根目录的font-size:来设置 1rem对应的 px 值（html标签的font-size的值）
  - em:
    - 就近取值，优先按自己的font-size:值来得到对应的 px 值
    - 若无显示设置，则默认向上取，直到根目录，若都没有，按隐式font-size:值来定
    - 若设置自己的font-size: 值，则对应的 1em 值为1个font-size:的大小
    - 给宽高设置em，取自己的font-size值为一个单位em
    - 给字体设置em，取继承到的font-size值为一个单位em
  - 两者的使用场景 - 使用原则：
    - rem用来设置字号
    - px用来设置边框
    - em设置其他大部分属性（内边距、外边距、圆角）
- vh、vw、vmin、vmax
  - vh：屏幕视口高度
  - vw：屏幕视口宽度
  - vmin：屏幕视口，取最小的
  - vmax：屏幕视口，取最大的
绝对单位：px（像素）、mm（毫米）、cm（厘米）、in（英寸）、pt（点,印刷术语，1/72英寸）、pc（派卡，印刷术语，12点）
- 换算：1in = 25.4mm =2.54cm = 6pc = 72pt = 96px
- 常用：16px = 12pt -> (16/96 x 72)
变量的使用
- 变量的定义，必须前边加俩杠--xxxx
- 变量的使用，需要配合var()
- var()可接受多个变量，后边的是前边的备用值，当前边的未定义时，后边的才启用
- 若var()中的变量不可用，则相当于initial，让元素使用默认值
- 变量的定义是作用域性的，定义变量的当前元素和其子元素都使用此变量时，都用的是当前定义值，子元素可用对其进行修改，但是修改是向下修改的，不会影响此元素的父辈们使用之前的变量值，修改者和其子元素使用的都是修改后的值
盒模型
- 盒模型的默认行为是：当给一个元素设置宽度和高度时，指定的是内容的宽度和高度，所有的内边距、外边距、边框都是加到该宽高之外的

等高列

表格布局

margin不会生效，因为外边距不会作用在table-cell元素上
可以通过border-spacing来指定间距，接收俩值，顺序为水平间距、垂直间距

<div class="wrapper">
  <div class="main">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</div>
<style>
  .main {
    display: table;
    border-spacing: 1.5em 0;
  }
  .div1 {
    display: table-cell;
    width: 70%
  }
  .div {
    display: table-cell;
    width: 30%
  }
  .wrapper {
    margin: 0 -1.5em;
  }
</style>

弹性布局
- 当一个盒子被定义为弹性布局盒子后，其子元素在没有定高的情况下，高度默认向最高的元素看齐

弹性布局

自适配flex

当两个 div 宽度固定且大小不一样的,在弹性布局下，个体有flex: 1 1 auto;属性,此时两个div的宽度是自己本身的宽度加上剩余空间的宽度（按1比1的分配）

  <style>
      .anger1{
          border: 1px solid red;
          width: 500px;
          height: 80px;
          display: flex;
      }
      // 两个子元素都设置了 flex: 1 1 auto;属性，他们的宽度会在原有的宽度下，平分剩余空间
      .ange2{
          width: 120px;
          height: 60px;
          background-color: lime;
          flex: 1 1 auto;
      }
      .ange3{
          width: 220px;
          height: 60px;
          background-color: darkcyan;
          flex: 1 1 auto;
      }
  </style>
  <body>
      <div class="anger1">
          <div class="ange2"></div><!-- 宽度200 -->
          <div class="ange3"></div><!-- 宽度300 -->
      </div>
  </body>

水平垂直居中

  // 父元素
  display: flex;
  // 子元素 - 需要有内容或宽高
  margin: auto;

动态

/*未访*/
a:link
/*已访*/
a:visited
/*滑过*/
a:hover
/*选中*/
a:active

/*空元素*/
:empty
/*锚点元素的样式*/
:target
/*只要锚点有#div1那上面的target样式就会生效*/
div:target{width:100px;}
<div id=”div1″></div>
/*表单元素设置disabled*/
E:disabled
/*可点击的表单元素*/
E:enabled
/*表示已经选中的checkbox或者radio*/
E:checked

CSS3新特性

边框:
- border-radius: 圆角边框
- border-image: 边框图片
- box-shadow: 边框阴影
  - box-shadow: 水平阴影, 垂直阴影, 模糊距离, 阴影尺寸, 阴影颜色, 内/外阴影;
背景:
- background-size: 设定背景图片尺寸，可按照图片的一些属性来设置
- background-origin: 背景图片定位区域 - 起始位置
- background-clip: 背景绘制区域
文字效果:
- hanging-punctuation: 标点字符是否位于线框之外
- punctuation-trim: 是否对标点字符进行修剪
- text-align- last:设置如何对齐最后一行或紧挨着强制换行符之前的行
- text-indent: 文本缩进
- text-emphasis: 向元素的文本应用重点标记以及重点标记的前景色
- text-justify: 规定当 text-align 设置为 “justify” 时所使用的对齐方法
- text-outline: 规定文本的轮廓
- text-overflow: 当文本溢出包含元素时发生的事情
- text-shadow: 向文本添加阴影
- text-wrap: 文本的换行规则
- word-break: 非中日韩文本的换行规则
- word-wrap: 允许对长的不可分割的单词进行分割并换行到下一行
- 常用文本属性
```
/* 溢出省略 */ 
text-overflow：ellipsis;
/* 行内垂直方向对齐 */ 
vertical-align: text-top; /* 用于图片与文字的居中对齐 */ 
/* 字间距 */ 
letter-spacing：20px;
/* 文字不可选 */ 
user-select: none;
/* 禁止图片拖动 */
-webkit-user-drag: none;
```
- 超出文本省略
```
/*单行*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行*/
p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```
转换:
- transform: 向元素应用 2D 或 3D 转换
- transform-origin: 允许你改变被转换元素的位置
- transform-style: 规定被嵌套元素如何在 3D 空间中显示
- perspective: 规定 3D 元素的透视效果
- perspective-origin: 规定 3D 元素的底部位置
- backface-visibility: 定义元素在不面对屏幕时是否可见
过渡:
- transition-property: 规定应用过渡的 CSS 属性的名称。
- transition-duration: 定义过渡效果花费的时间——默认是 0
- transition-timing-function: 规定过渡效果的时间曲线——默认是 “ease”
- transition-delay: 规定过渡效果何时开始——默认是 0
- transition：all 3s linear;
  - 参与属性
  - 持续时间
  - 动画类型
    - 先快后慢：ease-in-out；
    - 减速：ease-out;
    - 加速：ease-in；
    - 由快到慢：ease；
    - 匀变：linear；
    - subic-bezier(0-1之间，0-1之间）
    - steps（数字（停顿时间），end）
    - 延迟过渡时间
    - 小于零：截断；
    - 大于零：延迟；
  - 多属性逗号隔开，同属性空格；
  - 过渡动画类型：transition-timing-function
动画:
- @keyframes: 规定动画
- animation-name: 规定 @keyframes 动画的名称
- animation-duration: 规定动画完成一个周期所花费的秒或毫秒——默认是 0
- animation-timing-function: 规定动画的速度曲线——默认是 “ease”
- animation-delay: 规定动画何时开始——默认是 0
- animation-iteration-count: 规定动画被播放的次数——默认是 1
- animation-direction: 规定动画是否在下一周期逆向地播放——默认是 “normal”
- animation-play-state: 规定动画是否正在运行或暂停——默认是 “running”
- animation-fill-mode: 规定对象动画时间之外的状态
- animation：ant 3s infinite 2s linear;
  - 动画名称（随意，后边用）
  - 持续时间
  - 过渡类型
    - 先快后慢：ease-in-out；
    - 减速：ease-out;
    - 加速：ease-in；
    - 由快到慢：ease；
    - 匀变：linear；
    - subic-bezier(0-1之间，0-1之间）
    - steps（数字（停顿时间），end）
  - 延迟时间
    - 小于零：截断；
    - 大于零：延迟；
  - 循环次数
    - 数值：次数；
    - 无限循环：infinite；
  - 是否返向
    - 默认：不往返
    - 返向：alternate
  - 动画外状态
    - 停在最后：forwards；
    - 停在开始：backwards；
  - 动画状态
    - 播放：ruuning
    - 暂停：paused
```
@keyframes ant {
    20%{
        变化元素的某一状态
    }
  }
```
多列:
- column-count: 指定元素应该被分割的列数。
- column-fill: 指定如何填充列
- column-gap: 指定列与列之间的间隙
- column-span: 指定元素要跨越多少列
- column-width: 指定列的宽度
- column-rule-color: 指定两列间边框的颜色
- column-rule-style: 指定两列间边框的样式
- column-rule-width: 指定两列间边框的厚度
用户界面:
- resize: 属性规定是否可由用户调整元素尺寸
- box-sizing: 属性允许您以确切的方式定义适应某个区域的具体内容
- outline-offset: 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
- appearance: 允许您使一个元素的外观像一个标准的用户界面元素
- icon: 为创作者提供了将元素设置为图标等价物的能力
- nav-down: 指定在何处使用箭头向下导航键时进行导航。
- nav-index: 指定一个元素的Tab的顺序
- nav-left: 指定在何处使用左侧的箭头导航键进行导航
- nav-right: 指定在何处使用右侧的箭头导航键进行导航
- nav-up: 指定在何处使用箭头向上导航键时进行导航

扩展

响应式图片

<img src="xxx-xxx.jpg" srcset="aaa.jpg 500w, bbb.jpg 800w, ccc.jpg 1280w"/>

BFC的创建
1. float属性的值是left或right,不为none即可
2. overflow属性的值为hidden、auto、scroll,不为visible即可
3. display属性的值为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid的容器称为块级容器
4. position属性值为absolute、fixed

元素按比例

  div {
    aspect-ratio: 16 / 9;  /* 纵横比为 16:9 */
  }

css的计算属性 calc
```
div{
    width: calc(25% - 20px)
}
```
高斯模糊
```
div {
  backdrop-filter: blur(10px);
}
```

常用清除样式:

ul{
    /*清除ul的默认值（清除前边的点）*/
    list-style: none;
    /* 去除列表前的点: */
    list-style-type: none;
    /*解决ul的塌陷问题*/
    overflow:hidden;
  }
img{
  /*清除三像素bug*/
  vertical-align: top;
}
a{
  /*清除a标签的下标签*/
  text-decoration: none;
}

元素可通过拖拽调整大小

.div{
  resize: both; /*水平垂直方向*/
  resize: horizontal; /*水平方向*/
  resize: vertical; /*垂直方向*/
}

样式穿透
```
pointer-events :none;
```

隐藏滚动条

/*谷歌 - 用于隐藏滚动条*/ 
.element::-webkit-scrollbar { 
  width: 0 !important 
}
div::-webkit-scrollbar{
  display: none;
}

input中placeholder进行修改

  @nine-grey = red;
  /* 改变placeholder提示字体的颜色 */
  input::-webkit-input-placeholder{
  font-size:0.875rem;
  color: @nine-grey ;
  }
  /* 做兼容 */
  input::-moz-placeholder{  /* Mozilla Firefox 19+ */
  font-size:0.875rem;
  color:@nine-grey ;
  }
  input:-moz-placeholder{  /* Mozilla Firefox 4 to 18 */
  font-size:0.875rem;
  color:@nine-grey ;
  }
  input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  font-size:0.875rem;
  color:@nine-grey ;
  }

滚动吸附

.box{/*父元素*/
  /*滚动方向， 吸附方式*/
  scroll-snap-type: x mandatory;
}
/* 隐藏滚动条 */
.box::-webkit-scrollbar{
  width: 0;
}
/* 子元素 */
.boxCh{
  /*对其方式*/
  scroll-snap-align: start;
  /*是否连续*/
  scroll-snap-stop: always;
}

平滑滚动

scroll-behavior: smooth; /*在生成滚动条的元素上添加这个属性*/

逐帧动画
- steps(num) - 两个关键帧之间的差值除以传入的这个数值

animation: 动画名 时间 steps(num) 重复情况;

上篇Promise

下篇JavaScript基础