标签: CSS

客栈小K | 2022-08-11 | 前端相关CSS

纯CSS实现四种方式文本反差色效果

如封面图所示,文字随着界面的交互变化会修改文字的颜色形成反差色,让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果,这样的效果肯定见过不少,在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。 动画效果一 文字蓝色背景颜色从左往右延伸至整个元素,文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化,且两段文字有着不同的颜色。 实现过程 如图所示两个颜色的背景是两个元素,一个绿色盒子,一个蓝色盒子,其中绿色盒子使用定位的层级 z-index 高于蓝色盒子;通过改变蓝色盒子的宽度覆盖绿色盒子;盒子里面的文字内容宽度固定,否则两段文本不能刚好重叠。 核心代码如下: js <div id="left-side" class="side" <h2 class="title" 前端开发 <span class="fancy" 南城FE</span

 243 |  0 |  0 前端相关CSS

HZFEStudio | 2022-07-01 | 前端相关CSS

样式:水平垂直居中方案

以下方案均基于如下布局和基础样式: html <div id="parent" <div id="children" HZFE</div </div css parent { background: red; height: 600px; } children { background: blue; } flex 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: flex; justify-content: center; align-items: center; } grid 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: grid; justify-content: center; align-items: center; } 相对定位 1\. transform 适用场景:子元素宽高不固定、子元素宽高固定 css children { di

 400 |  0 |  0 前端相关CSS

HZFEStudio | 2022-06-30 | 前端相关CSS

样式:谈谈 CSS 预处理器

相关问题 CSS 主要有哪些预处理器 为什么需要用预处理器 各预处理器优缺点 回答关键点 Sass Less Stylus PostCSS 工程化 提升效率 CSS 本身不属于可编程语言,当前端项目逐渐庞大之后 CSS 的维护也愈加困难。CSS 预处理器所做的本质上是为 CSS 增加一些可编程的特性,通过 变量 、 嵌套 、 简单的程序逻辑 、 计算 、 函数 等特性,通过 工程化 的手段让 CSS 更易维护,提升开发效率。 目前主流的 CSS 预处理器主要有 Sass、Less、Stylus、PostCSS。 知识点深入 1\. PostCSS\[1\] PostCSS 是目前最为流行的 CSS 预/后处理器。PostCSS 本体功能比较单一,它提供一种用 JavaScript 来处理 CSS 的方式。PostCSS 会把 CSS 解析成 AST(Abstract Syntax Tree 抽象语法树),之后由其他插件进行不同的处理。 功能 PostCSS 本体功能比...

 254 |  0 |  0 前端相关CSS

HZFEStudio | 2022-06-29 | 前端相关CSS

样式:BFC 的形成和作用

相关问题 BFC 有什么用,如何触发 谈谈你对 BFC 的理解 回答关键点 盒模型 视觉格式化模型 包含块 正常流 BFC 是什么 BFC 全称为 block formatting context,中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域,它规定了内部的块级盒子如何布局,且与区域外部无关。 BFC 有什么用 修复浮动元素造成的高度塌陷问题。 避免非期望的外边距折叠。 实现灵活健壮的自适应布局。 触发 BFC 的常见条件 <html\ 根元素。 float 的值不为 none。 position 的值不为 relative 或 static。 overflow 的值不为 visible 或 clip(除了根元素)。 display 的值为 table-cell,table-caption,或 inline-block 中的任意一个。 display 的值为 flow-root,或 display 值为 ...

 289 |  0 |  0 前端相关CSS

动感超人, | 2022-06-28 | 前端相关CSS

如何使用css完成视差滚动效果?

一、是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层、内容层、悬浮层 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果 二、实现方式 使用 css 形式实现视觉差滚动效果的方式有: background-attachment transform:translate3D background-attachment 作用是设置背景图像是否固定或者随着页面的其余部分滚动 值分别有如下: scrol

 412 |  1 |  0 前端相关CSS

动感超人, | 2022-06-28 | 前端相关CSS

介绍一下grid网格布局

一、是什么 Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列 擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系 这与之前讲到的 flex 一维布局不相同 设置 display:grid/inline-grid 的元素就是网格布局容器,这样就能出发浏览器渲染引擎的网格布局算法 js <div class="container" <div class="item item-1" <p class="sub-item" </p </div <div class="item item-2" </div <div class="item item-3" </div </div 上述代码实例中, .contain

 408 |  0 |  0 前端相关CSS

动感超人, | 2022-06-28 | 前端相关CSS

说说flexbox(弹性盒布局模型),以及适用场景?

一、是什么 Flexible Box 简称 flex ,意为”弹性布局”,可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素,称为 flex 容器 container 它的所有子元素自动成为容器成员,称为 flex 项目 item 容器中默认存在两条轴,主轴和交叉轴,呈90度关系。项目默认沿主轴排列,通过 flex-direction 来决定主轴的方向 每根轴都有起点和终点,这对于元素的对齐非常重要 二、属性 关于 flex 常用的属性,我们可以划分为容器属性和容器成员属性 容器属性有: flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction 决定主轴的方向

 530 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

CSS如何画一个三角形?原理是什么?

一、前言 在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮 通常情况下,我们会使用图片或者 svg 去完成三角形效果图,但如果单纯使用 css 如何完成一个三角形呢? 实现过程似乎也并不困难,通过边框就可完成 二、实现过程 在以前也讲过盒子模型,默认情况下是一个矩形,实现也很简单 html <style .border { width: 50px; height: 50px; border: 2px solid; border-color: 96ceb4 ffeead d9534f ffad60; } </style <div class="border" </div 效果如下图所示: ![4a

 433 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

如何实现单行/多行文本溢出的省略样式?

一、前言 在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号 对于文本的溢出,我们可以分成两种形式: 单行文本溢出 多行文本溢出 二、实现方式 单行文本溢出省略 理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现 实现方式也很简单,涉及的 css 属性有: text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本 white-space:设置文字在一行显示,不能换行 overflow:文字长度超出限定宽度,则隐藏超出的内容 overflow 设为 hidden ,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略 white-space:nowrap ,作用是设置文本不换行,是 overflow:hidden 和 text-overflow:ellipsis 生效的基础 text-overflow 属性值有如下: clip:当对象内文本溢出部分裁

 460 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

css选择器有哪些?优先级?哪些属性可以继承?

一、选择器 CSS选择器是CSS规则的第一部分 它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式 选择器所选择的元素,叫做“选择器的对象” 我们从一个 Html 结构开始 html <div id="box" <div class="one" <p class="one_1" </p <p class="one_1" </p </div <div class="two" </div <div class="two" </div <div class="two" </div </div 关于 css 属性选择器常用的有: id选择器( box),选择id为box的元素 类选择器(.one),选择类名为one的所有元素 标签选择器(div),选择标签为div的所有元素 后代选择器( box div),选择id为box元素内部所有的div元素 子选择器(.o

 359 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

说说对Css预编语言的理解?有哪些区别?

一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css 预处理器便是针对上述问题的解决方案 预处理语言 扩充了 Css 语言,增加了诸如变量、混合(mixin)、函数等功能,让 Css 更易维护、方便 本质上,预处理是 Css 的超集 包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 Css 文件 二、有哪些 Css 预编译语言在前端里面有三大优秀的预编处理器,分别是: sass less stylus sass 2007 年诞生,最早也是最成熟的 Css 预处理器,拥有 Ruby 社区的支持和 Compass 这一最强大的 Css 框架,目前受 LESS 影响,已经进化到了全面兼容 Css 的

 337 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

什么是响应式设计?响应式设计的基本原理是什么?如何做?

一、是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 描述响应式界面最著名的一句话就是“Content is like water” 大白话便是“如果将屏幕看作容器,那么内容就像水一样” 响应式网站常见特点: 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 二、实现方式 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有 meta 声明 viewport html <meta name="viewport" content="width=device-width

 461 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

让Chrome支持小于12px 的文字方式有哪些?区别?

一、背景 Chrome 中文版浏览器会默认设定页面的最小字号是12px,英文版没有限制 原由 Chrome 团队认为汉字小于12px就会增加识别难度 中文版浏览器 与网页语言无关,取决于用户在Chrome的设置里(chrome://settings/languages)把哪种语言设置为默认显示语言 系统级最小字号 浏览器默认设定页面的最小字号,用户可以前往 chrome://settings/fonts 根据需求更改 而我们在实际项目中,不能奢求用户更改浏览器设置 对于文本需要以更小的字号来显示,就需要用到一些小技巧 二、解决方案 常见的解决方案有: zoom -webkit-transform:scale() -webkit-text-size-adjust:none Zoom zoom 的字面意思是“变焦”,可以改变页面上元素的尺寸,属于真实尺寸 其支持的值类型有: zoom:50%,表示缩小到原来的一半 zoom:0.5,表示缩小到原来的一半 使用 zoom 来”支持“ 12px 以

 356 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS浏览器

怎么理解回流跟重绘?什么场景下会触发?

一、是什么 在 HTML 中,每个元素都可以理解成一个盒子,在浏览器解析过程中,会涉及到回流与重绘: 回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小) Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素 Display:将像素发送给GPU,展示在页面上 在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局

 397 |  0 |  0 前端相关CSS

动感超人, | 2022-06-27 | 前端相关CSS

css中,有哪些方式可以隐藏页面元素?区别?

一、前言 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景 通过 css 隐藏元素的方法有很多种,它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 css 实现隐藏元素方法有如下: display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path display:none 设置元素的 display 为 none 是最常用的隐藏元素的方法 css .hide { display:none; } 将元素设置为 display:none 后,元素在页面上将彻底消失 元素本身占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘 消失后,自身绑定的事件不会触发,也不会有过渡效果 特点:元素不可见,不占据空间,无法响应点击事件 visibility:hidden 设置元素的 visi

 316 |  0 |  0 前端相关CSS