学习前端方向也有一段时间了，起初做过一些项目，总是发现做完之后自己的边框会变得比较粗，后面翻阅了部分资料慢慢的才了解了这个问题，大致列举了几种解决的办法。 在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的…

有效且结构良好的文档是添加样式的基础。上一章，我们一起学习了相关的知识。现在是时候学习一下如何添加样式了。 本章笔者在读完之后，根据原文的解构做了一些调整，主要包括选择器及其详解、层叠与特异性及继承、以及如何应用样式，最后延伸了一下性能的知识。希望你看完之后能够有收获。 首先，…

是时候继续我的云陪读计划了 😂。 今天我们要阅读的章节是《精通 CSS》的第五章 漂亮的盒子。 前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。 本文将从这三个方面来介绍如…

😂 尴尬的是本文也并不是陪读系列文章，而是歪马在进行第五章《漂亮的盒子》时，有感而发。 读到书中介绍border-radius的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角border-image。虽然这一…

提起，z-index 大家脑海里可能会立刻浮现这样的知识点：“z-index 的值大小控制元素在 Z 轴上显示的层级，z-index 越大显示的层级越高（也就是在最上层，离观察者越近），没有指定的按照出现顺序堆叠，此外 z-index 不能跨父元素比较。 HTML 中有如下两个…

CSS 中有两个很常见的概念，伪类和伪元素。 伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。 伪元素会创建一个抽象的伪元素，这个元素不是 DOM 中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。 最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通…

第 3 章仍是本书的基础章节。本章将会给大家介绍盒模型相关的概念、几种常见的可见格式化模型（包括定位、浮动、格式化上下文）以及新型布局模块，其中较新的布局方式将在后续章节详细介绍。 盒模型是 CSS 的核心概念，描述了元素如何显示以及(在一定程度上)如何相互作用、相互影响。 页…

或许大家会觉得排版都是设计师的工作，前端开发按照已经排版好的设计稿复原就行。当然，这样理解也没有太大问题，但是过于依赖于设计师往往会限制我们的脚步。作为前端开发，对于排版我们要有自己的认知，而且更好地理解 CSS 中关于网页排版的技术，我们也能更得心应手地还原设计稿。 本章原书…

我们都知道对于网站来说，性能至关重要，CSS 作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此…