小秀的博客

在使用布局时，元素之间存在一个空格的间距，这是由于 HTML 中的空白字符（空格、换行、制表符等）会被当作渲染内容的一部分。

因此，当你使用百分比值时，子元素会继承计算后的行高值；而当你使用数值时，子元素会继承这个数值，并根据自己的字体大小重新计算行高。）时，行高是相对于该元素的字体大小计算的，但是这个数值会被继承。例如，如果父元素的字体大小为。）时，行高是相对于该元素的字体大小计算的。例如，如果元素的字体大小为。当你使用百分比值（如。但是，如果子元素的字体大小为。），而不是继承父元素的。

建议使用requestAnimationFrame，如果用js修改元素的位置，推荐使用这个API。定时器时间不准确，requestAnimationFrame 始终在当前帧的最后执行。这些函数会创建一个新的图层，浏览器会使用。利用css3 translate进行元素移动。来渲染这个图层，从而提高性能。例如，你可以使用以下代码来开启。最核心要开启gpu加速。

z-index 只对 position 属性为 relative、absolute 或 fixed 的元素有效。我的项目中就是由于第三点，opacity 影响了 z-index ，导致 z-index 不生效。z-index 的效果可能受到 CSS 特性的影响，例如 transform、opacity 等。如果页面中有其他元素也设置了较高的 z-index，可能会覆盖你的 .app 元素。确保没有其他 CSS 特性干扰 z-index 的效果。

一般来说，每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。所以我再项目中一般会安装 normalize.css。

方法占位影响事件响应渲染影响动画支持适用场景不占空间无法响应不渲染不支持完全移除元素，不影响布局占空间无法响应仍然渲染支持隐藏元素但保留布局opacity: 0占空间仍可响应仍然渲染支持元素透明但保持可交互height: 0width: 0占空间但尺寸为 0仍可响应仍然渲染支持实现折叠效果占空间但尺寸缩小到 0仍可响应仍然渲染支持实现缩放动画不占空间无法响应仍然渲染不支持将元素移出视口clip-path占空间视裁剪情况仍然渲染支持。

flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。

特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。

容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。

上⾯的代码中，利⽤vw单位设置了正⽅形的宽度为屏幕宽度的 1/4（25%），同时利⽤ padding-top 设置正⽅形的⾼度也为屏幕宽度的 1/4，这样就实现了⼀个宽⾼⾃适应的正⽅形。上⾯的代码中，通过设置 div 元素的宽度为 50% ，再利⽤ ::before 伪元素设置 padding-top 为 100% ，就可以实现⼀个宽⾼⾃适应的正⽅形。/* 利⽤padding实现⾃适应⾼度 *//* 利⽤vw单位实现⾃适应宽度 */

display: none;：完全隐藏元素，元素不占据任何空间。visibility: hidden;：隐藏元素，但元素在⻚⾯中仍占据空间。opacity: 0;：将元素的透明度设为 0，元素隐藏但仍占据空间。position: absolute; left: -9999px;：将元素移出屏幕范围之外，元素隐藏但仍占据空间。z-index: -1;：将元素的层级设置为负数，元素隐藏但仍占据空间。盒属性归 0：将⼀个元素的 margin、border、padding、width 和 height

首先，你需要使用@keyframes规则定义动画的步骤。这包括动画的开始（0%）和结束（100%），以及任何中间步骤。

1 个 CSS 像素并不⼀定等于 1 个物理/设备像素 dp，物理像素就是真正构成设备显示屏的⼀个个像素点。早期，1 个 px 等于 1 个 dp，但⾼清 2 倍屏、3 倍屏的出现，导致⼿机屏幕的尺⼨没有变化，屏幕的分辨率却提⾼了⼀倍或⼏倍，即同样⼤⼩的屏幕上，像素多了⼀倍。⽐如，当设置某个元素的属性为 1px 时，我们期望的是该属性在屏幕上占据 1 个物理像素，这在普通屏幕上当然是满⾜的，但在 2 倍屏上，1 个 CSS 像素对应的却是 4 个物理像素点，这也就导致了移动端中的 1px 边框会偏粗。

