基础理论元素的显示与隐藏根据不同需求选择隐藏方案如果希望元素不可见不占空间，辅助设备无法访问不渲染，使用script标签隐藏获取数据的方法使用document.querySelector('script').innerHTML如果你想让元素不可见并且不占空间，辅助如果设备无法访问，但是资源已经加载，DOM可以访问，可以直接使用display:none隐藏。dn{display:none;}如果想让元素不可见，不占空间，辅助设备是不能访问的，但是隐藏的时候可以有淡入淡出的过渡效果。hidden{position:absolute;visibility:hidden;}如果你想让元素不可见，不能点击，辅助设备不能访问，但又占用预留空间，可以使用visibility:hidden来隐藏它。vh{visibility:hidden;}如果希望元素不可见、不可点击、不占空间，但键盘可以访问，可以使用clip裁剪隐藏。剪辑{位置：绝对;clip:rect(0000);}案例：1.邀请函生成封面。2.键盘使用快捷键但不显示按钮（使用accesskey）。如果希望元素不可见且不可点击，但占用空间且键盘可访问，可以使用relative来隐藏。如果条件允许，也就是在之前的层叠上下文之间设置了背景色，可以使用更友好的z-index负值来hide.out{position:relative;left:-999em;}.lower{位置：相对;z-index:-1;}如果你想让元素不可见，但是可以点击，不占用空间，可以使用transparency.opacity{position:absolute;opacity:0;}如果你想让元素不可见，但是位置不变，仍然可以点击选择，直接设置透明度为0.opacity{opacity:0;}如果你想让元素有过渡效果动画显示时，可以用max-height隐藏。hidden{max-height:0;溢出：隐藏；}Display及对显示和隐藏元素的基本理解：不能点击，不能用屏幕阅读器等辅助设备访问，占用空间消失深度理解：在img标签上设置display:none或者父元素会加载资源。但是background-image请求的资源不会加载到设置了display:none的标签或父元素上（safari和chrome验证），count中设置了display:none的元素将不会被统计。它会影响IntersectionObserver。visibility和元素visibility的基本理解：不能点击，不能用screenreaders等辅助设备访问，占用空间不消失深度理解：visibility是继承的，parent可以设置visibility：hiddenafterchild可以设置visibility：visible显示子元素。具有visibility:hidden的元素将加载img资源以及background-image资源。也将计入计数。visibility属性包含在transition的范围内，因此可以用来表现元素从隐藏到显示的过渡效果。但是这个属性不会影响IntersectionObserver，也就是说如果弹窗从隐藏到显示都使用了这个属性，埋起来是无效的。textlinebreakword-break当行尾放不下一个词时，决定这个词怎么放在里面（决定连续词的长度）nomal：默认值，默认的换行规则（CJK文本换行，英文单词donotbreak,spacesbreaklines)break-all：对于非CJK（中日韩）文字，可以任意换行keep-all：CJK文字不停，非CJK文字表示像nominalword-wrap，用来说明当一个不能分开的字符串太长填不满它的换行框时，为了防止溢出，浏览器是否允许这样的分词（当一个词没有换行点不适合在句末，判断该词是否断词）nomal：默认值，只能在正常断词处断行。（例如，两个词之间的空格）。break-word：表示如果行中没有多余的空间容纳单词到末尾，那些不能拆分的正常单词将被强行拆分成换行符。white-space如何处理元素中的空白nomal：默认值，连续的空白被合并，换行符被当作空格遇到换行或元素时被打断会打断前行：连续的空白字符会被合并，遇到换行或元素时会打断，或者填充行框（line-box），换行中文标点线例如，打破规则。为首避标点，<为避尾标点，通过该属性控制CJK文本标点的换行规则auto：使用默认的换行规则。loose：使用限制最少的换行规则分隔文本。通常用于短行，例如报纸。normal：使用最常见的换行规则。strict：使用最严格的换行规则。anywhere：任何位置都可以作为换行点，包括任何标点符号。这是一个html元素，宽度不够，我在这里换行；宽度够了，还是一行显示实现原理wbr::after{content:'\00200B'}cursor属性cursorhttps://developer.mozilla.org...一个flex最终大小的计算规则item一个flexitem的最终尺寸是基础尺寸（或内容尺寸），弹性增长或收缩，最大和最小尺寸共同作用的结果最终尺寸计算的优先级是：最大和最小尺寸限制>elasticgrowth或者shrink>basesizebasesize有一个flex-basis属性或者一个width属性，和box-sizing盒子模型共同决定内容大小指的是最大内容宽度。当未设置basesize时，它将取代basesize的作用。弹性增长是指flex-grow属性，弹性收缩是指flex-shrink属性。最大尺寸主要通过max-width属性显示；最小尺寸受最小内容宽度、width属性和min-width属性的影响。Flex容器：flex-wrap:nowrap;flex-direction:row;justify-content:flex-start;align-items:stretch;是默认值flex:01auto这是flex子项的默认值，代表flex-grow:0,flex-shrink:1,flex-basis:autoMinimumSizeCalculationRules如果min-width属性值不是auto，元素的最小尺寸是min-width属性值。此时width属性不能影响最小尺寸，即使width属性值大于min-width属性值。将width属性的计算值与最小内容宽度的大小进行比较，较小的值是元素的最小大小。如果width属性值和min-width属性值都为auto，则元素的最小尺寸为最小内容宽度。如果flexchild设置overflow:hidden，并且最小尺寸由内容宽度是否最小决定，则最小尺寸无效。基本尺寸计算规则如果flex-basis属性和width属性同时被设置为特定值，width属性值将被忽略，优先使用flex-basis作为基本尺寸。如果flex-basis的属性值为初始值auto，则width属性设置的长度值将作为基础尺寸。如果flex-basis和width的属性值都为auto，则flexchild的最大内容宽度将作为基础尺寸。当弹性增长或收缩起作用时如果容器大小足够并且子元素包含flex-grow的属性值不为0那么启用弹性增长规则并且容器大小足够：在容器flex-wrap:wrap状态，n个子元素的基础维度之和小于容器的宽度，n+1个子元素的基础维度之和大于容器，则n个子元素如果有元素中flex-grow不为0的元素，则n个子元素符合弹性增长条件。在容器flex-wrap:nowrap状态下，所有子元素的基础尺寸之和小于容器宽度。如果容器的尺寸不够大，并且子元素containsflex-shrink的属性值不为0，则启用弹性收缩规则。-shrink不为0，则表示该子元素具有弹性收缩条件。在容器的flex-wrap:nowrap状态下，如果所有子元素的basewidth都小于容器宽度，并且至少有一个子元素的flex-shrink不为0，则flex-shrink的子元素不为0有资格进行弹性收缩。弹性增长，增长部分为可分配空间，计算规则为容器宽度-元素basesize弹性收缩，收缩部分为flex-shrink不等于0的元素宽度，最多可以收缩到元素的最小尺寸。最终尺寸计算规则-总结如果没有弹性收缩或增长，元素使用最大尺寸和最小尺寸之间的基础尺寸如果元素可以弹性增长或收缩，如果容器宽度足够，则使用弹性增长规则，并且如果容器宽度不够弹性收缩规则的情况下，同一行只能应用一条规则Selector选择器优先值计算Selector计算值计算详解*{}010级通用选择器，优先值为0dialog{}111级标签选择器，优先级值为1ui>li{}221级标签选择器，1个0级选择器，优先级值为2li>ol+ol{}331级标签选择器，2个0级选择器with优先级值为3.foo{}101个2级类名选择器，优先级值为10a:not([rel=nofollow]){}111个2级属性选择器，1个1级标签选择器，1个0级负伪类，优先级值为11a:hover{}111一级标签选择器，1个二级伪类，优先级值为11olli.foo{}122一级标签选择器，1个二级类名选择器，优先级值为12li。foo.bar{}211个1级标签选择器，2个2级类名选择器，优先级为21#foo{}1001个3级ID选择器，优先级为100#foo.barp{}1111个3级ID选择器，1个level2类名选择器，和1个level1标签选择器，优先级值为111，在计算值相同的情况下，遵循后来居上的原则，后者的优先级更高。命名灵感从HTMLtags.cs-module-header{}.cs-module-body{}.cs-module-aside{}.cs-module-main{}.cs-module-nav{}.cs-寻找灵感模块部分{}.cs-module-content{}.cs-module-summary{}.cs-module-detail{}//details.cd-module-option{}.cs-module-img{}.cs-module-footer{}.cs-module-ui{}.cs-module-li{}//列出子项.cs-module-a{}//link.cs-module-g{}//group.cs-module-desc{}//description.cs-module-x{}//容器框从HTML特定属性values.cs-radio{}.cs-checkbox{}.cs-range{}.cs-tspan-email{}.cs-tspan-number{}.cs-tspan-color{}.cs-tspan-tel{}.cs-tspan-date{}.cs-tspan-url{}.cs-tspan-time{}.cs-tspan-file{}角色属性值从可访问性中找到灵感。cs-grid{}.cs-grid-cell{}.cs-log{}.cs-menu{}.cs-menu-bar{}.cs-menu-item{}.cs-region{}//不能被其他角色描述，但非常重要part.cs-banner{}//Banneradvertisement.cs-slider{}.cs-tab{}.cs-tab-list{}.cs-tab-pannel{}.cs-tooltip{}.cs-tree{}从CSS伪类和HTML布尔属性中寻找灵感。active{}.disabled{}.selected{}.checked{}.invalid{}//错误状态体验优化图片加载失败体验优化变换：缩放（1）；内容：'';color:transparent;}/*替换图片*/img.error::before{content:'';位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；背景：#f5f5f5url(break.svg)no-repeatcenter/50%50%;}/*altprompt*/img.error::after{content:attr(alt);位置条件：绝对的；左：0；底部：0；宽度：100%；行高：2；背景色：rgba(0,0,0,.5)；白颜色;字体大小：12px；-居中对齐;空白：nowrap；溢出：隐藏；text-overflow:ellipsis;}点击移动端体验优化按钮放大mobi-btn{border:8pxsolidtransparent;}键盘体验优化accessibility-focuscontroltabindex="-1"元素可以鼠标聚焦orJSbutnotkeyboard1,2,...,0如果点击，会定位点击的主题，按tab键找到第一个获得焦点的元素，再按一次根据元素的tabindex找到下一个焦点:focus-visibleletusknow元素的焦点行为是由键盘还是鼠标触发//鼠标触发：focus:not(:focus-visible){}//键盘触发：focus:focus-visible{}当前获得焦点的元素document.activeElement检测是否获取文档Focuseddocument.hasFocus()滚动体验优化overscroll-behavioroverscroll-behavior:[contain|无|auto]{1,2}当只有一个值时表示该值既是水平方向又是垂直方向，当有两个值时，第一个表示水平方向第二个表示垂直方向auto：滚动到edgeandcontinuetoscrolltheexternalscrollablecontainercontain:默认滚动溢出行为只会在当前元素内部显示，不会滚动相邻滚动区域none:相邻滚动区域不滚动，防止默认滚动溢出行为。scroll-behavior用在可滚动的容器上，常用于到达顶部auto:默认值smooth:平滑滚动，配合ant-design的scrollToFirstError效果很好例如突然加载上图会毫无察觉）none:退出浏览器滚动锚点行为隐藏滚动条，同时元素可以滚动。scroll-none{scrollbar-width:none;}//chromeprivatemethod.scroll-none::-webkit-scrollbar{width:0;height:0;}跳转体验优化PC端跳转同地址不新建标签页点击进入百度当目标相同时，会指向同一个标签页输入体验优化cater-color属性改变插入光标的颜色cater-color:red移动端唤起数字键盘验证码：拉伸行为体验优化rezizenone：默认值，无拉伸效果，可用于种植textarea元素有效条件可以垂直方向拉伸，overflow属性值不可见限制拉伸范围。使用max-width、max-height、min-width、min-height属性选择行为体验优化user-selecttext：默认值，文本和图片可以选择none：禁止文本被选中all：一个被低估的属性值，设置该属性的文字和文字内容会被选中::selection选中时为伪类，全局设置时，可以设置品牌颜色为背景，合适的颜色为字体颜色::selection{颜色：混色系；background:hunlijuBackgroundColor;}刷新体验优化刷新时滚动条回到顶部if(history.scrollRestoration){history.scrollRestoration='manual';}打印行为体验优化控制打印样式的媒体查询@mediaprint{header{display:none;}}是否准确打印color-adjusteconomy：默认值，背景可能不准确Printexact:printtable{-webkit-print-color-adjust:exact;color-adjust:exact;}maketheelementprintonanotherpagebreak-before:pageperformanceoptimizationwill-changewill-change有两个作用，一个是创建一个合成层，另一个是告诉浏览器：“我“要改变，你必须做好准备”，然后才会触发真正的行为。如何正确使用will-change不应该设置为默认状态，需要及时销毁，理想的应用场景应该是悬停状态//good.will-change-parent:hover.will-change{will-change:transform;}.will-change{transition:transform0.3s;}.will-change:hover{transform:scale(1.5)}//bad.will-change{transition:transform0.3s;}.will-变化：悬停{将改变：变换；transform:scale(1.5);}如果点击按钮，某个元素执行动画，先执行mousedown事件，再执行click事件dom.onmousedown=function(){target.style.willChange='transform'}dom.onclick=function(){//目标元素执行动画}target.onanimationend=function(){//动画结束，使用回调函数移除will-change属性this.style.willChange='auto'}Createcompositelayercannotcopytheloadedcontentcompositelayer的位图会由GPU合成，比CPU处理快很多需要repaint时，只需要自己repaint，不影响推广其他层元素为复合层后，transform和opacity不会触发repaint。如果不是复合层，还是会触发repaint，避免隐式创建复合层，优化复合层。如果一个复合图层的宽高是100px100px，那么这个复合图层占用内存的计算方法是100100*3=30000Byte=30KB。当元素重叠时，下面的元素成为合成层，上面的元素隐式成为合成层。必要的组成层的水平可以提高到更高的水平。,其他重叠层级没有这个层级高，复合层动画不会隐式使用transform创建。一方面，如果不涉及translateZ，则不会创建复合层。另一方面，堆栈上下文的生成不会影响其他堆栈上下文。渲染可以通过缩小宽度和高度然后放大来有效减少合成层使用的内存。SEOH1标签只能使用同一个网页通过多个URL访问指定的规范URL。关键词详细描述不需要抓取的链接nofollow指定为外部链接external指定页面图标很少用到的属性简体转繁体平方字体有效，老老实实做i18n哈哈哈font-variant-east-asian:traditional;
