特殊字符@@底部被截展示不完全。但是同行的正常汉字没有缺失，高度也够。
设置了flex布局，调整为居中对齐。同时把line-height上下同时加了高度。
svg 修改颜色。除了写好在svg 标签的属性中，还可以通过css属性（fill）修改，包括背景色。
fill 属性不必须写在svg标签；父元素也可以。
移动端滚动dom抖动：比如定时器组件，视频播放器。
滚动到顶部的时候阻止滚动：e.stopProprogation

css伪类 :first-child 务必注意：你的这组兄弟元素节点必须在同一个父元素节点的第一个位置(first-child)或最后一个位置(last-child)
（一个很大的坑！）使用伪类或伪元素很容易犯的一个错误（尤其在使用scss编写代码时）

// 这种写法是标准情况：作用在同一个父节点下的所有
p:first-child{}
// 这种写法是标准情况：作用在同一个父节点下的所有
// 这种写法等价于css的【p :first-child{}】 p后面是一个空格,也就是p的后代元素的
p {
  :first-child{}
}

p:last-child 可以实现一个很巧妙的效果：如果p不是最后一个字元素就不会命中。

z-index z-index属性在什么情况下会失效
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。
z-index值越大就越是在上层。z-index元素的position属性需要是relative, absolute或是fixed。

z-index属性在下列情况下会失效：
- 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static;
- 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative,absolute或是fixed中的一种；
- 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为 display: inline-block；
- 在手机端ios 13 系统中，-webkit-overflow-scrolling:touch 也会使 z-index 失效，将touch换成unset
fixed 并不总是相对于视窗进行定位的。会受到父元素的影响，而出现不能以窗口进行定位。

fixed不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

1) 给父元素加上 transform: scale(1,1) 或者是别的,只要transform 的属性不是none就行
2)虽然position:fixed是对于浏览器窗口定位的，但是只要不设置fixed元素的top，bottom，left，right，此时该元素就是相对于父元素进行定位的。如果要移动元素的位置，可以通过margin来实现。

如果父级元素设置了transform属性，position:relative/absolute/fixed会基于此定位.

relative 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

position
子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案

他就默认相对于window去定位了，就相当与你将这个元素相对于window加上了position:absolute的属性，所以给他加百分比长度的话就是相对于window的百分比。
1、left：0；right:0;因为fixed也相当于是定位的一种，所以我们当然也可以用left和right来进行定位了，然后将left的值扩大，同时将width的百分比减少，从而使得son和demo的宽度达到一致，从而起到一种视觉上的欺骗效果。（PS：请谨慎使用）
2、calc();关于calc的具体使用将在我后面的播客中提出，在这里，我们可以将son的width由100%改为calc(100%-324px)，这里这个长度不知道是否有规律，还是要自己找，相对来说适应性就不是很好。

3、absolute改造；
4、给fathor加fixed属性；

新的解决方案：
如果设置宽度width: inherit，会继承父元素宽度。
注意，父元素要显示设置width值，不能是100%

百分比小技巧：比如进度条需要图书的中间位置对齐刻度，而且100%的时候右边是对齐的。可以适当增加基数，比如：(x + .5)/ (6 + .5)
移动端 a 标签点击会有蓝色的背景色
解决方案：a { -webkit-tap-highlight-color:transparent; }
calc(100vh - 60px) 。算术操作符前后必须有空格。否则会无效。

安全区域

env(): https://developer.mozilla.org/zh-CN/docs/Web/CSS/env()
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
css属性——env()和constant()设置安全区域

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

/* 适配底部代码： */
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
 
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2

字体文件优化

引入ttf文件，浏览器解析失败。Failed to decode downloaded font:http://local.xxx.xxx.com:8080/static/fonts/%E6%96%B9%E6%AD%A3%E5%B0%91%E5%84%BF%E7%AE%80%E4%BD%93.cd7c372a.ttf
本地启的服务，也没有跨域。文件也加载了。

解决：fontmin 包括压缩。原因是引入的字体文件不全, 有兼容性

