2021-03-23

html

• html的元素有哪些（包含H5）？

  • 块级元素

    div
    p
    ul
    ol
    li
    h1~h6
    textarea
    

  • 行内元素

    a
    b
    span
    i
    em
    strong
    block
    input
    button
    select
    form
    

  • H5新增

    header
    section
    asize
    footer
    nav
    article
    

css

• CSS3有哪些新增的特性？

  概括：边背文转动列界选

• 1、边框

  border-radius
  border-color
  border-image
  

• 2、背景

  background-size
  background-origin:  border-box/padding-box/content-box. //从什么位置开始绘制
  background-clip 从什么位置开始裁剪
  background-break 从什么位置开始平铺
  

• 文字效果

  text-shadow: h-shadow v-shadow blur color
  text-overflow: clip/ellipsis(省略号)
  word-wrap:normal/break-word(边界内进行换行)
  font-size-adjust:none/number  字体样式改变但大小不变
  

• 转换

  2D、3D转换

  2D转换：transform、translate、rotate、scale、matrix

  3D转换：rotateX()、ratateY()

• 动画

  transform ——位移、缩放、旋转、倾斜、矩阵变换

  位移：translate(x,y) translate3D(x,y,z)

  缩放：scale(x,y) scale3D(x,y,z)

  旋转：rolateX(....deg) rolate3D(x,y,z,deg)

  倾斜：skew(x,y)

  矩阵变换 martrix

  transition(一个～另一个状态)
  
  transition-property:表示对哪个属性平滑过度
  transition-duration:....多少时间
  transition-time-function:通过什么方式进行过度
  
  animation
  animation是对transition功能的进一步扩展，可实现多步骤变换
  帧设计，利用keyframes
  

• 多列

  column属性

  css3 实现分栏布局的方法非常简单，应用column-count属性即可

• 用户界面

  resize

  box-sizing

  outline-offset

js

• 写一个方法去掉字符串中的空格

  // 法一：
  function setStr(str){
      return str.replaceAll(' ','');
  }
  
  let str = '11a  b 12 cc';
  setStr(str); // '11ab12cc'
  
  // 法二：
  function trim(str){
      if(typeof str === 'string'){
          return str.split(' ').join('');
      }
  }
  let str = '11a  b 12 cc';
  setStr(str); // '11ab12cc'