1. 点击focus事件的冒泡
伪类选择器:focus-within的作用是当其或者其后代元素获得焦点时会冒泡生效
#element:focus-within { ... }
例子：表单的输入框聚焦时，用于改变父元素的样式，强调其处于激活状态
2. 控制输入内容和不输入内容时的样式
:placeholder-shown
input { // 输入内容时（不出现占位符时）(比如出现查询按钮） &:placeholder-shown { ... } // 不输入内容时（出现占位符时）(默认状态） &:not(:placeholder-shown) { ... } }
3. 在什么情况下，用translate()而不用绝对定位
需要基于元素自身尺寸进行定位时，使用translate；
需要基于某个祖先元素的尺寸进行定位时，使用position:absolute
4. 如何判断dpr的倍数
① js：window.device.PixelRatio，输出多少就是几倍屏
② css：
@media(-webkit-device-pixel-ratio: 3) { }
5. 什么是dpr
设备像素比（dpr） = 设备像素（分辨率）/设备独立像素（屏幕尺寸）
布局视窗：屏幕大小
视觉视窗：为了解决PC端网站在移动端显示不佳，布局视窗比设备屏幕宽度宽，一般为980
<meta name="viewport" content="width:device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, user-scalable=no">
这行代码把视觉视窗大小设置成和布局视窗大小相等，这样我们在代码设置css像素时，设置的跟渲染出来效果也是一样。
6. 内容透明的盒子
盒子的根元素设为background: rgba(0,0,0,0),这样一来内容子元素设置为带透明度的背景颜色就可以使整个盒子带透明度
7. 多层级结构使其背景颜色带透明度
① 在最外层的标签添加背景颜色rgba（注意，这种情况不能用opacity，会使内部所有子元素的颜色透明，不可逆）
② 内部所有标签都设为背景颜色随父级
具体代码示例：
.box { background: rgba(10, 55, 99, .65); * { background: transparent !important; } }
8. 更改选中文本的样式
::selection { color: white; background-color: #006A80; }
9. background-image设置尺寸无效问题
background-image如果设置!important会导致background-size属性失效，使图片无法变形、改变大小尺寸
10. css： 以左上角为变换中心
transform-origin: 0 0; // 左上角 transform-origin: 100% 0; // 右上角 transform-origin: 0 100%; // 左下角 transform-origin: 100% 100%; // 右下角
11. 修改某个类的div的文本内容
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至"
12. 高德地图：去掉地图自带的左下角logo
经过各种正常写法的测试，都无法去除，最后发现在项目入口index.html写样式才会生效：
index.html:
.amap-logo, .amap-copyright{ display: none !important; }
13. 元素贴住底部的方法
当vertical-align: bottom无效时，可以用flex，在上方弄一个用于填充的空元素
<div stlye="display:flex;flex-direction:column;"> <div stlye="flex:1;"></div> <div>需要贴住底部的元素<div> </div>
14. box-shadow阴影问题
做项目时要求只有左侧阴影：
box-shadow: -5px 0px 10px -5px rgba(0, 0, 0, 0.1);
接着去查了一下详细的参数
box-shadow: 120px 80px 40px 20px #0ff; /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */ /* blur-size 和 spread-size 是可选的 (默认为 0) */
15. 设置div按钮无法点击(需要同时判断@click方法和样式)
<div @click="flag === 1?'handleEdit(scope.$index, scope.row,$event)':''" :class="flag === 1?'status1':'status2'">编辑</div>
.status1{ cursor:pointer; } .status2{ cursor: not-allowed; }
注意避免 它是无法点击的样式，点击方法却可以生效的情况
也可以直接让点击事件无法冒泡(注意cursor此时也不生效)
pointer-events: none;
16. span 文本内容超过宽度自动换行
1. <span>{{remark}}</span> 2.
span{ word-break:normal; display:block; white-space:pre-wrap; word-wrap:break-word; overflow:hidden; width:80%; }
17.横向布局：flex+row与flex+justify-content
前者比较灵活，但是在快速编写代码的情况下会比后者多写一两行代码：各个div的width、margin等。而后者有一些固定的模板如图，只要一行代码一个属性就可以做出好几种常用的布局，如下图：
而以前制作页面的时候比较习惯于用流式布局flex的写法：
1. display: flex; 2. flex-direction: row;