通过 CSS 变量（自定义属性）来管理重复的值，减少代码量。：预加载关键的 CSS 文件，加快页面渲染速度。：避免在所有设备上加载不必要的样式。

CSS Grid Layout 是一种二维布局系统，允许你在水平和垂直方向上创建复杂的布局。Flexbox 提供了一种更加高效的方式来布局、对齐和分配容器内项目的空间。CSS3 动画允许你创建复杂的动画效果，而无需使用 JavaScript。CSS3 增强了媒体查询的能力，允许你根据多种设备特性来应用样式。CSS3 过渡效果允许你平滑地在两个属性值之间进行动画过渡。CSS3 引入了更多的选择器，如属性选择器、伪类选择器等。：允许你根据元素的属性或属性值来选择元素。属性允许在元素上添加阴影效果。

响应式设计是指通过⼀些技术⼿段，使得⽹站或应⽤在不同终端设备（如桌⾯电脑、平板电脑、⼿机等）上能够⾃适应地呈现最佳的⽤户体验。⼀种实现⽅式是使⽤等技术，以便根据设备屏幕的宽度和⾼度等信息⾃适应地调整⻚⾯的布局和元素的⼤⼩。另⼀种实现⽅式是使⽤，根据设备的屏幕尺⼨和分辨率等信息，加载不同的样式⽂件或应⽤不同的样式规则，以便实现不同场景下的最佳效果。

字体系列属性主要包括： font-size、font-family、font-variant、font-style、font-weight、font、letter-spacing、word-spacing、text-transform 和 line-height。每⼀个属性可以指定值为“inherit”，即：对于给定的元素，该属性和它⽗元素相对属性的计算值取⼀样的值。继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补⽩）和背景等。

CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

造成这个问题的原因是由于⾼分辨率屏幕的像素密度⽐传统的屏幕要⾼，所以在屏幕上显示的⼀个 CSS 像素对应的物理像素个数也会相应地增多，当使⽤ CSS 中的 1px 来设置边框或者细线时，实际上渲染出来的线条在屏幕上会被拆分为多个物理像素，从⽽导致看上去更粗。CSS 中的 1 像素问题指的是在⾼分辨率屏幕上显示的 1 像素边框或者细线在实际显示时会⽐ 1 个物理像素更宽或更粗，从⽽导致边框或者细线看上去⽐预期的更粗或者更宽。背景图 background-image。按照比例呈现 1px。

⽤ CSS 和 JS 来实现动画各有其优缺点，具体如下：

媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。

然而，需要注意的是，calc() 函数在某些旧版本的浏览中可能不被完全支持，特别是在 IE 11 及以下版本。CSS 中的 calc() 函数是用于动态计算数值的函数。它可以在 属性的值中执行基本的数学运算，包括加法、减法、乘法和除法，以及使用 CSS 单位进行计算。// 计算出宽度为容器宽度减去40像素的三分之一。// 计算出内边距为10像素加上父元素宽度的5%width: calc(100% - 20px);

这样，当浏览器解析 CSS 文件时，会先加载和应用导入的样式表，然后再继续解析和应用后续的 CSS 规则。它可以将一个 CSS 文件中的样式引入到另一个 CSS 文件中，使得样式可以在多个文件中共享和重用。另外，@import 还支持一些选项和参数，例如媒体查询（media query），可以根据不同的设备或屏幕尺寸导入不同的样式表。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import。后面的JS文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

【代码】电商网站基础布局——以小兔鲜为例。

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。外边距折叠(collapsing margins)

【代码】【CSS】渐变下划线。

【代码】【CSS】div 盒子居中的常用方法。

