分类：CSS

2021
07-12

详解盒子端CSS动画性能提升

目录流畅动画的标准盒子端动画优化动画性能上报分析研究结论Web每一帧的渲染优化动画步骤1.精简DOM，合理布局2.使用transform代替left、top，减少使用耗性能样式3.控制频繁动画的层级关系4.使用will-change可以在元素属性真正发生变化之前提前做好对应准备5.使用dev-tool时间线timeline观察，找出导致高耗时、掉帧的关键操作总结一下流畅动画的标准理论上说，FPS越高，动画会越流畅，目前大多数设备的屏幕刷新率为... 继续阅读 >
2021
07-08

详解CSS开发过程中的20个快速提升技巧

目录1、使用CSS重置（reset）2、继承盒模型3、使用flexbox布局来避免margin的问题（GetRidofMarginhackswidthFlexbox）4、使用:not()解决lists边框的问题5、body上加入line-height样式6、垂直居中任何元素(vertical-centeranything)7、使用SVGicons8、使用“OWL选择器”9、一致的垂直结构（ConsistentVerticalRhythm）10、对更漂亮的换行文本使用box-decoration-break11、等宽表格单元格12、强制使用属性选择器显示... 继续阅读 >
2021
06-19

Vue如何使用CSS自定义变量

在css自定义变量的功能以及出来许久了，但实际开发中大家使用并不多。归其原因是因为less、sass等预处理器已经拥有定义变量的功能，以及Vue、react很方便设置style样式，大家可能觉得使用css定义变量不方便且没必要。实则不然举个最直观的栗子：“如何使用vue设置伪类伪元素的样式”。这是个世纪难题，大部分人可能会通过修改类名的方式解决，可如果要修改的样式多，或者我想通过不同的数据渲染不同的样式，那该怎么办呢... 继续阅读 >
2021
01-03

JS+CSS实现过渡特效

JS+CSS实现过渡特效 最近在玩一个叫Babaisyou的游戏，很羡慕里面的一个转场特效，所以试着做了一下。主要使用了JS和CSS，特效主要是用CSS实现的。HTML代码<!DOCTYPEhtml><htmllang="en"dir="ltr"><head><metacharset="utf-8"><title>开始导航</title><linkrel="stylesheet"href="style.css"></head><body><divclass="text"><p><aid="bottom">点击进入</a></p></div></body><scripttype="text/javascript">//执行代码window.onl... 继续阅读 >
2020
12-05

三剑客：offset、client和scroll还傻傻分不清？

在学习前端的过程中，我们经常会碰到offset,client与scroll，所以我就把它们称作为‘三剑客'。01 offset-偏移量定义：元素在屏幕上占用的所有的可见的空间。元素可见的大小由其高度、宽度决定，包括所有内边距，滚动条和边框大小四个属性offsetcss的样式：<style>.son{width:100px;height:100px;padding:10px;border:10pxsolid#ccc;}.father{width:140px;height:140px;padding:10px;borde... 继续阅读 >
2020
10-28

JavaScript如何操作css

原本应该是由css进行控制html中的div的宽高和背景颜色，但是在下方使用了JavaScript进行重新调用了div盒子，并且覆盖了css原本的属性内容。需求目标:由100像素的粉色背景色的div盒子变成了300像素的橘黄色效果的div盒子代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equi... 继续阅读 >
2020
10-08

Vue3新特性之在Composition API中使用CSS Modules

在Vue3CompositionAPI最近的一次beta升级中，无论是Vue3本3库vue-next，还是面向Vue2过渡用的@vue/composition-api库中，都同步更新了一个useCSSModule函数--用来在使用了CompositionAPI的Vue实例中，支持CSSModules语法。首先来看看什么是CSSModules：CSSModulesCSSModules是一种CSS的模块化和组合系统。vue-loader集成CSSModules，可以作为模拟scopedCSS的替代方案。启用CSSModule... 继续阅读 >
2020
09-30

jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考，具体如下：要求点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。技术要点主要是Jquery进行元素的显示与隐藏。代码<!DOCTYPEhtml><html><head><title>qqq</title><metacharset="utf-8"><styletype="text/css">*{margin:0;padding:0;}h1{text-align:center;margin:2... 继续阅读 >
2020
09-25

JavaScript检测浏览器是否支持CSS变量代码实例

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。有三种方法可以实现这样的效果：控制样式表—可以添加、删除、修改样式表。控制样式规则—可以添加、删除、修改样式规则。控制DOM中的单个元素—可以不依赖样式表来修改元素样式。JavaScript检测浏览器是否支持CSS变量：constisSupported=window.CSS&&window.CSS.supports&&window.CSS.supports('--a',0);if(isSupported){/*su... 继续阅读 >
2020
09-25

小程序中使用css var变量(使js可以动态设置css样式属性)

小程序中使用css var变量(使js可以动态设置css样式属性) 使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。基本用法基础用法<!--web开发中顶层变量的key名是:root，小程序使用page-->page{--main-bg-color:brown;}.one{color:white;background-color:var(--main-bg-color);margin:10px;}.two{color:white;background-color:black;margin:10px;}.three{... 继续阅读 >
2020
09-24

visual studio code 编译运行html css js文件的教程

visual studio code 编译运行html css js文件的教程 运行html文件1、添加插件扩展2、安装openinbrowser3、在对应的html文件处右击，选择openindefaultbrowser或者直接总结到此这篇关于visualstudiocode编译运行htmlcssjs文件的教程的文章就介绍到这了,更多相关visualstudiocode运行htmlcssjs文件内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！... 继续阅读 >
2020
09-24

vue css 引入asstes中的图片无法显示的四种解决方法

vue css 引入asstes中的图片无法显示的四种解决方法 这里主要针对的是vuecli2中的一些问题。vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1.static，2.assets关于这两者之间的区别，和如何选择这里就不多说了！这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！这是因... 继续阅读 >
2020
09-23

基于html+css+js实现简易计算器代码实例

基于html+css+js实现简易计算器代码实例 使用html+css+js实现简易计算器，效果图如下：html代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>calculator</title><linkrel="stylesheet"type="text/css"href="style.css"rel="externalnofollow"><scripttype="text/javascript"src="contain.j... 继续阅读 >
2018
12-03

总结：如何修改美化radio、checkbox的默认样式

总结：如何修改美化radio、checkbox的默认样式 现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式，即input[type=checkbox]:checked+labe... 继续阅读 >
2018
08-08

CSS 的空格处理

CSS 的空格处理 一、空格规则HTML代码的空格通常会被浏览器忽略。<p>◡◡hello◡◡world◡◡</p>上面是一行HTML代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。浏览器的输出结果如下。helloworld可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用<pre>标签。<pre>◡◡hello◡◡world◡◡</pre>另... 继续阅读 >