1.伪元素:after设置的底部横线样式不占用容器高度,导致实际样式比设计稿少1px。
2.通过background:url()
设置容器背景图,并通过background-size:cover
设置图片铺满容器时,必须将background-size:cover
写在 background:url()
后面,否则background-size:cover
不生效。
3.opacity:透明元素的子元素一定会继承父元素的透明数值,如果为子元素单独设置opacity,则子元素的实际透明度为设置值乘以父元素的透明度。如果想要修改子元素的透明度而不被父元素影响,可以使用background-color:rgba()
来设置。
4.React更新state中对象的某一属性可以使用:Object.assign({},this.state.obj,{key:value})
5.Css cursor属性,定义鼠标指针在该元素内的的形状。cursor:pointer
6.Css object-fit属性,定义图片适应容器大小的方式
7.window.location.href="url";
//在同当前窗口中打开窗口
window.open("url");
//在另外新建窗口中打开窗口
8.display:inline-block定位并列的图片和文字无法对齐的问题。
需要通过vertical-align:top
来设置以顶部基线对齐。vertical-align只用在display属性inline或inline-block的情况下才能使用,默认为baseline,就是“display属性inline或inline-block”的控件的底端跟文字的baseline(基线)对齐,但文字的基线并不是文字的最底部,所以会造成错位的问题。参考
9.为什么上传图片要使用form-data格式:
Formdata 接口提供了一种表示表单数据的键值对 key / value 的构造方式,并且可以轻松的将数据通过 xmlHttpRequest.send ( )方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为“multipart/form-data " ,它会使用和表单一样的格式。如果不使用这种方式,就需要手动拼接参数,构建一个上传表单。
但是form-data的缺点被收集的数据无法使用 JSON.stringify() 转换为一个 JSON 字符串。
参考例子