每⼀个属性可以指定值为“inherit”，即：对于给定的元素，该属性和它⽗元素相对属性的计算值取⼀样的值。继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补⽩）和背景等。并不是所有的 HTML 元素都可以继承这些属性，具体需要查看相关属性的⽂档。但是，浏览器的缺省样式也在影响着继承的结果。这是因为浏览器的缺省样式设定了。

一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（initial containing block）。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。元素的尺寸和位置，会受它的包含块所影响。

我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式。如果没有修改某样式，大概率可能使用默认值。

不显示的原因：原因就是你已经打开你的网页，点击你的链接（打开过一次了），之后就是再怎么刷新，甚至关掉软件都是行不通的，只有修改一下链接地址才可以。的顺序去写，否则因为优先级问题会出错。

padding-top （当然 padding-bottom 也可以）撑开盒子，使正⽅形的⾼度也为屏幕宽度的 1/4。由于容器与伪元素在垂直⽅向发⽣了外边距折叠，所以我们想象中的撑开⽗元素⾼度并没有出现。注：vmin 是相对当前视⼝宽⾼中较小的⼀个的百分⽐单位，同理 vmax 是相对当前视⼝宽⾼中较大的⼀个的百分⽐单位。当元素内部添加内容时⾼度出现溢出，可以将内容放到独⽴的内容块中，利⽤绝对定位消除空间占⽤。vw单位设置了正⽅形的宽度为屏幕宽度的 1/4（25%），同时利⽤。

如果多个规则具有相同的优先级，那么根据出现在样式表中的顺序来决定哪个规则应用。CSS选择器的优先级是由多个因素组合而成的，用于确定在多个样式规则应用到同一元素时哪个规则会生效。区别伪类和伪元素：伪类不产⽣新对象，伪元素会产⽣新对象，它们都不存在dom树中，伪类只是该选择器的元素的不同状态。组合选择器的优先级由组成部分的选择器的优先级决定。：选择元素的特定部分，例如元素的第一个字母或最后一个子元素。：选择处于特定状态的元素，如链接的不同状态。：通过元素的唯一ID选择元素。优先级：(1, 0, 0, 0)

通过设置元素的 margin、padding、border 等属性，控制元素在⻚⾯中的位置和⼤⼩。这是最基本的布局⽅式，它使元素在⻚⾯上垂直堆叠。这种布局适⽤于单个⻚⾯元素或简单的⻚⾯结构。 实现响应式布局方法二：底部 3. 流式布局通过设置元素的 display 属性为 flex 或 inline-flex，控制元素在⻚⾯中的位置和⼤⼩，从⽽实现响应式布局。元素按照⽂档流⾃上⽽下排列，宽度⾃适应⽗容器或内容。通过设置元素的 position 属性为 relative、absolut

网格（Grid）是一种基于列数的布局系统，它可以帮助开发者创建具有水平和垂直分隔的页面布局。在CSS中，Grid是一种非常强大的布局工具，可以轻松地创建复杂的布局结构。（用于将元素分配到网格的特定区域）等。使用这些属性，可以更精细地控制网格布局的各个方面。除了以上这些主要属性外，Grid还提供了许多其他属性，如。（用于创建网格线）、

针对BFC网上有特别多的说法，但是都没有解释的很清楚，所以我是专门查过W3C文档的。在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC(格式化上下文)，块级盒子属于BFC(块级格式化上下文)，行内级盒子属于 IFC(行内格式化上下文)。BFC就是用来决定块级盒子是如何排布的。在BFC中，块级盒子是一个挨着一个在垂直方向排布的，垂直方向的间距由 margin 属性决定，并且在同一个BFC中，两个相邻的 box 之间 margin会折叠，每个元素的左边缘是紧挨着包含块的左边缘的。

【代码】【CSS】全局滚动条样式设置。

* webkit 内核服务器特有的属性 *//* 3 是需要开始省略（...）的行号 *//* 排列方式：vertical *//* 实现方式： *//* 实现方式： */

安装提供了四种方式。因为我常用构建工具搭建项目，所以选择 Using PostCSS。