css
关注
分享
扫一扫
文章平均质量分 73
css样式专栏
<a href="#">leo</a>
这个作者很懒，什么都没留下…
展开
-
CSS 中哪些属性可继承，哪些不可以？
目录前言一、能继承的属性二、不能继承的属性总结前言今天一起瞅瞅CSS在设置样式的时候，有哪些属性是可以被后代元素继承的呢？又有哪些是不能继承的，掌握这个以后，相信写出简洁高效的样式so easy~一、能继承的属性字体系列属性:font、font-family、font-weight、font-size、font-style;文本系列属性:2.1）内联元素：color、line-height、word-spacing、letter-spacing、text-transform;2.2）块原创 2021-10-20 21:37:24 · 1752 阅读 · 0 评论 -
前端渲染回流与重排问题以及优化方案
文章目录前言一、浏览器是如何进行界面渲染的？二、重绘(repaint)和重排(回流reflow)是什么?1. 重排2. 重绘3. 两者的关系4. 何时会触发重排？三、如何优化页面渲染性能？1. 文档碎片总结前言今天一起看一下浏览器是如何渲染页面的，并看一下修改代码会对页面渲染带来的影响，带着问题一起寻找优化的方案~一、浏览器是如何进行界面渲染的？不同的渲染引擎的具体做法稍有差异，但是大体流程都是差不多的，下面以 chrome渲染引擎 的 渲染流程来说明：上图展示的流程是：获取 HTML原创 2021-10-11 20:13:48 · 305 阅读 · 0 评论 -
子元素在父元素水平垂直居中方法整理
文章目录前言一、方案一1. 思路2. 代码演示二、方案二1. 思路2. 代码演示三、方案三1. 思路2. 代码演示四、方案四1. 思路2. 代码演示三、 效果演示总结前言在网页的布局中，最常见的一种效果就是让子元素在父元素中水平垂直居中效果，虽说功能简单，但你有几种解决方式呢？今天整理了几种解决方式，一起来看下吧~一、方案一1. 思路利用父元素相对定位，子元素决定定位，计算子元素与父元素之间的距离。控制子元素的top和left值将其定位到父元素的正中央位置。缺点：如果子元素或者父元原创 2021-10-07 22:11:00 · 907 阅读 · 0 评论 -
Vue项目中美化滚动条
目录前言一、代码演示二、结果演示总结前言你是不是和我一样，早就看PC端浏览器自带的滚动条不爽了呢？快来看看如何修改滚动条的样式吧~一、代码演示在Vue项目中，这个样式可以直接加到App.vue的style标签中。代码如下（示例）：::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0;}::-webkit-scrollbar { -webkit-appearance: none原创 2021-08-24 22:12:22 · 557 阅读 · 0 评论 -
JS动画和CSS动画的区别
目录前言一、CSS动画1.优点2.缺点二、JS动画1.优点2.缺点三、CSS动画和JS动画的差异总结前言我们在做项目的时候，通常需要配合一些动画效果，从而给用户更好的体验。使用JavaScript和CSS都可以完成动画，那么它们各有什么优点和缺点呢？一起来看一下吧~一、CSS动画1.优点浏览器可以对动画进行优化浏览器使用与requestAnimationFrame类似的机制，requestAnimationFrame比起setTimeout 、setInterval设置动画的优势主要是：①原创 2021-08-21 21:59:12 · 289 阅读 · 0 评论 -
用CSS画三角形
目录前言一、代码演示二、结果展示总结前言在项目中，经常见到的下拉框或者对话框上的小凸起，通常是通过CSS模拟出来的，接下来就看下到底是如何通过CSS将三角形画出来的吧~一、代码演示代码如下（示例）：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=e原创 2021-08-19 22:59:10 · 69 阅读 · 0 评论