CSS杂记第15页

CSS 预处理器语言Less

Less安装通过[npm](https://www.npmjs.org/)安装Less转换为CSS变量（Variables）注释（Comments）混合（Mixins）嵌套（Nesting）1.选择器嵌套

繁星学编程·2024-03-05 07:28

H5/CSS 笔试面试考题（111-120）

简述当margin-top、padding-top的值是百分比时，分别是如何计算的()A：相对父级元素的height，相对自身的heightB：相对最近父级块级元素的height，相对自身的heightC：相对父级元素的width，相对自身的widthD：相对最近父级块级元素的width，相对最近父级块级元素的width面试回答正确率：49.0%推荐指数：★★★★试题难度：初级试题类型：选择题答案

宇宙中的一颗星·2024-03-05 07:28

css-左三角

左三角div{width:0;height:0;border-style:solid;border-width:5px05px7px;border-color:transparenttransparenttransparentred;font-size:0;line-height:0;}

前端笨鸟·2024-03-05 02:23

CSS面试题：说一说对rem的理解？

页面响应式用rem实现【根据设备屏幕宽度改变根元素fontsize】，设备自适应用媒体查询实现【根据设备屏幕宽度控制哪些样式class生效】媒体查询实现：【页面结构需要变化时使用】1、link元素中的CSS

程序员大澈·2024-03-04 02:50

web前端css基本内容

web前端css当我们用html的语法给内容规划布局样式时，可能会出现许多个相似的内容需要运用同一种样式，复制粘贴太麻烦而且如果后期要改动的话比如把许多个地方从红色改成蓝色，就需要一个一个改了，这时候就需要引入

刘zy_9527·2024-03-03 09:28

css通过calc动态计算宽度

max-width:calc(100%-40px).m-mj-status-drawing-info-data{display:inline-block;margin:10px;min-width:200px;padding:10px;border-radius:10px;background:#ddd;max-width:calc(100%-40px);word-wrap:break-word;

徐同保·2024-03-03 07:25

你下个Vite项目能不能用上Lightning CSS

Vite自从4.4版本开始实验性支持LightningCSS，可以让项目的CSS打包速度更快，构建体积更小，我们来一起看看在Vite中怎么配置使用LightningCSS吧。

·2024-03-03 06:06

react + umi中如何使用rem完成自适应布局

只要写css就可以实现：flex+rem布局；在项目的global.less中根据媒体查询；媒体查询是用于根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的CSS样式的技术。

左&耳·2024-03-03 04:22

css 常用选择器及其使用语法

1.元素选择器作用：根据标签名来选中指定元素语法：标签名{}例子：p{}，h1{},div{}2.id选择器作用：根据元素的id属性值选中一个元素语法：#id属性值{}例子：#box{}3.类选择器作用：根据元素的class属性值选中一组元素语法：.class属性值4.通配选择器作用：选中页面所有元素语法：*例子：*{}5.交集选择器作用：选中同时复合多个条件的元素语法：选择器1选择器2选择器3选

小仙女学前端·2024-03-03 00:47

CSS常用选择器介绍

CSS样式设置，常用的几类选择器例：//ID选择器#test{color:red;}//元素选择器h1{weidth:100px;}//类选择器.help{background-color:green;

奥利奥MILK·2024-03-03 00:47

css选择器

层叠：优先级的准确规则如下：1：如果选择器的ID数量更多，则它会胜出（即它更明确）。2：如果ID数量一致，那么拥有最多类的选择器胜出。3：如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。4：源码顺序层叠的第三步，也是最后一步，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。说明伪类选择器（如:hover）和属性选择器

xiaobai_cpp·2024-03-02 22:14

css单位中px、em、rem的区别

如果当前行内文本的字体尺寸为被人为的设置，则相对于浏览器的默认字体尺寸，他会继承父级元素的字体大小因此并不是一个固定值3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小

慢羊羊头上没草·2024-03-02 17:06

CSS中常见选择器的用法

CSS选择器是CSS的基石，赋予开发者精确控制HTML文档中元素样式的能力。

浮生若梦777·2024-03-02 15:03

css 动画效果：水平直线来回运动：animation

background:url(https://hao2.qhimg.com/t01b958e8662853d1c8.png)no-repeat;background-size:119px30px;color:#fff;display:inline-block;height:30px;width:119px;line-height:27px;position:absolute;left:-115px

CAD GIS开发·2024-03-02 11:28

新知｜仅用 CSS 实现网页阅读进度条

但是，事实证明，您也可以使用纯CSS构建阅读进度条。从本质上讲，一个名为animation-timeline的新实验性CSS属性可以让你指定用于控制CSS动画进度的时间轴。我们将用它来创建阅读进度条。

·2024-03-01 23:15

abrt-server导致数据库宕机

Jul2000:18:32db1abrt-hook-ccpp:Process59611(ocssd.bin)ofuser1000killedbySIGABRT-dumpingcoreJul2000:18

bestsun999·2024-03-01 22:38

【css】border边框影响布局解决方案

需求（border改变不影响布局）最近在写项目的时候遇到这样一个问题，我给元素添加动态border的时候，随着border的生效，会影响border之外的布局解决方案：border边框影响布局之问题的发生，到底需要如何解决？下面我提供2种方案供大家参考：1.用outline替代border{//原样式border:1pxsolid#0081FF;//替换后outline:1pxsolid#0081

前端小趴菜05·2024-03-01 13:55

CSS cursor的一些相关属性

autocrosshairdefaulte-resizehelpmoven-resizene-resizenw-resizepointerprogresss-resizese-resizesw-resizetextw-resizewait上面是一些cursor的属性，非常多cursor：pointer；这个呈现在页面上是一个小手状，可以用在一些按钮、链接上，让用户看的更明白。cursor：defa

小老头头头头·2024-03-01 12:24

什么是重排或回流、重绘？如何减少重排？

首先我们需要先了解浏览器渲染机制，浏览器渲染引擎是浏览器的核心组成部分之一，它负者将网页代码(html,CSS，javaScript)转换为可视化的内容。

·2024-03-01 10:05

HTML+CSS+JS：动态滑块组件

效果演示实现了一个简单的滑块效果，其中包括一个滑块（slider）和一个可以拖动的球（ball）。当用户拖动球时，球会在滑块内部左右移动，同时改变颜色。CodeHaveyoubeennaughtyornicethisyear?*{transition:all1sease-in-out;/*对所有元素应用过渡效果，持续1秒，缓动函数为ease-in-out*/}body{margin:0;/*设置页

若冰说·2024-02-29 23:05

CSS常见选择器

CSS（层叠样式表）中包含了多种用于选择和定位HTML文档中元素的选择器，以便为这些元素应用样式。

dami_king·2024-02-29 23:04

Vue3 实现一个简单的方位动画

设计思路由于不用十分精确，就用最简单的div+css来实现位置标识的显示和动画。之后再通过配合背景图片来保证最基础的效果。方位总共9个，东南西北中加上四个角，通过Grid布局让其形成3*3的格子。

·2024-02-29 22:28

微信小程序 --- 常用样式和组件

常用样式和组件1.组件和样式介绍在开Web网站的时候：页面的结构由HTML进行编写，例如：经常会用到div、p、span、img、a等标签页面的样式由CSS进行编写，例如：经常会采用.class、#id

前端贾公子·2024-02-29 18:29

animate.css动画初始状态隐藏

在使用animate.css会做移动端的css动画，PC端的结合jquery.fullpage.js就能做一个全屏滚动的企业网站，但初始状态下需要隐藏有动画的元素可以给animated类添加opacity

辣子_·2024-02-29 05:45

CSS3新特性和CSS3动画

CSS3的新特性1.选择器：（1）属性选择器：[属性名][属性名=属性值][属性名^=属性值][属性名$=属性值][属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如:hover、:active

·2024-02-28 15:03

Vue项目中，src目录下的vue.app文件介绍

App.vue是一个单文件组件（SingleFileComponent,简称SFC），它允许你将Vue组件的HTML模板、JavaScript代码和CSS样式写在一个单独的.vue文件中。

Komorebi_9999·2024-02-28 12:24

CSS2DRenderer的使用

具体参照https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html；CSS2DRenderer的使用import{CSS2DObject

qq_39672409·2024-02-28 09:20

VSCode设置左侧资源管理器字体大小

1.进入安装目录MicrosoftVSCode\resources\app\out\vs\workbench2.打开文件workbench.desktop.main.css3.搜索.monaco-workbench.part

·2024-02-27 21:20

CSS文本超出显示3个点的方法

在CSS中，如果你想让超出特定长度的文本显示为三个点（...），你可以使用text-overflow属性，配合overflow和white-space属性。

追格·2024-02-27 08:48

js基础小结（2）

js操作css的属性语法：document.getElementById("id").style.属性="值"属性:就是css中属性css属性有"-"例如:backgroud-color若有"-"只需要将

dev晴天·2024-02-27 01:45

Raft 算法、分布式 KV 面试汇总

从零开始，手写基于raft的分布式KV系统，课程详情可以看这里：https://av6huf2e1k.feishu.cn/docx/JCssdlgF4oRADcxxLqncPpRCn5b在简历上如何写这个项目

·2024-02-26 14:59

愚夫杂记～星月天外有（原创）

何时天已无星月茫然一片风云剩人间俗艳物相诱惑亲疏清灯影下盆花绿叶出蓝轻点头示尔随意尽舒怀星月天外有心明清辉入君途图片发自App夜空中星晨似乎隐隐已经有了一种新的习惯，星晨已经习惯不再争辉，不知可年起已经开始稀落，再也难觅那么一两点星光，暗哑灰沉。每到夜晚霓虹灯映，尽目无际，反似繁星点点，真有天地挪移的感觉。各色各样不再纯粹，物欲横流地诱惑着众生，对质朴的疏离，对欲望亲近。人心似乎难以捉摸，表面亲亲

愚夫_e8a2·2024-02-26 09:33

【每日前端面经】2023-02-25

是一个开放式跨端跨框架解决方案，支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN等应用多端适配怎么做固定布局（PC）window.screen分类加载CSS

糠帅傅蓝烧牛肉面·2024-02-26 06:47

java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署

调试部署java毕业设计二手图书回收销售网站Mybatis+系统+数据库+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS

沪港·2024-02-25 18:30

css基础

1.外部样式表css代码和html代码都单独放在不同的文件中内部样式表:指的就是css和html代码放在同一个文件中css样式放在style标签中定义style标签必须放在head标签内内联样式表:把css

lxylxy001·2024-02-25 17:28

前端数据可视化：ECharts使用

知识扩展less文件 Less是一种CSS预处理器，它扩展了普通的CSS语言，为web

~hello world~·2024-02-25 11:21

web前端安全性——iframe安全问题

**原理是利用透明层iframe,使用了CSS中的opacity或z-index等属性，来到达透明和位于其它界面的上方，然后使用iframe来嵌入劫持页面。

장숙혜·2024-02-25 00:08

文字溢出容器省略号展示处理

文字溢出容器，要打点展示一、单行文本HTMLnjhsahdyihdkandwidywhdnhcujsanxjiuyswfdiuahcfoauyfhceencuiebweifjefnieubyiuyhkhyCSSp

DARKSIIIDE·2024-02-25 00:30

java计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署

java计算机毕业设计同学录网站源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS

游游科技·2024-02-24 17:59

java毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试

毕业设计网络招聘系统源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS

銮銮科技·2024-02-24 17:29

java毕业设计物资租赁管理系统mybatis+源码+调试部署+系统+数据库+lw

lwjava毕业设计物资租赁管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS

銮銮科技·2024-02-24 17:58

java毕业设计酒店管理信息系统mybatis+源码+调试部署+系统+数据库+lw

lwjava毕业设计酒店管理信息系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS

雪夜科技·2024-02-24 17:58

css换行

1.white-space:normal;这个只针对中文有效2.word-break:break-all;强制换行，针对中文，数字，英文等都有效；3.word-wrap:break-word;英文单词碰到换行的时候，整个单词换行：

冬天的_太阳·2024-02-24 04:30

面试前端性能优化八股文十问十答第二期

优化动画可以通过以下几个方面进行：使用CSS动画：利用CSS3提供的transition和animation属性来实现动画效果，因为CSS动画是由浏览器来执行的，通常比JavaScript动画性能更高。

程序员小白条·2024-02-23 21:41

css+动画优化,css3动画性能优化--针对移动端卡顿问题

一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为.png或者.jpg的图形；缺点：依赖于HTML

影子的覆盖·2024-02-23 18:07

一种鼠标划过文字放大的CSS特效而引发的疑惑

先上效果图，有两种，这种是使用transform来改变大小缩放这种是改变文字大小来缩放，会引起排版变化在使用transform时，能明显感到比使用改变文字大小时更卡顿，并且浏览器的窗口越大，卡顿越明显。当时我心中就很疑惑，单就从我之前学到的浏览器的渲染机制上来说，改变文字大小是会触发回流的，使用transform时不会触发回流，为什么使用transform会更卡呢？另外网页内没有什么其他内容，回流

Hollow_GLs·2024-02-23 17:35

vue.js之视频播放器组件

npminstallvue-video-player-S然后，在src/main.js中importVueVideoPlayerfrom'vue-video-player'import'video.js/dist/video-js.css'Vue.use

一个小前端程序员·2024-02-23 05:33

js+css 锚点菜单

{{item.label}}我是内容1我是内容2我是内容3我是内容4我是内容5exportdefault{name:"",components:{},mixins:[],props:{},computed:{},watch:{},data(){return{//初始化菜单navList:[{label:"菜单1",},{label:"菜单2",},{label:"菜单3",},{label:"菜单

bobringtheboys·2024-02-23 01:47

css居中方法归纳（二）

大话元素居中身为一名前端开发者，居中永远是绕不去的一个问题，如果不能有完整的方式归类，每次百度难免费时，并且显的咱们多low啊，居中都要百度，至少为了咱们滴面子，咱也要把它学好，接下来一起来看看吧水平居中水平居中方案一：父级加text-align子级inline-block.father{width:100%;height:200px;background:#ccc;text-align:cent

不曾忽然七日·2024-02-22 19:48

如何去掉a标签的下划线

下面就让我们来一起了解一下通过css去除a标签下划线的方法。直接在样式中添加如下样式：.smooth{text-decoration:none;}或a{text-decoration:none;}

公众号_一码当先·2024-02-22 19:38

推荐频道

CSS杂记