2020.0413知识总结

知识总结

一、文本阴影
Text-shadow:x(x轴位置) y(y轴位置) 阴影大小 阴影颜色；
注：如果想添加多个阴影，每一组阴影用逗号隔开。
二、盒子阴影
Box-shadow：x y 阴影模糊度 阴影扩散的大小 阴影颜色 内阴影（inset 可选 ）
注：添加多阴影，以逗号形式隔开。
三、文本换行
英文或数字默认显示：如果在没有换行的情况下：尝试把下一个长单词放在下一行显示。
1：Word-wrap:break-word;
功能:尝试把长单词换到下一行显示，如果在下一行仍然有超出的情况下，自动断句。
2：Word-break:break-all;
功能：粗暴断句。
四、背景图
1:背景图的起始位置
属性 Background-orign:
属性值:padding-box;默认值,(padding区域开始)
Border-box;边框后面开始。
Content-box;从内容区开始。
2:背景的裁切
属性:background-clip:
属性值:border-box;(默认值)
Padding-box;
Content-box;
3:控制背景图的大小
属性:background-size:宽度 高度；
10px 10px
100% 100%
Cover (按照背景图的比例放大到全部平铺在元素后面为止)
Content(按照比例大小，当宽或者高，达到容器最高为止)
4:多背景图的设置
Background:url() no-repeat,url() no-repeat,url() no-repeat;
以逗号形式隔开
注：如果让背景图在不变形的情况下，填满整个内容区:background-size:cover;
五、颜色模式
方法：
1: Background-Rgb();
2:Background-Rgba() a是控制背景颜色透明，(内容不会产生透明);
注：让整个元素包括内容透明用opacity:();
3: Background-hsla();
六、图片边框
把一张图片，当做边框进行显示。
简写:border-image:;
分开写:border-image-source:;用在边框的图片的路径
Border-image-slice:;图片边框向内偏移(不加单位)。
Border-image-repeat:;图片边框是否平铺(repeat)、铺满(round)、拉伸(stretch)
Border-image-outset:;边框向外偏移。
七、圆角
属性:Border-radius:半径
一个值:四周圆角
两个值:左上角及右下角 右上角及左下角（对角关系）
三个值:左上角 右上角及左下角 右下角
四个值:左上 右上 右下 左下(顺时针关系)
分垂直半径和水平半径:
Border-radius:水平半径/垂直半径;
八、width新增的属性值
Width:fill-available;合理分配有效剩余空间。
Width:fit-content;找子元素内容宽度。按照子元素的宽度进行设置。
Max-content;找子元素最大的宽度
Min-content;找子元素最小的宽度
拓展：
问：width:100%和width:fill-availiable;有什么区别？
答:对padding增加后的解析状态有影响。
九、calc计算
Calc（100% - 200px）
十、css3事件
Pointer-events:none;
作用:穿透遮罩层
阻止各种按钮(buttin\a)