1. 首页
  2. IT资讯

世界顶尖程序员所用的21个css技巧

“u003Cdivu003Eu003Cp class=”normal_(Web)”u003E21个有用的CSS小技巧,来帮你把CSS技术提高到高档水平 [Github上有8000多个star]。包含Flexbox、REM、:not()挑选器、负的nth-child等。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E01、运用CSS复位u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003ECSS复位能够在不同的浏览器上坚持共同的款式风格。您能够运用CSS reset 库Normalize等,也能够运用一个更简化的复位办法:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E* {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: border-box;u003Cu002Fpreu003Eu003Cpreu003E margin: 0; padding: 0;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E现在元素的 margin 和 padding 已为0,box-sizing能够管理您的CSS盒模型布局。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意:假如你遵从接下来承继 box-sizing讲解的这个技巧, 你不需求在以上代码中增加box-sizing 特点。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E02、承继box-sizingu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E从 html 元素承继 box-sizing :u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ehtml {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: border-box;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E*, *:before, *:after {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: inherit;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E如此在插件或其它组件里改动 box-sizing 变得简略。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E03、运用 :not() 挑选器来决定表单是否显现边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E先为元素增加边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 增加边框 *u002Fu003Cu002Fpreu003Eu003Cpreu003E.nav li {u003Cu002Fpreu003Eu003Cpreu003E border-right: 1px solid #666;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E为最终一个元素去除边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 去掉边框 *u002Fu003Cu002Fpreu003Eu003Cpreu003E.nav li:last-child {u003Cu002Fpreu003Eu003Cpreu003E border-right: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不过不要这么做,运用 :not() 伪类来到达相同的作用:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.nav li:not(:last-child)u003Cu002Fpreu003Eu003Cpreu003E{u003Cu002Fpreu003Eu003Cpreu003Eborder-right: 1px solid #666;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E当然,你也能够运用 .nav li + li 或许 .nav li:first-child ~ li ,可是 :not()更加明晰,具有可读性。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E04、为 body 元素增加行高u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不用为每一个 u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E,<h*> 元素逐个增加 line-height,直接增加到 body 元素:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ebody {u003Cu002Fpreu003Eu003Cpreu003E line-height: 1.5;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E文本元素能够很简单地承继 body 的款式。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E05、笔直居中任何元素u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不!这绝不是黑魔法,真的能够笔直居中任何元素:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ehtml, body {u003Cu002Fpreu003Eu003Cpreu003E height: 100%; margin: 0;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E body {u003Cu002Fpreu003Eu003Cpreu003E -webkit-align-items: center;u003Cu002Fpreu003Eu003Cpreu003E -ms-flex-align: center;u003Cu002Fpreu003Eu003Cpreu003E align-items: center;u003Cu002Fpreu003Eu003Cpreu003E display: -webkit-flex;u003Cu002Fpreu003Eu003Cpreu003E display: flex;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这还不够?笔直方向,水平方向?任何元素,任何时刻,任何地址?CSS-Tricks 有篇好文 讲到了各种居中的技巧。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意: IE11 对 flexbox 的支撑有点 bug。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E06、逗号分隔列表u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E使列表的每项都由逗号分隔:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eul > li:not(:last-child)::after {u003Cu002Fpreu003Eu003Cpreu003E content: “,”;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E因最终一项不加逗号,能够运用 :not() 伪类。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意:这一技巧对于无障碍,特别是屏幕阅读器而言并不抱负。并且复制粘贴并不会带走CSS生成的内容,需求留意。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E07、运用负的 nth-child 来挑选元素u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E运用负的 nth-child 能够挑选 1 至 n 个元素。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eli {u003Cu002Fpreu003Eu003Cpreu003Edisplay: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Eu002F* 挑选第 1 至第 3 个元素并显现出来 *u002Fu003Cu002Fpreu003Eu003Cpreu003Eli:nth-child(-n+3) {u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E或许你已经把握了怎么运用 :not()这个技巧,试下这个:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 挑选第 1 至第 3 个元素并显现出来 *u002Fu003Cu002Fpreu003Eu003Cpreu003Eli:not(:nth-child(-n+3)) {u003Cu002Fpreu003Eu003Cpreu003E display: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E如此简略!u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E08、运用 SVG 图标u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E没有理由不运用 SVG 图标:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.logo {u003Cu002Fpreu003Eu003Cpreu003E background: url(“logo.svg”);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003ESVG 在一切分辨率下都能够杰出缩放,并且支撑一切 IE9 今后的浏览器,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意: 针对仅有图标的按钮,假如 SVG 没有加载成功的话,以下款式对无障碍有所帮助:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.no-svg .icon-only:after {u003Cu002Fpreu003Eu003Cpreu003E content: attr(aria-label);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpu003E09、运用 “形似猫头鹰” 的挑选器u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这个姓名可能比较生疏,不过通用挑选器 (*) 和 相邻兄弟挑选器 (+) 一同运用,作用特殊:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E* + * {u003Cu002Fpreu003Eu003Cpreu003Emargin-top: 1.5em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在此示例中,文档流中的一切的相邻兄弟元素将都将设置 margin-top: 1.5em 的款式。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E更多 “形似猫头鹰” 的挑选器,可参阅 A List Apart 上面 Heydon Pickering 的文章。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E10、运用 max-height 来树立纯 CSS 的滑块u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Emax-height 与 overflow hidden 一同来树立纯 CSS 的滑块:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.slider {u003Cu002Fpreu003Eu003Cpreu003E max-height: 200px;u003Cu002Fpreu003Eu003Cpreu003E overflow-y: hidden;u003Cu002Fpreu003Eu003Cpreu003E width: 300px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .slider:hover {u003Cu002Fpreu003Eu003Cpreu003E max-height: 600px;u003Cu002Fpreu003Eu003Cpreu003E overflow-y: scroll;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E鼠标移入滑块元素时增大它的 max-height 值,便能够显现溢出部分。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E11、发明格子等宽的表格u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Etable-layout: fixed 能够让每个格子坚持等宽:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.calendar {u003Cu002Fpreu003Eu003Cpreu003E table-layout: fixed;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E无痛的 table 布局。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E12、运用 Flexbox 去除剩余的外边距u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E与其运用 nth-, first-, 和 last-child 去除列之间剩余的空隙,不如运用 flexbox 的space-between 特点:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.list {u003Cu002Fpreu003Eu003Cpreu003Edisplay: flex;u003Cu002Fpreu003Eu003Cpreu003E justify-content: space-between;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .list .person { flex-basis: 23%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E列之间的空隙总是均匀持平。u003Cu002Fpu003Eu003Ch1u003E运用特点挑选器来挑选空链接u003Cu002Fh1u003Eu003Cp class=”normal_(Web)”u003E当 元素没有文本内容,但有 href 特点的时分,显现它的 href 特点:u003Cu002Fpu003Eu003Cpreu003Ea[href^=”http”]u003Cu002Fpreu003Eu003Cpreu003E:empty::before {u003Cu002Fpreu003Eu003Cpreu003E content: attr(href);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E适当简洁。u003Cu002Fpu003Eu003Cpu003E13、给 “默许” 链接界说款式u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E给 “默许” 链接界说款式:u003Cu002Fpu003Eu003Cpreu003Ea[href]:not([class])u003Cu002Fpreu003Eu003Cpreu003E{u003Cu002Fpreu003Eu003Cpreu003E color: #008000;u003Cu002Fpreu003Eu003Cpreu003E text-decoration: underline;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E经过 CMS 体系刺进的链接,通常没有 class 特点,以上款式能够鉴别它们,并且不会影响其它款式。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E14、共同笔直节奏u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E通用挑选器 (*) 跟元素一同运用,能够坚持共同的笔直节奏:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.intro > * {u003Cu002Fpreu003Eu003Cpreu003Emargin-bottom: 1.25rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E共同的笔直节奏能够供给视觉美感,增强内容的可读性。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E15、固定份额盒子u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E要创立具有固定份额的一个盒子,一切你需求做的就是给 div 设置一个 padding:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.container {u003Cu002Fpreu003Eu003Cpreu003E height: 0;u003Cu002Fpreu003Eu003Cpreu003E padding-bottom: 20%;u003Cu002Fpreu003Eu003Cpreu003E position: relative;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .container div {u003Cu002Fpreu003Eu003Cpreu003E border: 2px dashed #ddd;u003Cu002Fpreu003Eu003Cpreu003E height: 100%;u003Cu002Fpreu003Eu003Cpreu003E left: 0;u003Cu002Fpreu003Eu003Cpreu003E position: absolute;u003Cu002Fpreu003Eu003Cpreu003E top: 0;u003Cu002Fpreu003Eu003Cpreu003E width: 100%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E运用20%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关,子元素的div将坚持其宽高比(100%u002F 20%= 5:1)。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E16、为破碎图象界说款式u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E只要一点CSS就能够美化破碎的图象:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eimg {u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003Efont-family: Helvetica, Arial, sans-serif;u003Cu002Fpreu003Eu003Cpreu003Efont-weight: 300;u003Cu002Fpreu003Eu003Cpreu003Eheight: auto;u003Cu002Fpreu003Eu003Cpreu003E line-height: 2;u003Cu002Fpreu003Eu003Cpreu003E position: relative;u003Cu002Fpreu003Eu003Cpreu003E text-align: center;u003Cu002Fpreu003Eu003Cpreu003E width: 100%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E以增加伪元素的规律来显现用户信息和URL的引用:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eimg:before {u003Cu002Fpreu003Eu003Cpreu003E content:u003Cu002Fpreu003Eu003Cpreu003E”We’re sorry, the image below is broken :u003Cu002Fpreu003Eu003Cpreu003E(“;u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003Emargin-bottom: 10px;u003Cu002Fpreu003Eu003Cpreu003E}img:after {u003Cu002Fpreu003Eu003Cpreu003E content: “(url: ” attr(src) “)”;u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003E font-size: 12px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E了解更多关于这类款式的技巧 Ire Aderinokun的 原帖.u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E17、用 rem 来调整大局巨细;用 em 来调整部分巨细u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在根元素设置根本字体巨细后 (html { font-size: 100%; }), 运用 em 设置文本元素的字体巨细:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eh2 {u003Cu002Fpreu003Eu003Cpreu003E font-size: 2em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Ep { font-size: 1em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E然后设置模块的字体巨细为 rem:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Earticle {u003Cu002Fpreu003Eu003Cpreu003Efont-size: 1.25rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Easide .module { font-size: .9rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E现在,每个模块变得独立,更简单、灵活的款式便于维护。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E18、躲藏没有静音、自动播放的影片u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这是一个自界说用户款式表的不错的技巧。防止在加载页面时自动播放。假如没有静音,则不显现视频:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Evideo[autoplay]u003Cu002Fpreu003Eu003Cpreu003E:not([muted]) {u003Cu002Fpreu003Eu003Cpreu003Edisplay: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E再次,咱们运用了 :not() 的长处。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E19、运用挑选器:root来操控字体弹性u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在呼应式布局中,字体巨细应需求依据不同的视口进行调整。你能够核算字体巨细依据视口高度的字体巨细和宽度,这时需求用到:root:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E:root {u003Cu002Fpreu003Eu003Cpreu003Efont-sizeu003Cu002Fpreu003Eu003Cpreu003E: calc(1vw + 1vh + .5vmin);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E现在,您能够运用 root emu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ebody {u003Cu002Fpreu003Eu003Cpreu003E font: 1remu002F1.6 sans-serif;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E20、为更好的移动体会,为表单元素设置字体巨细u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E当触发的下拉列表时,为了防止表单元素在移动浏览器(ios Safari 等等)上的缩放,加上font-size:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002Fu002Fcode fromu003Cu002Fpreu003Eu003Cpreu003Ehttp:u002Fu002Fcaibaojian.comu002Fcss-protipsu003Cu002Fpreu003Eu003Cpreu003E.htmlinput[type=”text”],u003Cu002Fpreu003Eu003Cpreu003Einput[type=”number”],u003Cu002Fpreu003Eu003Cpreu003Eselect,textarea {u003Cu002Fpreu003Eu003Cpreu003E font-size: 16px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Ch1u003E支撑状况u003Cu002Fh1u003Eu003Cp class=”normal_(Web)”u003E这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E21个有用的CSS小技巧,来帮你把CSS技术提高到高档水平 [Github上有8000多个star]。包含Flexbox、REM、:not()挑选器、负的nth-child等。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E01、运用CSS复位u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003ECSS复位能够在不同的浏览器上坚持共同的款式风格。您能够运用CSS reset 库Normalize等,也能够运用一个更简化的复位办法:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E* {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: border-box;u003Cu002Fpreu003Eu003Cpreu003E margin: 0; padding: 0;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E现在元素的 margin 和 padding 已为0,box-sizing能够管理您的CSS盒模型布局。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意:假如你遵从接下来承继 box-sizing讲解的这个技巧, 你不需求在以上代码中增加box-sizing 特点。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E02、承继box-sizingu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E从 html 元素承继 box-sizing :u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ehtml {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: border-box;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E*, *:before, *:after {u003Cu002Fpreu003Eu003Cpreu003Ebox-sizing: inherit;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E如此在插件或其它组件里改动 box-sizing 变得简略。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E03、运用 :not() 挑选器来决定表单是否显现边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E先为元素增加边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 增加边框 *u002Fu003Cu002Fpreu003Eu003Cpreu003E.nav li {u003Cu002Fpreu003Eu003Cpreu003E border-right: 1px solid #666;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E为最终一个元素去除边框u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 去掉边框 *u002Fu003Cu002Fpreu003Eu003Cpreu003E.nav li:last-child {u003Cu002Fpreu003Eu003Cpreu003E border-right: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不过不要这么做,运用 :not() 伪类来到达相同的作用:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.nav li:not(:last-child)u003Cu002Fpreu003Eu003Cpreu003E{u003Cu002Fpreu003Eu003Cpreu003Eborder-right: 1px solid #666;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E当然,你也能够运用 .nav li + li 或许 .nav li:first-child ~ li ,可是 :not()更加明晰,具有可读性。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E04、为 body 元素增加行高u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不用为每一个 u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E,<h*> 元素逐个增加 line-height,直接增加到 body 元素:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ebody {u003Cu002Fpreu003Eu003Cpreu003E line-height: 1.5;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E文本元素能够很简单地承继 body 的款式。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E05、笔直居中任何元素u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E不!这绝不是黑魔法,真的能够笔直居中任何元素:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ehtml, body {u003Cu002Fpreu003Eu003Cpreu003E height: 100%; margin: 0;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E body {u003Cu002Fpreu003Eu003Cpreu003E -webkit-align-items: center;u003Cu002Fpreu003Eu003Cpreu003E -ms-flex-align: center;u003Cu002Fpreu003Eu003Cpreu003E align-items: center;u003Cu002Fpreu003Eu003Cpreu003E display: -webkit-flex;u003Cu002Fpreu003Eu003Cpreu003E display: flex;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这还不够?笔直方向,水平方向?任何元素,任何时刻,任何地址?CSS-Tricks 有篇好文 讲到了各种居中的技巧。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意: IE11 对 flexbox 的支撑有点 bug。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E06、逗号分隔列表u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E使列表的每项都由逗号分隔:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eul > li:not(:last-child)::after {u003Cu002Fpreu003Eu003Cpreu003E content: “,”;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E因最终一项不加逗号,能够运用 :not() 伪类。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意:这一技巧对于无障碍,特别是屏幕阅读器而言并不抱负。并且复制粘贴并不会带走CSS生成的内容,需求留意。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E07、运用负的 nth-child 来挑选元素u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E运用负的 nth-child 能够挑选 1 至 n 个元素。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eli {u003Cu002Fpreu003Eu003Cpreu003Edisplay: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Eu002F* 挑选第 1 至第 3 个元素并显现出来 *u002Fu003Cu002Fpreu003Eu003Cpreu003Eli:nth-child(-n+3) {u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E或许你已经把握了怎么运用 :not()这个技巧,试下这个:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002F* 挑选第 1 至第 3 个元素并显现出来 *u002Fu003Cu002Fpreu003Eu003Cpreu003Eli:not(:nth-child(-n+3)) {u003Cu002Fpreu003Eu003Cpreu003E display: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E如此简略!u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E08、运用 SVG 图标u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E没有理由不运用 SVG 图标:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.logo {u003Cu002Fpreu003Eu003Cpreu003E background: url(“logo.svg”);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003ESVG 在一切分辨率下都能够杰出缩放,并且支撑一切 IE9 今后的浏览器,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E留意: 针对仅有图标的按钮,假如 SVG 没有加载成功的话,以下款式对无障碍有所帮助:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.no-svg .icon-only:after {u003Cu002Fpreu003Eu003Cpreu003E content: attr(aria-label);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpu003E09、运用 “形似猫头鹰” 的挑选器u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这个姓名可能比较生疏,不过通用挑选器 (*) 和 相邻兄弟挑选器 (+) 一同运用,作用特殊:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E* + * {u003Cu002Fpreu003Eu003Cpreu003Emargin-top: 1.5em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在此示例中,文档流中的一切的相邻兄弟元素将都将设置 margin-top: 1.5em 的款式。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E更多 “形似猫头鹰” 的挑选器,可参阅 A List Apart 上面 Heydon Pickering 的文章。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E10、运用 max-height 来树立纯 CSS 的滑块u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Emax-height 与 overflow hidden 一同来树立纯 CSS 的滑块:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.slider {u003Cu002Fpreu003Eu003Cpreu003E max-height: 200px;u003Cu002Fpreu003Eu003Cpreu003E overflow-y: hidden;u003Cu002Fpreu003Eu003Cpreu003E width: 300px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .slider:hover {u003Cu002Fpreu003Eu003Cpreu003E max-height: 600px;u003Cu002Fpreu003Eu003Cpreu003E overflow-y: scroll;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E鼠标移入滑块元素时增大它的 max-height 值,便能够显现溢出部分。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E11、发明格子等宽的表格u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Etable-layout: fixed 能够让每个格子坚持等宽:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.calendar {u003Cu002Fpreu003Eu003Cpreu003E table-layout: fixed;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E无痛的 table 布局。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E12、运用 Flexbox 去除剩余的外边距u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E与其运用 nth-, first-, 和 last-child 去除列之间剩余的空隙,不如运用 flexbox 的space-between 特点:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.list {u003Cu002Fpreu003Eu003Cpreu003Edisplay: flex;u003Cu002Fpreu003Eu003Cpreu003E justify-content: space-between;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .list .person { flex-basis: 23%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E列之间的空隙总是均匀持平。u003Cu002Fpu003Eu003Ch1u003E运用特点挑选器来挑选空链接u003Cu002Fh1u003Eu003Cp class=”normal_(Web)”u003E当 元素没有文本内容,但有 href 特点的时分,显现它的 href 特点:u003Cu002Fpu003Eu003Cpreu003Ea[href^=”http”]u003Cu002Fpreu003Eu003Cpreu003E:empty::before {u003Cu002Fpreu003Eu003Cpreu003E content: attr(href);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E适当简洁。u003Cu002Fpu003Eu003Cpu003E13、给 “默许” 链接界说款式u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E给 “默许” 链接界说款式:u003Cu002Fpu003Eu003Cpreu003Ea[href]:not([class])u003Cu002Fpreu003Eu003Cpreu003E{u003Cu002Fpreu003Eu003Cpreu003E color: #008000;u003Cu002Fpreu003Eu003Cpreu003E text-decoration: underline;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E经过 CMS 体系刺进的链接,通常没有 class 特点,以上款式能够鉴别它们,并且不会影响其它款式。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E14、共同笔直节奏u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E通用挑选器 (*) 跟元素一同运用,能够坚持共同的笔直节奏:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.intro > * {u003Cu002Fpreu003Eu003Cpreu003Emargin-bottom: 1.25rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E共同的笔直节奏能够供给视觉美感,增强内容的可读性。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E15、固定份额盒子u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E要创立具有固定份额的一个盒子,一切你需求做的就是给 div 设置一个 padding:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E.container {u003Cu002Fpreu003Eu003Cpreu003E height: 0;u003Cu002Fpreu003Eu003Cpreu003E padding-bottom: 20%;u003Cu002Fpreu003Eu003Cpreu003E position: relative;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003E .container div {u003Cu002Fpreu003Eu003Cpreu003E border: 2px dashed #ddd;u003Cu002Fpreu003Eu003Cpreu003E height: 100%;u003Cu002Fpreu003Eu003Cpreu003E left: 0;u003Cu002Fpreu003Eu003Cpreu003E position: absolute;u003Cu002Fpreu003Eu003Cpreu003E top: 0;u003Cu002Fpreu003Eu003Cpreu003E width: 100%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E运用20%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关,子元素的div将坚持其宽高比(100%u002F 20%= 5:1)。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E16、为破碎图象界说款式u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E只要一点CSS就能够美化破碎的图象:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eimg {u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003Efont-family: Helvetica, Arial, sans-serif;u003Cu002Fpreu003Eu003Cpreu003Efont-weight: 300;u003Cu002Fpreu003Eu003Cpreu003Eheight: auto;u003Cu002Fpreu003Eu003Cpreu003E line-height: 2;u003Cu002Fpreu003Eu003Cpreu003E position: relative;u003Cu002Fpreu003Eu003Cpreu003E text-align: center;u003Cu002Fpreu003Eu003Cpreu003E width: 100%;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E以增加伪元素的规律来显现用户信息和URL的引用:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eimg:before {u003Cu002Fpreu003Eu003Cpreu003E content:u003Cu002Fpreu003Eu003Cpreu003E”We’re sorry, the image below is broken :u003Cu002Fpreu003Eu003Cpreu003E(“;u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003Emargin-bottom: 10px;u003Cu002Fpreu003Eu003Cpreu003E}img:after {u003Cu002Fpreu003Eu003Cpreu003E content: “(url: ” attr(src) “)”;u003Cu002Fpreu003Eu003Cpreu003Edisplay: block;u003Cu002Fpreu003Eu003Cpreu003E font-size: 12px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E了解更多关于这类款式的技巧 Ire Aderinokun的 原帖.u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E17、用 rem 来调整大局巨细;用 em 来调整部分巨细u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在根元素设置根本字体巨细后 (html { font-size: 100%; }), 运用 em 设置文本元素的字体巨细:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eh2 {u003Cu002Fpreu003Eu003Cpreu003E font-size: 2em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Ep { font-size: 1em;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E然后设置模块的字体巨细为 rem:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Earticle {u003Cu002Fpreu003Eu003Cpreu003Efont-size: 1.25rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cpreu003Easide .module { font-size: .9rem;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003E现在,每个模块变得独立,更简单、灵活的款式便于维护。u003Cu002Fpu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E18、躲藏没有静音、自动播放的影片u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E这是一个自界说用户款式表的不错的技巧。防止在加载页面时自动播放。假如没有静音,则不显现视频:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Evideo[autoplay]u003Cu002Fpreu003Eu003Cpreu003E:not([muted]) {u003Cu002Fpreu003Eu003Cpreu003Edisplay: none;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E再次,咱们运用了 :not() 的长处。u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cpu003E19、运用挑选器:root来操控字体弹性u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E在呼应式布局中,字体巨细应需求依据不同的视口进行调整。你能够核算字体巨细依据视口高度的字体巨细和宽度,这时需求用到:root:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003E:root {u003Cu002Fpreu003Eu003Cpreu003Efont-sizeu003Cu002Fpreu003Eu003Cpreu003E: calc(1vw + 1vh + .5vmin);u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E现在,您能够运用 root emu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Ebody {u003Cu002Fpreu003Eu003Cpreu003E font: 1remu002F1.6 sans-serif;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Ch1u003Eu003Cu002Fh1u003Eu003Cpu003E20、为更好的移动体会,为表单元素设置字体巨细u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003E当触发的下拉列表时,为了防止表单元素在移动浏览器(ios Safari 等等)上的缩放,加上font-size:u003Cu002Fpu003Eu003Cp class=”normal_(Web)”u003Eu003Cu002Fpu003Eu003Cpreu003Eu002Fu002Fcode fromu003Cu002Fpreu003Eu003Cpreu003Ehttp:u002Fu002Fcaibaojian.comu002Fcss-protipsu003Cu002Fpreu003Eu003Cpreu003E.htmlinput[type=”text”],u003Cu002Fpreu003Eu003Cpreu003Einput[type=”number”],u003Cu002Fpreu003Eu003Cpreu003Eselect,textarea {u003Cu002Fpreu003Eu003Cpreu003E font-size: 16px;u003Cu002Fpreu003Eu003Cpreu003E}u003Cu002Fpreu003Eu003Ch1u003E支撑状况u003Cu002Fh1u003Eu003Cp class=”normal_(Web)”u003E这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F1520771743010a413efbb16″ img_width=”1280″ img_height=”853″ alt=”世界顶尖程序员所用的21个css技巧” inline=”0″u003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:世界顶尖程序员所用的21个css技巧

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11376.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code