Fontmin： http://ecomfe.github.io/fontmin/#banner
第一个纯 JavaScript 字体子集化方案
下载软件 http://ecomfe.github.io/fontmin/#app
或者命令行npm i -g fontmin

# -t, --text                          require glyphs by text
$ text=`curl www.baidu.com` && fontmin -t "$text" font.ttf

$ npm install -g html-to-text
$ text=`curl www.baidu.com | html-to-text` && fontmin -t "$text" font.ttf

基于 Fontmin 的工具 fontmin-app - Fontmin 桌面版 App，需下载安装使用 gulp-fontmin - Fontmin 的 Gulp 插件 font-spider - 自动分析页面使用的 WebFont 并进行按需压缩 Web-fontmin 不是什么高大上的东西，一个基于 Fontmin 构建的字体工具，它的用处只有两个：提取字体。字体格式转换通俗的理解，Web-fontmin 是一个这样的工具：Squirrel + fontmin-app，他是两者的结合体。 Squirrel 只有单纯的生成不同格式的webfont，且不支持中文。Web-fontmin不单止可以转换格式同时支持中文，还可以提取字体，并且有更快的上传和转换速度。 -->

设置flex属性时子元素宽度超出父元素

场景：元素分为左右两块，左边元素定宽，右边元素自动充满屏幕。
右边多设置一个width:0或overflow:hiddlen后样式正常。

为什么设置flex: 1可以实现宽度自适应？
这与flex属性的赋值语法有关，CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。具体的语法规则可以参考MDN

三种属性比较好理解的分析参考：关于 Flex 中的 flex-grow、flex-shrink、flex-basis
flex: 1 = flex: 1 1 auto = flex-grow: 1

flex-grow属性用于瓜分父容器的剩余空间，在上面例子中，只有right设置了flex：1，所以它占了剩余空间的所有比例，实现了宽度的自适应。

对于为什么子元素宽度会溢出的问题，网上查了一下只说是弹性布局的特性以及父元素没有一个固定的长度进行限制这两个因素造成的，具体原因还不太清楚。。
<!–

设置flex属性时子元素宽度超出父元素
 设置flex属性时子元素宽度超出父元素
$_PS: 内容一样 –>

移动设备后退

ios 低版本微信下方返回栏
复现：从首页跳转到其他页面后，页面的底部会出现一个带有前进和后退按钮工具栏
原因：当页面跳转时，微信浏览器会通过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，造成页面底部内容遮挡。
最终：不解决。底部操作栏并没有影响页面展示（没有遮住内容）。

（一）方案一：将页面的路由跳转方式更换为 “replace” 方式

全屏方案

<!-- webApp全屏显示，IOS设备 -->
 <meta name='apple-mobile-web-app-capable' content='yes' />
 <!-- 通用的浏览器 -->
 <meta name='full-screen' content='true' />
 <!-- QQ浏览器（X5内核）独有的META -->
 <meta name='x5-fullscreen' content='true' />
 <!-- 360浏览器独有的 -->
 <meta name='360-fullscreen' content='true' />

二期

父容器display:flex后，子元素的内部元素height:100%无效解决方法
解救办法：父类容器position:relative;子元素：position:absolute;width:100%,height:100%;
display：flex 的直接子元素，高度默认是100%；如果设置改元素align-self:center,元素就会变为行内块，高度就不是100%，可以设置垂直居中
display:flex 下的子元素，比如div的宽度会撑开父元素宽度，出现横向滚动条；此时可以给改元素添加 heigth:0% 消除影响
iconfont transform 失效，需要改为inline-block/block

transform适用于：所有块级元素及某些内联元素
transform失效了？iconfont字体图标无法旋转，无法缩放？的解决办法

【CSS】文字旋转90度
【CSS】文字旋转90度

/* 方法一**/
.xuanzhuan {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);  
    display: block;
    position: absolute;
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    text-transform: uppercase;
}
/* 方法二**/
writing-mode: vertical-rl;

网页强制横屏。或者js实现方式document.documentElement.requestFullscreen();screen.orientation.lock("portrait-primary");
[HTML5: Screen Orientation API]
[页面强制横屏]

