Vanessa

2019-07-14 描述使用 grid 垂直和水平居中一个父元素中的子元素。HTML<divclass="grid-centering"><divclass="child">Centeredcontent.</div></div>CSS.grid-centering{background:aliceblue;display:grid;justify-content:center;align-items:

2019-07-13 描述将一个元素垂直居中于另一个元素中。HTML<divclass="ghost-trick"><divclass="ghosting"><p>Verticallycenteredwithoutchangingthepositionproperty.</p></div></div>CSS.ghosting{height:160px;background:#0ff;}.ghostin

2019-07-12 描述使用 flexbox 垂直和水平居中一个父元素中的子元素。HTML<divclass="flexbox-centering"><divclass="child">Centeredcontent.</div></div>CSS.flexbox-centering{display:flex;justify-content:center;align-items:center;heigh

2019-07-11 描述对父元素中的子元素进行平均分配。HTML<divclass="evenly-distributed-children"><p>Item1</p><p>Item2</p><p>Item3</p></div>CSS.evenly-distributed-children{display:flex;justify-content:space-between;}DemoSeetheP

2019-07-10 描述使用 display:table 在父元素中水平且垂直居中一个子元素（flexbox 的一个替代方案）。HTML<divclass="container"><divclass="center"><span>Centeredcontent</span></div></div>CSS.container{border:1pxsolid#333;height:250px;width:25

2019-07-09 描述一个元素的宽度是变化的，在自适应中我们需要保证他的高度和宽度一致（例如：他的宽高比率为一个常数）。HTML<divclass="constant-width-to-height-ratio"></div>CSS.constant-width-to-height-ratio{background:#333;width:50%;}.constant-width-to-height

2019-07-08 描述确保一个元素能够对他的子元素进行浮动的自我清除。注意：如果你还在使用浮动来构建你的布局，这是唯一有用的。请考虑使用现在流行的 flex 盒子布局或栏栅布局。HTML<divclass="clearfix"><divclass="floated">floata</div><divclass="floated">floatb</div><divclass="floated">floa

2019-07-07 描述重置盒子模型，使 width 和 height 不会被他们的 border 或 padding 所影响。HTML<divclass="box">border-box</div><divclass="boxcontent-box">content-box</div>CSShtml{box-sizing:border-box;}*,*::before,*::after{box-sizing:in

2019-07-06 描述创建一个弹跳的加载动画。HTML<divclass="bouncing-loader"><div></div><div></div><div></div></div>CSS@keyframesbouncing-loader{to{opacity:0.1;transform:translate3d(0,-1rem,0);}}.bouncing-loader{display:fl

精选常见交互，帮助您拥有简洁酷炫的站点布局清除浮动重置 box-sizing 宽高保持一致 table 居中显示平均分配子元素盒子模型居中垂直小技巧网格居中最后一个元素占满剩余可用高度使用 transform 进行居中多行文本截断文本截断视觉圆自定义滚动条自定义文本选中样式渐变阴影文本风化效果图片适配全屏文本渐变细而明显的边框:not 选择器逃离屏幕对溢出的内容进行渐变漂亮的下划线重置所有样式带形状的分割线系统字

2019-01-03 回答浏览器通过优先级权重来判断 CSS 属性值与元素之间的关系：权重越高关系越密切，高权重的 CSS 属性值就会赋予到元素上。我们可以把 CSS 分为四类，每类的矩阵权重从高到底排列如下：内联样式（如：style="font-weight:bold"）：[1,0,0,0]ID 选择器（如：#comments）：[0,1,0,0]类选择器（如：.footer)，属性选择器（如：[src$=".p

2019-01-02 回答毗邻兄弟选择器 + 可以选择紧随元素后的所有同级元素。如：div~p 可以选择紧随 div 元素后且与其同级的 p 元素。一般兄弟选择器~可选择元素后的所有同级元素。如：p~span 将会匹配同一父元素下，p 元素后的所有 span 元素。加分回答基本元素选择器*：通用元素选择器，匹配任何元素.footer：匹配 class="footer"的所有元素#comments：匹配 id="comments

2019-01-01 回答 CSSsprites 将多张图片合并为一张图片，从而减少浏览器对 HTTP 的请求数量，进而减少网页的加载时间。即使在 HTTP/2 协议下，这依旧可以减少网页的加载时间。在 HTTP/1.1 中，每个 TCP 连接只允许一个请求。现代浏览器虽然可以打开多个（2-8）并行的 TCP 连接，但连接数量依旧有限。HTTP/2 允许浏览器和服务器之间的多个请求在一个 TCP 连接上进行复用。这意味着 TCP 连接

2018-12-31 回答 em 和 rem 都是基于 font-size 的 CSS 属性。唯一的区别是他们继承的对象不同。em 继承父元素中的 font-sizerem 继承根元素（html）中的 font-size 在大多数浏览器中，根元素的 font-size 默认值为 16px 加分回答其他单位 vh 和 vw：窗口高度或宽度的 1/100。可脱离父元素的继承规则，如：窗口高 900px，父元素高 1200px，1vh 为 9px。vmin

2018-12-30 回答像按钮或锚点标记等元素被选中时，该元素的外围就会出现轮廓。不同浏览器会呈现不同的效果，但一般是在元素周围显示蓝色的轮廓来表示他已经被选中。过去，很多人使用 outline:0 来移除元素被选中的效果。但是，这会让键盘侠们感到很不友好，因为选中效果被移除了。但是如果不移除的话，元素外围的蓝色轮廓有时候会让大多数人感觉不够舒适美观。Bootstrap 等 UI 框架一般采用更加美观的 box

2018-12-29 回答 CSS 盒子模型（BoxModel）布局包含内容（content）、内边距（padding）、边框（border）、外边距（margin）四个部分。content：盒子内部填充元素内容（例如文本、图像或视频播放器等）的区域。他的大小为 content-box 的宽和高。相关 CSS 属性为 width，min-width，max-width，height，min-height，max-h

2018-12-28 回答@media 是可根据一个或多个基于媒体特征、媒体类型等条件来使用样式的规则。其包含以下四种媒体类型：all：适用于所有设备，默认选项 print：仅适用于打印设备 screen：仅适用于台式机、平板电脑、手机等屏幕 speech：仅适用于屏幕阅读器加分回答其余的媒体类型：tty，tv，projection，handheld，braille，embossed，aural 在 MediaQ

2018-12-27 回答设置父容器为 display:flex，然后使用 flex 为每列提供与其比值相对应的 flex-grow 值。<stylelang="scss">.row{display:flex;&__col{...&--2{flex:2}&--7{flex:7}&--3{flex:3}}}</style><divclass="row"><divclass="row__colrow__col--2

2018-12-26 回答 CSS 预处理器添加了一些实用的原生 CSS 没有的的功能，并且他通过使用 DRY（Don'tRepeatYourself）原则使生成的 CSS 更加整洁和易于维护。他通过简洁的嵌套选择器语法减少了大量重复代码。变量、颜色函数（lighten,darken,transparentize 等）等附属工具，mixins 及循环使得 CSS 更像一个真正的编程语言，这使开发者编写复杂的 CSS 更加容易了

2018-12-25 回答 BEM（Block,Element,Modifier）是一种基于组件的对 CSS 类名进行约定的 Web 开发方法。他通过定义命名空间来解决权重问题，从而使 CSS 更易于维护。BEM 使用 Block、Element、Modifier 来解释其结构。Block 是一个可跨项目重用的独立组件，且是子组件（Element）的“命名空间”。Modifier 可标示 Block 或 Element 处于某种状态