首先画个方框，方框中间有个+ 号，通过 before 、after 实现 横和竖
1.

 <div class="add"></div>

- 阅读剩余部分 -

一、语法
选择器{样式:值!import;}
二、说明
提升指定样式规则的应用优先权，即!important为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句。

- 阅读剩余部分 -

事件触发时间
focus:当focusable元素获得焦点时，不支持冒泡；
focusin:和focus一样，只是此事件支持冒泡；
blur:当focusable元素失去焦点时，不支持冒泡；
focusout:和blur一样，只是此事件支持冒泡；

- 阅读剩余部分 -

document.body.addEventListener('focusin', () => {  //软键盘弹起事件
        console.log("键盘弹起")  
 })
document.body.addEventListener('focusout', () => { //软键盘关闭事件
        console.log("键盘收起")  
  })

flex属性是flex-grow, flex-shrink 和 flex-basis的简写
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

- 阅读剩余部分 -