Tag:css
All the articles with the tag "css".
html 元素节点上， 有多个 class 名称，这几个class 名称对应的样式渲染优先级是如何的？
Posted on:2024年9月10日 at 10:56在 HTML 元素上，多个 class 名称的样式渲染优先级（或称为特指度）是由 CSS 的特指度计算规则决定的。具体来说，CSS 选择器的优先级是由以下几个部分组成的： 特指度计算规则 ID 选择器（如 #header）：特指度最高。 类选择器（如 .menu）、属性选择器（如 [type="text"]）和伪类选择器（如 :hover）：特指度次之。 元素选择器（如 div）和伪元素选择器（如
全局样式命名冲突和样式覆盖问题怎么解决？
Posted on:2024年9月9日 at 14:50在前端开发过程中，有几种常见的方法可以解决全局样式命名冲突和样式覆盖问题： 使用命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不会冲突。例如，在一个项目中，可以为每个组件的样式类名都添加一个唯一的前缀，例如.componentA-button和.componentB-button，这样可以避免命名冲突。 使用BEM命名规范：BEM（块、元素、修饰符）是一
css module 是什么？
Posted on:2024年9月9日 at 14:49CSS Modules 是一种用于组织和管理 CSS 的技术。它通过在编译时为每个 CSS 类名生成唯一的标识符，并将它们作为 JavaScript 对象的属性导出。这样，可以确保每个类名在整个应用程序中的唯一性，避免样式冲突。 使用 CSS Modules，可以将 CSS 文件与组件文件绑定在一起，这样每个组件都有自己的 CSS 作用域，样式只会应用于特定的组件，不会影响其他组件。这种隔离性和局
如何避免全局样式污染？
Posted on:2024年8月22日 at 01:06避免全局样式污染是确保 CSS 样式可维护、可复用且不会意外影响其他部分的关键。以下是一些常见的方法和最佳实践： 1. 使用 CSS 模块 CSS Modules：每个 CSS 文件只对其作用的组件生效，样式局部化，避免全局污染。例如，在使用 CSS Modules 的项目中，样式只会影响导入了该模块的组件。 2. 使用命名空间 命名空间：为类名添加前缀，或使用更具描述性的命名空间，避免类名冲突。
PostCSS 是什么，有什么作用？
Posted on:2024年8月21日 at 01:20PostCSS 是一个基于 Node.js 的工具，用于处理 CSS 文件。它本质上是一个 CSS 解析器和转换器，通过插件机制，可以在构建过程中对 CSS 进行各种优化和扩展。 主要作用和功能 CSS 预处理： PostCSS 可以用作 CSS 预处理器，支持嵌套规则、变量、混合等功能，类似于 Sass 或 LESS。通过插件，如 postcss-nested（支持嵌套）和 postcss-si
CSS 伪类和伪元素有哪些，它们的区别和实际应用
Posted on:2024年8月15日 at 23:21CSS 伪类和伪元素用于选择和样式化 DOM 元素的特定状态或部分。它们有不同的作用和用法。以下是它们的区别、常见类型及实际应用： CSS 伪类 伪类用于选择元素的特定状态或特性。例如： :hover - 选择当鼠标悬停在元素上时的状态。 a:hover { color: red; } :focus - 选择当元素获得焦点时的状态，通常用于输入框。 input:focus { border-col
说下 css 中的 BFC、IFC、GFC 和 FFC 分别指什么？
Posted on:2024年8月15日 at 13:57在 CSS 中，BFC（Block Formatting Context）、IFC（Inline Formatting Context）、GFC（Grid Formatting Context）和 FFC（Flex Formatting Context）是几种格式化上下文，它们定义了元素如何在布局中被格式化和渲染。 1. Block Formatting Context (BFC) 定义：BFC
CSS 中的文档流是什么？
Posted on:2024年8月14日 at 22:49CSS 中的文档流（Document Flow），也称为标准流，是指浏览器如何按照 HTML 元素的结构和 CSS 样式规则来布局和呈现网页内容的过程。文档流决定了元素在页面上的位置和排列方式。文档流的主要特点和组成部分包括： 1. 主要布局模式 正常流（Normal Flow）：元素按照在 HTML 中的顺序逐个显示。块级元素（如 <div>, <p>）在页面上垂直堆叠，行内元素（如 <span
css 中三栏布局的实现方案有哪些？
Posted on:2024年8月14日 at 20:09在 CSS 中实现三栏布局有多种方法，常见的包括使用 Flexbox、Grid、以及传统的浮动布局。每种方法都有其优缺点和适用场景。以下是三栏布局的常见实现方案： 1. Flexbox 布局 Flexbox 提供了一种简洁且灵活的方式来实现三栏布局，特别适合用于响应式设计。 示例代码 <div class="container"> <div class="sidebar-left">左侧</div
CSS 尺寸单位有哪些？
Posted on:2024年8月14日 at 20:06CSS 提供了多种尺寸单位，用于设置元素的大小、位置和其他样式属性。主要的尺寸单位包括： 1. 绝对单位 px（像素）：固定的单位，适用于设备屏幕上的精确像素。 width: 100px; cm（厘米）：用于印刷样式，1厘米等于约37.8像素。 margin: 2cm; mm（毫米）：用于印刷样式，1毫米等于约3.78像素。 padding: 10mm; in（英寸）：用于印刷样式，1英寸等于96
浏览器如何解析css选择器？
Posted on:2024年8月14日 at 14:27浏览器会『从右往左』解析CSS选择器。 CSS选择器的解析顺序 相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成： #div P.class { color: red; } 而是写成： .class { color: red; } 之所以需要这么写，给的解释是这样可以减少选择器匹配的次数。 初看觉得哦，有点道理啊，但是往细了再想想： 如果我把层级定的足够的
未知高度和宽度元素的水平垂直居中的方案有哪些， 简单手写一下？
Posted on:2024年8月14日 at 14:12要在未知高度和宽度的元素中实现水平和垂直居中，可以使用多种 CSS 技巧。以下是几种常见的方案以及它们的简单手写实现： 1. Flexbox HTML： <div class="container"> <div class="centered-element">Centered</div> </div> CSS： .container { display: flex; justify-conten
什么是BFC？
Posted on:2024年8月10日 at 21:34BFC：block formatting context，块级格式化上下文。 BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 定位方案： 内部的Box会在垂直方向上一个接一个放置。 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块bord
CSS中的1像素问题是什么？有哪些解决方案？
Posted on:2024年8月10日 at 21:321px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。 像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为
怎么理解回流跟重绘？什么场景下会触发？
Posted on:2024年8月10日 at 19:48一、是什么 在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
Posted on:2024年8月10日 at 19:48一、是什么 响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 描述响应式界面最著名的一句话就是“Content is like water” 大白话便是“如果将屏幕看作容器，那么内容就像水一样” 响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接
flexbox（弹性盒布局模型）是什么，适用什么场景？
Posted on:2024年8月10日 at 19:47Flexbox（弹性盒布局模型）是一种 CSS 布局模式，旨在简化和优化在容器内分配空间和对齐项目的过程。它使得在布局中处理复杂的对齐、空间分配和顺序问题变得更加简单和高效。 Flexbox 主要概念 容器和项目： Flex 容器：使用 display: flex 或 display: inline-flex 将一个元素指定为 flex 容器。 Flex 项目：容器内部的直接子元素，即 flex
如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
Posted on:2024年8月10日 at 19:45一、背景 在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器 这种布局适用于内容上具有明显主次关系的网页 三栏布局
设备像素、css像素、设备独立像素、dpr、ppi 之间有什么区别？
Posted on:2024年8月10日 at 19:44设备像素、CSS 像素、设备独立像素 (DIP)、设备像素比 (DPR) 和每英寸像素密度 (PPI) 是与屏幕分辨率和显示质量相关的概念。它们之间的区别如下： 设备像素：设备像素是物理屏幕上的最小可见单元，用于实际渲染图像或文本。它表示硬件像素点的数量，通常用于描述屏幕的分辨率。设备像素的数量确定了屏幕的细节和清晰度。 CSS 像素：CSS 像素是在 Web 开发中使用的抽象单位，用于定义网页上
css 中的 animation、transition、transform 有什么区别？
Posted on:2024年8月10日 at 17:07在 CSS 中，animation、transition 和 transform 是用来创建动画效果的关键属性，它们各自具有不同的作用和特点。 animation： animation 属性允许创建一个在指定时间内播放的动画效果，可以包括多个关键帧。 通过指定关键帧动画的名称、持续时间、动画方式（timing function）、延迟时间、播放次数等来控制动画的效果。 animation 属性可以
”flex: auto;“是什么意思？
Posted on:2024年8月10日 at 17:07flex 是复合属性，是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。 flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大 flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设
flex 布局下，怎么改变元素的顺序？
Posted on:2024年8月10日 at 17:07可以使用order属性来改变Flex布局下元素的顺序。order属性指定了Flex容器内部各个项目的排列顺序，其默认值为0。 通过调整order属性的值，可以改变元素的顺序。具体步骤如下： 将元素定义为Flex容器，使用display: flex;或者display: inline-flex;。 为每个子元素设置order属性，根据需要设置不同的值，值越小的元素会在前面，值相等的元素按照文档流原始
CSS3 中 transition 和 animation 的属性分别有哪些？
Posted on:2024年8月10日 at 17:07在 CSS3 中，transition 和 animation 是两种用于实现动画效果的属性。它们分别用于不同的动画需求和实现方式。 Transition 属性： transition 属性用于定义元素在状态改变时从一个样式转换到另一个样式的过渡效果。它包含以下几个属性： transition-property：指定过渡效果应用的 CSS 属性名称，多个属性可以用逗号分隔。 transition-
说说你对 CSS 模块化的理解
Posted on:2024年8月10日 at 17:07CSS 发展 我们在书写 css 的时候其实经历了以下几个阶段： 手写原生 CSS 使用预处理器 Sass/Less 使用后处理器 PostCSS 使用 css modules 使用 css in js 手写原生 CSS 在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况： 行内样式，即直接在 html 中的 style 属性里编写 css 代码。 内嵌样式，即在 html
::before 和::after 中双冒号和单冒号有什么区别、作用？
Posted on:2024年8月10日 at 17:07在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类 由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，可以继续使用 :after 这种老语法表示伪元素 单冒号（:
单行文本怎么实现两端对齐？
Posted on:2024年8月10日 at 17:06说起两端对齐，大家首先想到的可能是 text-align: justify;，但justify对最后一行无效。 通常这样的排版对整段文字是极好的，我们并不希望当最后一行只有两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只有一行文本，但要实现单行文本两端对齐怎么解决？ 方法一：添加一行 根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下： //html <di
使用css实现一个无限循环动画
Posted on:2024年8月10日 at 17:06想要实现CSS动画的无限循环，其实主要就是要使用animation-iteration-count这个属性，将其设置为infinite，动画就会一直循环播放。 例如： <image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image> .anima { animation-name: likes;
怎么触发BFC，BFC有什么应用场景？
Posted on:2024年8月10日 at 17:06文档流 在介绍BFC之前，需要先给大家介绍一下文档流。 我们常说的文档流其实分为定位流、浮动流、普通流三种。 绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。 它的定位相对于它
z-index属性在什么情况下会失效？
Posted on:2024年8月10日 at 17:06通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。 z-index属性在下列情况下会失效： 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或s
说说对 CSS 工程化的理解
Posted on:2024年8月10日 at 17:06CSS 工程化是为了解决以下问题： 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？ 编码优化：怎样写出更好的 CSS？ 构建：如何处理我的 CSS，才能让它的打包结果最优？ 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？ 以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践： 预处理器：Less、 Sass 等； 重要的工程化插件：
CSS预处理器/后处理器是什么？为什么要使用它们？
Posted on:2024年8月10日 at 17:06预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。 后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。 css预处理器为css增加一些编程特性，无需考
Sass、Less 是什么？为什么要使用他们？
Posted on:2024年8月10日 at 17:06他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。 为什么要使用它们？ 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有
为什么有时候⽤translate来改变位置⽽不是使用position进行定位？
Posted on:2024年8月10日 at 17:06translate 是 transform 属性的⼀个值。 改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。 ⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。 transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的
在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？
Posted on:2024年8月10日 at 17:06面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 首先，我们先从 CPU 和 GPU 开始了解。 CPU 和 GPU 的区别 CPU 即中央处理器，GPU 即图形处理器。 CPU是计算机的大脑，它提供了一套指令集，我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码，然后通过逻
为何CSS不支持父选择器？
Posted on:2024年8月10日 at 17:06这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。 浏览器解析HTML文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后主体内容再出现的加载情况。 但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？于是
脱离文档流有哪些方法？
Posted on:2024年8月10日 at 17:06一、什么是文档流？ 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。 二、什么是脱离文档流？ 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后
怎么实现样式隔离？
Posted on:2024年8月10日 at 17:06要实现样式的隔离，你可以考虑以下几种常见的方法： 作用域样式（Scoped Styles）： 在 Vue 单文件组件中，可以使用 scoped 特性将样式限定于当前组件的作用域。 使用<style scoped>标签包裹的样式只对当前组件起作用，不会影响其他组件或全局样式。 Vue 会通过给每个选择器添加一个唯一的属性选择器来实现作用域样式，确保样式仅适用于当前组件。 CSS Modules： V
怎么做移动端的样式适配？
Posted on:2024年8月10日 at 17:06以下是一些常见的移动端样式适配方法： 响应式设计（Responsive Design）： 使用CSS媒体查询（Media Queries）来根据设备的特征（如屏幕宽度、高度、方向等）应用不同的样式。 通过设置百分比宽度、最大宽度或相对单位（比如 rem）来确保元素相对于其容器的大小进行自适应。 @media only screen and (max-width: 768px) { /* 在小屏幕上
相邻的两个inline-block节点为什么会出现间隔，该如何解决？
Posted on:2024年8月10日 at 17:06一、现象描述 真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display: inline-block; padding: .5em
display 有哪些取值？
Posted on:2024年8月10日 at 17:06display 属性可以设置元素的内部和外部显示类型。 元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）； 元素的内部显示类型可以控制其子元素的布局（例如：flow layout，grid 或 flex）。 以下是一些关于display比较常用的属性值： 值 描述 none 元素不会显示 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被
你知道哪些css模块化的方案？
Posted on:2024年8月10日 at 17:05目前主流的 css 模块化分为 css modules 和 css in js 两种方案。 css modules CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名 加上唯一 hash。 css module 需要 webpack 配置 css-loader 或者 scss-loader
CSS中的 “flex:1;” 是什么意思？
Posted on:2024年8月10日 at 17:05flex 是 flex-grow, flex-shrink 和 flex-basis的简写。 除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式： 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的： .item {flex: 1;} .item {
css加载会造成阻塞吗？
Posted on:2024年8月10日 at 17:05先说下结论： css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法: 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间) 对css进行压缩(可以用很多打包工具，比如webpack,gulp等
CSS3新增了哪些特性？
Posted on:2024年8月10日 at 17:04一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2 的特性在 CSS3 里都是可以使用的 而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属
grid网格布局是什么？
Posted on:2024年8月10日 at 17:04一、是什么 Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <div class="container"
怎么使用 CSS3 实现动画？
Posted on:2024年8月10日 at 17:04一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现
如果使用CSS提高页面性能？
Posted on:2024年8月10日 at 17:04一、前言 每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验 因此，在整个产品研发过程中，css性能优化同样需要贯穿全程 二、实现方式 实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂
如何实现单行／多行文本溢出的省略样式？
Posted on:2024年8月10日 at 17:04一、前言 在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号 对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 二、实现方式 单行文本溢出省略 理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现 实现方式也很简单，涉及的css属性有： text-overflow：规定当
如何使用css完成视差滚动效果?
Posted on:2024年8月10日 at 17:02一、是什么 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验 我们可以把网页解刨成：背景层、内容层、悬浮层 当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果 二、实现方式 使用css形式实现视觉差滚动效果的方式有： background-attachment transform:translate3D back
说说你对盒子模型的理解
Posted on:2024年7月22日 at 10:02一、是什么 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin \r\n\r\ncontent，即实际内容，显示文本和图像 boreder，即边框，围绕元素内容的内边距的一条或多条线
css选择器有哪些？优先级分别是什么？哪些属性可以继承？
Posted on:2024年7月22日 at 10:02一、选择器 CSS选择器是CSS规则的第一部分 它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式 选择器所选择的元素，叫做“选择器的对象” 我们从一个Html结构开始 <div id="box"> <div class="one"> <p class="one_1"></p> <p class="one_1"></p> </div> <div clas
em/px/rem/vh/vw 这些单位有什么区别？
Posted on:2024年7月22日 at 10:02一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相
CSS中，有哪些方式可以隐藏页面元素？有什么区别?
Posted on:2024年7月22日 at 10:02一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 positio
说说对 CSS 预编语言的理解，以及它们之间的区别
Posted on:2024年7月22日 at 09:53CSS 预编语言是一种基于 CSS 的扩展语言，可以更加方便和高效地编写 CSS 代码。其主要作用是为 CSS 提供了变量、函数、嵌套、继承、混合等功能，以及更加易于维护和组织的代码结构。 常见的 CSS 预编语言有 Sass、Less 和 Stylus 等，它们之间的区别如下： 语法不同：Sass 和 Less 使用类似于 CSS 的语法规则，而 Stylus 则使用了更加简洁和灵活的缩进式语法
怎么让Chrome支持小于12px 的文字？
Posted on:2024年7月22日 at 09:52在默认情况下，Chrome 浏览器的最小字体大小限制为 12px，因此无法直接设置小于 12px 的文字大小。然而，可以通过以下方法绕过这个限制： 使用缩放比例：可以使用 CSS 的 transform 属性来缩放文本元素以达到小于 12px 的效果。例如，使用 transform: scale(0.8) 将文本缩放为 80% 的原始大小。请注意，这可能会导致文本外观变得模糊或失真。 .small
怎么使用 CSS 如何画一个三角形
Posted on:2024年7月22日 at 09:50一、前言 在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮 通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？ 实现过程似乎也并不困难，通过边框就可完成 二、实现过程 在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单 <style> .border { width: 50px; height: 50p
CSS匹配规则顺序是怎么样的？
Posted on:2024年7月22日 at 09:25相信大多数初学者都会认为CSS匹配是左向右的，其实恰恰相反。 CSS匹配发生在Render Tree构建时（Chrome Dev Tools将其归属于Layout过程）。此时浏览器构建出了DOM，而且拿到了CSS样式，此时要做的就是把样式跟DOM上的节点对应上，浏览器为了提高性能需要做的就是快速匹配。 首先要明确一点，浏览器此时是给一个"可见"节点找对应的规则，这和jQuery选择器不同，后者是使
为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？
Posted on:2024年7月22日 at 09:25浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。 浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。 清除浮动的方式： 父级div定义height 最后一个
CSS 中有哪几种定位方式？
Posted on:2024年7月22日 at 09:23Static 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。 Relative 相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所
Atom CSS 是什么？
Posted on:2024年7月22日 at 09:23Atom CSS：原子CSS，意思是一个类只干一件事。 不同于大家常用的BEM这类规则，原子css就是拆分，所有 CSS 类都有一个唯一的 CSS 规则。例如如下 .w-full{ width:100%; } .h-full{ height:100%; } 而像这种就不是 .w&h-full{ width:100%; height:100%; } 当我们使用的时候，直接写class名就可以 <ht
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
Posted on:2024年7月22日 at 09:22结构 display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承 display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从
html和css中的图片加载与渲染规则是什么样的？
Posted on:2024年7月22日 at 09:16Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。 浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。 浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree
display:none与visibility:hidden 有什么区别？
Posted on:2024年7月19日 at 16:01表现上 display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素； visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； 性能上 使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重
css sprites是什么，怎么使用？
Posted on:2024年7月19日 at 16:01是什么 CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 优点 其优点在于： 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 减少图片
IconFont 的原理是什么
Posted on:2024年7月19日 at 16:01IconFont 的使用原理来自于 css 的 @font-face 属性。 这个属性用来定义一个新的字体，基本用法如下： @font-face { font-family: <YourFontName>; src: <url> [<format>],[<source> [<format>]], *; [font-weight: <weight>]; [font-style: <style>];
怎么实现单行、多行文本溢出隐藏？
Posted on:2024年7月19日 at 16:00单行文本溢出 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不进行换行 多行文本溢出 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 display:-webkit-box;
如何从html元素继承box-sizing？
Posted on:2024年7月19日 at 16:00在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。 如果不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码： html { box-sizing: border-box; } *, *:before, *:after { box-sizi
怎么让CSS flex布局最后一行列表左对齐？
Posted on:2024年7月19日 at 15:55justify-content对齐问题描述 在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。 但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。 如下代码： .container { display: flex; justify-content: space-between; fl
CSS 垂直居中有哪些实现方式？
Posted on:2024年7月19日 at 15:53我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。 下面为公共代码： <div class="box"> <div class="sma
行内元素和块级元素有什么区别
Posted on:2024年7月19日 at 15:52行内元素（Inline Elements）： 默认情况下，行内元素在水平方向上以行内的方式显示，不会独占一行。 行内元素只能容纳文本或其他行内元素，不能容纳块级元素。 行内元素的宽度和高度由其内容决定，无法设置固定的宽度和高度。 行内元素可以设置左右的外边距（margin）和内边距（padding），但上下外边距和内边距对行内元素不起作用。 常见的行内元素包括 <span>、<a>、<strong
假设下面样式都作用于同一个节点元素`span`，判断下面哪个样式会生效
Posted on:2024年7月19日 at 15:42body#god div.dad span.son {width: 200px;} body#god span#test {width: 250px;} 本题考察css的样式优先级权重，大家需要记住： 当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000
下面这段代码中，class为content的元素，实际高度是100px吗？
Posted on:2024年7月19日 at 15:42<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title
object-fit 用法
Posted on:2024年7月18日 at 11:18object-fitobject-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。你可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。语法object-fit: contain; object-fit: cover; object-fit: fill; object-fit: n
使用原生js实现以下效果：点击容器内的图标，图标边框变成border:1px solid red，点击空白处重置
Posted on:2022年10月30日 at 11:13const box = document.getElementById('box'); function isIcon(target) { return target.className.includes('icon'); } box.onclick = function(e) { e.stopPropagation(); const target = e.target; if (isIcon(
position: fixed 一定是相对于浏览器窗口进行定位吗？
Posted on:2022年10月30日 at 11:08不一定。 position:fixed;的元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文。 当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
怎么实现一个宽高自适应的正方形？
Posted on:2022年6月25日 at 14:35利用vw来实现： .square { width: 10%; height: 10vw; background: tomato; } 利用元素的margin/padding百分比是相对父元素width的性质来实现： .square { width: 20%; height: 0; padding-top: 20%; background: orange; } 利用子元素的margin-top的值
transition和animation的区别
Posted on:2022年6月25日 at 14:35transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。 animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。
什么是硬件加速？
Posted on:2022年5月9日 at 23:23硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。 我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。 现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。
下面代码中，p标签的背景色是什么？
Posted on:2022年5月8日 at 21:35<style type="text/css"> #parent p { background-color: red; } div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green; </style> ...... <div id="parent"> <div class="a b c d e f g h i j k"> <p>xxxx</p> </
第二个子元素的高度是多少
Posted on:2022年4月10日 at 15:57<div class="container"> <div style="height: 100px"></div> <div style="min-height: 10px"></div> </div> <style> .container{ display: flex; } .container > div { width: 100px; } </style> 答案：100px Flex 布局会
CSSOM树和DOM树是同时解析的吗？
Posted on:2022年4月10日 at 14:43浏览器会下下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
position：absolute绝对定位，是相对于谁的定位？
Posted on:2022年4月5日 at 16:52CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。 absolute的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的 非 static 定位祖先元素 的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
如何使用css来实现禁止移动端页面的左右划动手势？
Posted on:2021年12月26日 at 16:05CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。 最简单方法是： html{ touch-action: none; touch-action: pan-y; } 还可以直接指定对应元素的宽度和overflow： html{ width: 100vw; overflow-x: hidden; }
如何检测浏览器所支持的最小字体大小？
Posted on:2021年11月17日 at 22:49可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。
什么是CSS Sprites？
Posted on:2021年7月4日 at 19:24将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position 的组合进行背景定位。 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。
style标签写在body后与body前有什么区别？
Posted on:2021年7月4日 at 19:24页面加载自上而下 当然是先加载样式。 写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？
Posted on:2021年7月4日 at 19:24行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。 解决方法： 相邻元素代码代码全部写在一排 浮动元素，float:left; 在父级元素中用font-size:0;
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
Posted on:2021年7月4日 at 19:24多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
Posted on:2021年7月4日 at 19:24单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::a
元素竖向的百分比设定是相对于容器的高度吗？
Posted on:2021年7月4日 at 19:24当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
CSS优化、提高性能的方法有哪些？
Posted on:2021年7月4日 at 19:24避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么 避免！important，可以选择其他选择器 尽可能的精简规则，你可以合并不同类里的重复规则
margin和padding分别适合什么场景使用？
Posted on:2021年7月4日 at 19:24何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。 何时使用padding： 需要在border内侧添加空白 空白处需要背景颜色 上下相连的两个盒子的空白，希望为两者之和。
什么是CSS媒体查询?
Posted on:2021年7月4日 at 19:24媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
CSS3新增伪类有那些？
Posted on:2021年7月4日 at 19:23p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。
CSS中，box-sizing属性值有什么用？
Posted on:2021年7月4日 at 19:23用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
前端项目中为什么要初始化CSS样式？
Posted on:2021年7月4日 at 16:07因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。
页面导入样式时，使用link和@import有什么区别？
Posted on:2021年7月4日 at 16:03link属于HTML标签，而@import是css提供的； 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题； link方式的样式的权重高于@import的权重。
canvas在标签上设置宽高，与在style中设置宽高有什么区别？
Posted on:2021年7月4日 at 16:01canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。 而style的width和height是canvas在浏览器中被渲染的高度和宽度。 如果canvas的width和height没指定或值不正确，就被设置成默认值。