CSSProTipsDirectoryProTipsSupportContributionGuidelinesProTipsUsingCSSResetInheritancebox-sizingUsingunsetinsteadofresetallpropertiesUsingthe:not()selectortodeterminewhetheraformshoulddisplayaborderAddforthebodyelement为表单元素设置行高：focus垂直居中任何元素逗号分隔列表使用负nth-child选择元素使用SVG图标使用“类似猫头鹰”的选择器使用max-height创建纯CSS滑块创建网格等宽表使用Flexbox删除额外边距使用属性用于选择空链接的选择器为“默认”链接定义一致的垂直节奏内部比例框定义损坏图像的样式使用rem进行全局大小调整；em用于本地调整大小大小隐藏没有静音，自动播放的视频使用选择器：root来控制字体弹性设置表单元素的字体大小以获得更好的移动体验使用指针事件来控制鼠标事件使用CSS重置CSS重置在不同的浏览器上工作保持一致的样式风格。可以使用CSS重置库Normalize等，也可以使用更简化的重置方法：*,*::before,*::after{box-sizing:border-box;保证金：0；padding:0;}现在element的margin和padding设置为0，box-sizing可以管理你的CSS盒模型布局。演示说明：如果您按照接下来介绍的关于继承box-sizing的技巧进行操作，则无需将box-sizing属性添加到上述代码中。从html元素继承box-sizing:html{box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}所以在插件或其他组件中改变box-sizing在.返回目录使用unset而不是重置所有属性重置元素的属性时，无需重置每个单独的属性：button{background:none;边框：无；颜色：继承；字体：继承；大纲：无；padding:0;}您可以使用all速记来指定所有元素的属性。将值设置为unset会将元素的属性更改为其初始值：button{all:unset;}注意：IE11不支持all速记，目前正在考虑支持Edge。IE11不支持取消设置。回到目录，使用:not()选择器判断表单是否显示边框先给元素添加边框/*添加边框*/.navli{border-right:1pxsolid#666;}移除最后一个元素的边框/*删除边框*/.navli:last-child{border-right:none;}但是不要这样做，使用:not()伪类来实现相同的效果：.navli:not(:last-child){border-right:1pxsolid#666;}当然你也可以用.navli+li，但是:not()更清晰易读。demo回目录给body元素添加行高不需要给每个
,元素一个一个添加line-height，直接给body元素添加：body{line-height:1.5;}文本元素可以轻松继承正文样式。DemoBackContentsSetforformelements:focus有视力的键盘用户依靠焦点来确定键盘事件在页面上的位置。使表单元素的焦点突出，然后与浏览器的默认实现对齐：a:focus,button:focus,input:focus,select:focus,textarea:focus{box-shadow:none;大纲：#000虚线2px；outline-offset:.05em;}演示回目录垂直居中任何元素不行！这绝不是黑魔法，真的可以让任何元素垂直居中：html,body{height:100%;保证金：0；}正文{-webkit-align-items：中心；-ms-flex-align:居中；对齐项目：居中；显示：-webkit-flex；display:flex;}...和CSSGrid:body{display:grid;高度：100vh；保证金：0；place-items:centercenter;}这还不够吗？垂直的，水平的？任何元素，任何时间，任何地点？CSS-Tricks有一篇关于各种居中技术的好文章。注意：IE11对flexbox的支持有点问题。Demo返回目录Comma-separatedlist让列表的每一项都用逗号分隔：ul>li:not(:last-child)::after{content:",";}因为最后一项没有逗号，可以使用:not()伪类。注意：此技巧对于可访问性而言并不理想，尤其是屏幕阅读器。而且复制粘贴并不会带走CSS生成的内容，需要注意。返回目录使用负数nth-child选择元素使用负数nth-child选择1到n元素。li{display:none;}/*选择第1到第3个元素并显示*/li:nth-child(-n+3){display:block;}也许你已经掌握了如何使用:not()这个技巧，试试这个：/*选择除前3个之外的所有项目，并显示它们*/li:not(:nth-child(-n+3)){display:none;}如此简单！DemoBackTableofContents使用SVG图标没有理由不使用SVG图标：、.jpg或.gif-jif-whatev文件。注意：对于纯图标按钮，如果SVG加载不成功，以下样式有助于辅助功能：.no-svg.icon-only::after{content:attr(aria-label);}回到目录使用名称“owl-like”选择器可能不熟悉，但是通用选择器(*)与相邻的兄弟选择器(+)一起工作得很好：*+*{margin-top:1.5em;}在这个例子中，所有文档流中相邻的兄弟元素将具有margin-top:1.5em样式。有关更多“类似猫头鹰”的选择器，请参阅HeydonPickering在AListApart上的文章。使用max-height创建一个纯CSS滑块Max-height和overflow隐藏在一起创建一个纯CSS滑块：。滑块{最大高度：200px；溢出-y：隐藏；宽度：300px;}.slider:hover{最大高度：600px;overflow-y:scroll;}增加鼠标移入时slider元素的max-height值，可以显示overflow部分。回到目录创建一个等宽网格的表格。table-layout:fixed可以让每个网格保持相同的宽度：.calendar{table-layout:fixed;}无痛的表格布局。不要使用第nth-、first-和last-child来删除列之间不必要的间隙，而是使用flexbox的space-between属性：.list{display:flex;justify-content:space-between;}.list.person{flex-basis:23%;}列之间的空间总是相等的。返回目录使用属性选择器选择空链接当元素没有文本内容但有href属性时，显示其href属性：a[href^="http"]:empty::before{content:attr(href);}很简单。演示回到目录为“默认”链接定义样式为“默认”链接定义样式：a[href]:not([class]){color:#008000;text-decoration:underline;}通过CMS系统插入的链接，通常不带class属性，上面的样式可以识别，不影响其他样式。返回目录ConsistentVerticalRhythmUniversalselector(*)与元素一起使用以保持一致的垂直节奏：.intro>*{margin-bottom:1.25rem;}一致的垂直节奏可以提供视觉美感并增强内容的可读性。返回目录固定比例框要创建一个固定比例的框，您需要做的就是为div设置一个内边距：.container{height:0;底部填充：20%；position:relative;}.containerdiv{border:2pxdashed#ddd;高度：100%；左：0；位置：绝对；顶部：0；width:100%;}使用20%padding-bottom使盒子的高度等于其宽度的20%。无论视口宽度如何，子div都将保持其宽高比(100%/20%=5:1)。返回demo目录为破损图片定义样式只需一点CSS就可以美化破损图片：img{display:block;字体系列：无衬线；字体粗细：300；高度：自动；行高：2；位置：相对；文本对齐：居中；width:100%;}添加伪元素以显示用户信息和URL引用：img::before{content:"我们很抱歉，下面的图像已损坏:(";display:block;margin-bottom:10px;}img::after{content:"(url:"attr(src)")";display:block;font-size:12px;}LearnmoreaboutthisClassstyleskillsIreAderinokun'soriginalpost.回到目录和使用rem调整全局大小；使用em调整局部大小在根元素上设置基本字体大小后（html{font-size:100%;}），使用em设置文本元素字体大小：h2{font-size:2em;}p{font-size:1em;}然后设置模块的字体大小为rem:article{font-size:1.25rem;}aside.module{font-size:.9rem;}现在，每个模块都是独立的，更简单，更灵活的样式，便于维护。后台目录隐藏没有静音，自动播放的电影这是自定义用户样式表的好技巧。避免自动播放。如果没有静音，则不会显示视频：video[自动播放]:not([muted]){display:none;}同样，我们利用了:not()。回到目录使用选择器:root来控制字体Elasticity在响应式布局中，字体大小应该需要根据不同的视口进行调整。您可以使用以下方法根据视口高度和字体大小计算字体大小：root::root{font-size:calc(1vw+1vh+.5vmin);}现在，您可以使用rootembody{font:1rem/1.6sans-serif;}Demo返回目录为了更好的移动体验，在触发
