![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 52
StarFishing
这个作者很懒,什么都没留下…
展开
-
css加载与阻塞
css加载会阻塞DOM树的解析渲染吗?用代码说话:<!DOCTYPE html><html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>转载 2020-06-28 17:28:17 · 576 阅读 · 0 评论 -
关于动态换肤的解决方案
关于动态换肤的解决方案最近在学习electron,希望在页面切换的时候动态更换背景色,也是参考了一个知名软件的效果,让我手痒起来,也想实现以下,之前在用element开发的时候接触到过换肤的一些思路,但是当时并没有这块的需求,也就搁置了,下面个跟大家探讨以下我的两种思路。效果图方式一 动态增加link标签所谓动态增加link标签就是在需要换肤的时候,把需要更改的颜色进行关键字替换,把新生成...原创 2019-07-18 21:31:24 · 1419 阅读 · 0 评论 -
rem与em的使用和区别详解
编者:在自适应制作稿中,我们经常会看到rem和em这两个单位的冒泡,rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定(很多人错误以为是根据父类元素,实际上是使用它的元素继承了父类的属性才会产生的错觉)·你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚!Em 和 rem都是灵活、 可扩展的单位,由浏览器转...转载 2019-02-27 12:59:16 · 1736 阅读 · 0 评论 -
Flex 布局实现元素的垂直居中和水平居中
更多关于flex布局可以参考这篇博文:https://blog.csdn.net/qq_34803821/article/details/85139315使用flex实现元素的水平居中和垂直居非常方便水平居中:.box{ display: flex; justify-content: center;}垂直居中 .box { display: fle...原创 2019-01-14 21:01:30 · 17261 阅读 · 0 评论 -
页面中图片大小自适应问题,避免留白
第一种:div 包着 imgimg {width: auto;height: auto;max-width: 100%;max-height: 100%;}第二种:背景图片style="background-image: url(${user.headimgurl});background-size: cover; "下面是background-size 的各个属性 :...原创 2019-01-11 22:00:40 · 3730 阅读 · 0 评论 -
移动端点击div区域或者span出现蓝色边框
div或者button的样式里面加上: -webkit-tap-highlight-color:rgba(0,0,0,0); 解决移动端点击出现div等出现区域边框的问题原创 2018-12-28 20:23:04 · 5120 阅读 · 0 评论 -
弹性布局-轻松理解Flex布局
今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。...转载 2018-12-20 20:49:40 · 5192 阅读 · 0 评论 -
如何隐藏页面滑动条
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-y: scroll;overflow-x...转载 2018-12-12 14:37:27 · 6311 阅读 · 0 评论 -
CSS: Sticky footers
问题在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可...转载 2018-12-01 19:10:49 · 1105 阅读 · 0 评论 -
CSS Sticky footer完美底部布局
html 结构:&lt;div class="container"&gt; &lt;div class="content-wrapper&gt; &lt;div class="content"&gt;内容区域,可随机长度&lt;/div&gt; &原创 2018-12-01 19:07:06 · 2904 阅读 · 0 评论 -
CSS transition与transform使用分析
transition与transform是大家容易混淆的两个属性,通过案例分析,帮助大家理解transition的用法,以及与transform的区别与联系,让大家可以更加清楚地了解属性的实现过程,帮助你实现更加绚丽的效果原创 2018-11-28 14:16:27 · 3206 阅读 · 0 评论