1、利用 CSS 的 content 属性 attr 抓取资料
代码：
// html
<div data-msg="Open this file in Github Desktop">
hover
</div>
//css
div{
width:100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}
效果：
2、利用max-height做高度不确定的过渡动画
代码：
// html
<ul>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
</ul>
//css
.bd {
max-height:0;
overflow:hidden;
transition: all 1s ease-out;
}
li:hover .bd {
max-height: 600px;
transition-timing-function: ease-in;
}
3、使用vw+rem实现移动端响应式布局
html{
font-size: 100vw / 750
}
vw的兼容性如下：
可见在移动端支持已经很不错了，现在H5页面基本都要求兼容到iOS>=7,Android>=4.4了。
4、pointer-events
考虑这种场景，两个tab，只能有一个激活状态，激活通过鼠标click触发，对处于激活状态的tab继续点击无效，该怎么做？通常是用js控制的，判断激活tab是否有某个类名，如.active，如果有就认为是激活状态，并直接return。要用css该怎么做呢？很简单：
.active{
...
pointer-events:none;
}
另一种场景就是表单提交按钮，当用户提交后可以给按钮添加一个样式，在该样式中应用pointer-events就可以防止重复提交。
pointer-events兼容性超好，放心用吧（IE11以下除外），此外，pointer-events还可以做到点击穿透效果，感兴趣可以研究研究。
5、父元素用font-size：0来清除间距
如果在同一行内有4个25%相同宽度的元素（inline-block），会导致最后一个元素掉下来。是因为他们之间有空格，给父元素设置font-size:0可使这些空格宽度为0，从而排满一行
6、关于template的使用
浏览器对于不支持的标签所包含的内容会直接显示，template在有的浏览器下就不支持，但是这个标签在拼接模板时很好用，如果不用template就只能用<script type='js/template'>，这个写法不太好，所以最好用template，那怎么解决兼容性问题呢，很简单，在common.css里对其设置display:none，由于我们关注的只是template的innerHTML，这个值在不支持template属性的浏览器下也可以拿到，所以可以放心使用啦~
[图片上传失败...(image-56b60a-1514028994032)]
7、一个p标签，宽度自适应，最大不超过D，不超过D时居中，超过D居左的实现
.textAlignLeftOrCenter{
word-break: break-all; //对纯数字或纯字母强制换行
max-width: 6rem;
width: fit-content; // 宽度随内容实际宽度为准
margin: auto; //不足一行居中的关键
font-size: .28rem;
color: #9B9B9B;
}
兼容性还不错：
8、一种布局的实现
如图：希望点击背景和邮戳时能触发事件A，但点击下方点赞按钮时可以点赞但同时不触发A
// HTML顺序很重要，涉及到z-index的覆盖
.parent
.postmark
.bg
.zan
// CSS
.parent{
position:relative;
.bg{
position:absolute;
}
.postmark{`
position:absolute;
}
.zan{
position:absolute;
}
}
然后分别在.bg和.zan上绑定对应事件
css变量 currentColor
currentColor 表示当前color的值。移动端兼容性也很好，值得推荐
凡是需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等布局时首先要考虑页面有几种展示状态，多用min-height占位，可有效避免页面闪烁
11、父元素透明，子元素不透明的实现
对父元素使用 rgba 即可；opacity的方案不行
12、如何避免在一个固定背景上填充文字等信息时因不同屏幕造成的细微错乱
首先将imgWrap的宽高按最原始的设计稿（px）布局，要填充的内容用绝对定位定位好。再根据类cardWrap算出scale，对imgWrap进行缩放。
用JS设置imgWrap
<div className={style.cardWrap} ref={this.getCardWrap}>
<div className={style.imgWrap} ref={this.getCard}>
<img className={style.bgImg} src={defaultImg} alt="毕业证书" />
<img src={avatar || defaultMyIcon} className={style.avatar} alt="avatar" />
<div className={style.nickname}>{nickname}</div>
<div className={style.nicknameBottom}>{nickname}</div>
</div>
</div>
// css
.cardWrap {
width: 100%;
overflow: hidden;
}
.imgWrap {
position: relative;
width: 944px;
height: 1393px;
transform-origin: left top;
.bgImg {
height: 100%;
width: 100%;
}
.avatar {
position: absolute;
top: 410px;
left: 390px;
width: 160px;
height: 160px;
border-radius: 50%;
}
.nickname {
position: absolute;
top: 594px;
text-align: center;
font-size: 34px;
width: 100%;
font-weight: bold;
}
.nicknameBottom {
position: absolute;
top: 696px;
left: 240px;
// width: 100%;
color: #ba9b73;
font-size: 40px;
font-weight: bold;
}
}
// js
const width = this.cardWrap.offsetWidth
const scale = width / cardSize.width
const height = cardSize.height * scale
this.cardWrap.style.height = `${height}px`
this.card.style.webkitTransform = `scale(${scale})`
this.card.style.transform = `scale(${scale})`
13、-webkit-app-region
这是一个在Electron应用中常使用的一个属性，可以控制窗口具有移动特性：