[Css实现手机端页面强制横屏的方法示例]

P.S. 如果你的页面里有from表单要填的话，应该用「弹出遮罩层让用户旋转手机」的解决方案。检测手机竖屏下，提示用关闭屏幕旋转锁定，并横置手机。想想手机浏览器还是竖屏，而内容却被强制横屏的画面有多奇怪吧…

/*-- css单位：vmin/vmax, vh/vw --*/
@media screen and (orientation: portrait) {
    html{
        width : 100vmin; 
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
}
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
}

$PS: 当时是解决ppt在线浏览横屏，结果office文档在线浏览url跳转了，跳出当前页面了。反而使loading横屏了

一期

css是区分大小的，而html不区分大小写
icon-font 不闪烁且只加载一次:本地加载(file:///D:/dev/…/html)不需要crossorigin;如果是服务器加载，需要添加属性：crossorigin。
<link rel="preload" as="font" type="font/ttf" crossorigin href="font/iconfont.ttf">
绝对定位后，父元素会失去高度
解决，1。Overflow：hidden，2。设置高度
float 撑开父元素高度
1. 父元素设置高度
2. 父元素后添加元素，clear:both; 可以利用 :after,再添加overflow，zoom
3. 父元素 overflow:hidden
4. 父元素也设置float，但是要设置宽度。和overflow是一个原理
BFC 左右布局中margin, overflow
多个块内元素中间会有莫名的留白
1)行内元素设置：vertial-align:bottom；2)父元素设置font-size:0;3)line-height足够小也可以;4)margin
div中img—inline-block和文本:img-display:block
ul下li:取消li之间的空格/破坏html的结构
inline-block有overflow-（只要不是visible—）: 上面img也是inline-block

图片自适应–缩放，最大限度充满容器

.wrapper{
    width:300px;  
    height:300px;  
    border:solid 1px #000;  
    background-color:red;  
    background-image:url(images/donghua1.jpg); /*图片地址*/  
    background-image:url(images/donghua3.jpg); /*图片地址*/  
    background-origin:content;  /*从content区域开始显示背景*/
    background-position:50% 50%;  /*图片上下左右居中*/  
    background-size:contain;    /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/  
    background-repeat:no-repeat; /*图像不重复显示*/  
}

重复嵌套的两个style，第一个定义样式不生效

<style>
<style>
    .outer{
        //这里的样式不生效    
    }
    .inner{
        // 有效
    }
</style>
</style>

style标签结合属性contenteditable*,可以在页面直接显示样式表，并且可编辑
tr,td 是table元素定义height无效，改写display，或者嵌套div ;
table设置layout:fixed 可以限定宽高

搜索结果展示，超出隐藏/… 。包括垂直方向

.serch-description{/*\\*/
    max-width: 150px;// 垂直方向 max-height:95px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.serch-description:hover{
    max-height:none;
    white-space: unset;
}

多行文字:
在webkit内核的浏览器中，多行文字省略可以采用CSS属性-webkit-line-clamp实现。
方案二：clamp.js

.multiple-line {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; // 而且-webkit-box已经被flex替代,但是不能用flex代替
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
}

其他

滚动穿透

css 之 overflow: hidden
js 之 touchmove + preventDefault
解决方案 position: fixed
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
简而言之，我们想让哪层不滚动，只需要给这层设置 pointer-events: none 。

配合弹窗的状态，当弹窗显示的时候，给位于遮罩层底下的图层设置 pointer-events: none ，当弹窗隐藏/关闭的时候，设置 pointer-events: auto ，或者干脆移除这个属性。

阻止冒泡？事实上，这并没有什么卵用。
只加 overflow:hidden对移动端是无效的！
该方案会让浏览器的滚动条默认重置于初始位置
阻止body的默认滚动？
直接阻止 document的 touchmove事件：

安全区域

字体文件优化

设置flex属性时 子元素宽度超出父元素

移动设备后退

二期

一期

其他

滚动穿透

设置flex属性时子元素宽度超出父元素