1.概念讲解防御性CSS，它在防御谁？我把他概括为：一切使业绩和行为偏离预期效果的情况。之所以会出现这些场景，是因为终端环境的多样性，开发和测试用例只能覆盖大部分的使用场景。在其他环境中，解析机制的差异和内容的动态变化都是导致意想不到的结果的原因。2.防御的必要性DefensiveCSS不仅仅是为了兼容其他一些场景，避免边缘化的情况，它更大的价值在于增强团队合作的可能性。防御性CSS的含义类似于JS中的try...catch。它不一定能缩短需求的开发时间，但却是你程序正确稳定运行的最后一道防线。更重要的是，只有在用户交互后才会检测到JS错误。有感知，一旦CSS出错，就会直接展现在用户面前，直接影响用户的使用率和留存率。据说编程风格分为三种：能跑的风格，中规中矩的风格，锦上添花的风格。能跑的风格，就是每一个设定和判断都紧紧贴合时代的需要，就像走钢丝的山羊，摇摇欲坠，却没有倒下，令人惊叹，但这种风格不仅对程序员的要求极高，而且不利于团队协作。一旦出现意外情况或需求发生变化，就会带来雪崩般的变化；规则的大致风格是：该写笔记的地方写笔记，该写思路的地方写自己这样做的原因是为了在该处理底线的地方做拦截处理，以及健壮性和可维护性程序直接满；万无一失的风格更像是处女座，追求极致完美，为规整的风格增添一抹亮色，年轻的“雷布思”就是典型代表。防御性CSS的目的是在技术上尽可能改变程序员的侥幸心理，提高项目的可用性和可维护性。它的目的也可以概括为让你的项目做起来：运行不出错，改变不骂。防御性CSS的作用是覆盖常规CSS，是实现项目稳定性的一个重要但容易被忽视的环节。3、防御技巧技巧一：flex-wrap属性背景：flex-wrap是flex布局中的一个属性，作用是控制flex容器中元素占用的空间是否超过flex容器的空间。防御原因：flex-wrap属性默认为非环绕，容易忽略多个元素的溢出；对于底部，请设置flex-wrap:wrap;意想不到的后果：内部元素被剪裁，或者滚动条出现在flex容器中；应用场景：1）开发时flex容器有足够的空间，但是小屏会溢出；2）内容由服务器下发，元素数量不能提前预付费用。超出预期时，flex容器出现滚动条或内部元素被剪切；代码：.options-list{显示：flex；flex-wrap:wrap;}样例场景技巧二：marginspacing属性背景：margin的作用是调整元素的外边距。用于指定元素与周围空间的距离关系。防御原因：防止元素之间的空间被挤压，造成重叠等；意想不到的后果：元素重叠或被挤压；应用场景：1）内容占用的空间不能保证不与其他元素挤压；代码:.section__title{margin-right:1rem;}样例场景技巧三：长文本处理背景：当文本长度超过容器时如何显示。意想不到的后果：文本换行，样式不统一；应用场景：1）要求列表一致，但文本长度不可控；这里假设最终同意设计，多余的部分将不显示。然后，意想不到的样式代码是：。用户名{空白：nowrap;溢出：隐藏；text-overflow:ellipsis;}场景示例：技巧四：防止图片被拉伸或压缩在页面显示时，不可能100%贴合容器的大小，难免会遇到图片缩放的问题。意外后果：图像被拉伸或压缩；应用场景：1）服务端发送多张大小不定的图片；2)用户自定义上传的图片需要预览和编辑；.card__thumb{object-fit:cover;}演示链接：https://monageju.github.io/Blog/object_fit.html场景示例：技能5：锁定滚动链接背景：overscroll-behavior是overscroll-behavior的简写属性-x和overscroll-behavior-y，控制元素如何滚动到其边界。说得通俗一点：在JS的世界里，有一个事件冒泡机制。您可以使用事件的stopPropagation方法来防止冒泡的发生。同样，在CSS世界中，滚动也有冒泡机制。当内部元素滚动到边界时，如果继续滚动，就会带动外部祖先元素滚动。这种现象称为滚动链。为了方便记忆，你也可以把他的形象当做卷轴泡泡来记忆。overscroll-behavior属性类似于事件的stopPropagation方法，防止事件冒泡，为开发者提供了控制内层元素是否可以“冒泡”并驱动外层元素滚动的能力。意想不到的后果：“滚动冒泡”或“滚动渗透”；应用场景：1）页面有多层滚动元素，需要单独控制每层滚动是否引起外层滚动；.child{overscroll-behavior-y:contain;overflow-y:auto;}demo链接：https://monageju.github.io/Blog/overscroll_behavior.html场景示例：如demo链接示例扩展：了解overscroll-behavior属性的作用，现在我们来看一下pointofexpansionThings：首先我们来看overscroll-behavior的属性值：overscroll-behavior属性有3个值：auto-default。元素的滚动会传播到祖先元素。contain-防止滚动链接。滚动不会传播到祖先，但会显示元素内部的原生效果。例如，Android上的眩光效果或iOS上的反弹效果，当用户触摸滚动边界时通知用户。注意：使用overscroll-behavior:containonhtml元素会阻止滚动导航操作。none-与contain相同，但它还可以防止对节点本身产生滚动效果（例如Android上的眩光或iOS上的弹跳）。这里有两种效果：一种是下拉刷新，一种是眩光反弹。下面放个demo看看具体效果：链接入口下拉刷新是原生支持的功能。如果项目需要自定义下拉刷新效果，除了要考虑如何实现自定义外，还要考虑如何去掉默认的原生下拉刷新，否则会并发两次下拉刷新，去掉原生下拉刷新也很简单，在body或html元素中添加如下代码即可：body{/*禁用滚动冒泡，但仍然可以进行下拉刷新、炫光回弹效果、滑动导航*/overscroll-behavior-y:contain;}至于禁用眩光和回弹效果，其实就是应用了overscroll-behavior属性的none属性值，具体代码如下：body{/*禁用默认下拉刷新，眩光和回弹效果，但仍然允许滑动导航*/overscroll-behavior-y:none;}除了上面介绍的两种效果，其实还有一个效果：手势导航，比如左滑退出，右滑前进;而如果要禁用手势导航，可以使用如下代码：body{/*禁用滑动导航*/overscroll-behavior-x:none;}技巧六：CSS变量的默认值背景：CSS变量可以实现动态控制元素属性，但当CSS变量未定义或无效时，变量值会异常。这时候元素的样式会偏离预期，可以实现变量默认值异常覆盖，保证变量值异常时页面依然可以运行。作为附加说明，回退值并非用于浏览器兼容性。如果浏览器不支持CSS自定义属性，则回退值几乎没有用处。它只是为支持CSS自定义属性的浏览器提供了一种备份机制。此机制仅在给定值未定义或无效时生效。该函数的第一个参数是自定义属性的名称。如果提供第二个参数，表示替代值，当自定义属性值无效时生效。意想不到的后果：由于宽高等变量值丢失导致不显示或变形；应用场景：.item{color:var(--my-var,red);/*红色if--my-varisnotdefined*/}技巧七：灵活的元素大小min-height/min-width背景：当需求需要完整展示某个列表数据，但是列表占用的空间数据不能固定，为避免部分内容太宽或太高而突破固定空间破坏布局，可以使用弹性尺寸min-*或max-*，可以自动适应部分内容占用空间过大或过小造成的审美问题；意想不到的后果：空间太大或太小，破坏布局或不美观；应用场景：.hero{min-height:350px;}场景示例：max-width使用场景：如果对每个元素使用固定宽度，当内容空间大于容器大小时会发生溢出，需要使用min-width限制最小宽度，当超过尺寸时，可以实现自动适配。技巧八：遗忘背景-重复背景：使用图片作为容器的背景图片。当容器的尺寸大于图像尺寸时，默认背景图像将重复。如果在开发中忽略以上问题，背景图片会出现重复问题；场景示例：解决方案：代码如下：background-image:url('..');背景重复：不重复；解决后效果：技巧九：媒体查询@media和CSS中的条件判断一样，会根据你定义的条件。当条件满足时，条件中的样式才会生效；例如：当屏幕宽度小于600px时，body背景色为红色；当屏幕宽度在600-800px之间时，body背景色为黄色；屏幕宽度大于800px时，body背景色为蓝色；示例代码：/*设置body的背景色为蓝色*/body{background-color:blue;}/*在小于或等于800px的屏幕上，设置背景颜色为黄色*/@mediascreenand(max-width:800px){body{background-color:yellow;}}/*在600px或更大的屏幕上在小屏幕上，将背景颜色设置为红色*/@mediascreenand(max-width:600px){body{background-color:red;}}演示链接如下：https://monageju.github.io/Blog/media.html技巧10：图片上的文字背景：当文字需要显示在图片的上层时，如果图片加载失败，外容器背景颜色接近文字颜色，文字显示效果不理想；例如：容器的背景设置为黑色，图片为橙色，文字颜色接近黑色。当图片加载失败时，文字的背景色直接变成容器的背景色，文字和容器的背景色重叠。示例如下；解决后效果：解决代码:.card__img{background-color:#FFF;}至此，即使图片加载失败，图片上的问题依然可以正常显示；对于图片加载失败时左上角的“brokenimage”标记，可以使用伪类进行遮挡美化；技巧11：滚动条属性的合理使用背景：当容器的空间固定时，如果内容超出容器，为了正常显示所有内容而不扩展占用空间，会使用overflow属性控制多余部分的自动滚动显示，同时给出滚动条样式表示还有剩余内容，但是如果这个属性使用不当，样式会很难看；例如：overflow属性有两个功能非常相似的属性值，一个是scroll，一个是auto；这两个属性值可以在内容大于所占空间时实现滚动显示，区别在于使用scroll属性无论内容是否超出容器空间都会显示滚动条，而auto属性会区分condition，内容滚动条只有超过才会显示，超过会自动隐藏，样式更美观；解法代码：.box{overflow-y:auto;}场景举例：技巧十二：预留滚动条空间，避免重排背景：技巧十一后，当我们正确使用overflow:auto，就万事大吉了吗？不一定想象这样的场景：有一个宽为100vw，高为100vh的容器盒子，容器中展示的是产品卡片。当滑动到页面底部时，触发滑动加载。触发懒加载时，容器内商品卡片所占高度已超过100vh，根据外层容器中设置的overflow:auto，内容超出时会显示滚动条，滚动条的出现使得页面不得不为滚动条让出一定的宽度。让最外层元素的位置，宽度发生变化，产生重排效果。这次是否可以避免不必要的重排？答案是肯定的。大家一定还记得vue指令中有两条非常相似的指令v-if和v-show。它们之间的原理和区别是什么？它们在什么场景下使用？提醒这一点，你有想法吗？如果你还没有，没关系。让我们再提醒你一点。既然要避免额外的重排，滑动加载是不可避免的，如果我一开始就预留滚动条的位置，只是你看不到而已。到了滚动条该上台的时候让你看到，能不能避免不必要的重排？现在想想，这就是v-show命令的设计原则吗？CSS中有一个scrollbar-gutter属性。当其值设置为稳定时，即可实现上述功能。代码如下。技巧十三：图片背景的最大宽度：给固定宽高的容器设置背景图片时，如果背景图片的尺寸超过容器的宽高，图片就会溢出，所以是项目中最好将resetCss根据以下属性进行初始化：img{max-width:100%;object-fit:cover;}例子：技巧十四：粘性定位说明：position的粘性位置是指用户滚动，元素的position属性在position:relative和position:fixed定位之间切换；这对于需要使用滚动天花板的场景非常方便；是基于业务场景推动CSS技术发展的典型案例；技巧十五：浏览器兼容性CSS不批处理说明：根据W3C标准，批组选选择器，如果其中一个在组中无效，则整个选择器都无效。所以，遇到浏览器兼容性属性时，不要分批写入；例子：如果这样写，选择器是没有问题的，因为组选择器的所有选择器都是有效的：h1,h2,h3{font-family:sans-serif}此时相当于：h1{font-family:sans-serif}h2{font-family:sans-serif}h3{font-family:sans-serif}但是如果，下面的情况就不一样了：input::-webkit-input-placeholder,input:-moz-placeholder{color:#222;}该选择器使用分组选择器，在特定浏览器中，该组中只有一个选择器有效，其他选择无效。根据规则，整个组选择器将无效。所以，正确的做法应该是分开写。代码如下：input::-webkit-input-placeholder{color:#222;}input:-moz-placeholder{color:#222;}这时候效果和预期的一样。4.结论通常，一个项目的稳定性是指逻辑层和服务层的稳定性。CSS是极易被忽略的一层；当项目出现线上故障时，逻辑层和服务端可以通过日志查询抓包，但是CSS问题只能根据经验和项目的运行环境进行粗略推断，很难快速、准确的解决准确定位问题。在构建稳定性的时候，CSS的书写要遵循“向前看，向后看”的防御式写法，尽可能避免意外的边界情况。这就是防御性CSS的真正价值所在。
