css
callmeCassie
不掉头发的程序媛(不掉头发的程序员不是好程序员?)
展开
-
chrome浏览器查看css样式
收益:引入新的插件会增加项目的依赖关系,如果你的项目非常小,或者你的 CSS 代码量本身就不大,那么使用 purgecss-webpack-plugin 带来的收益可能相对较小。如果你的项目中使用了动态生成的 CSS(例如,通过 JavaScript 动态添加样式),purgecss-webpack-plugin 可能无法正确识别这些未使用的样式。除了页面上加载的所有脚本的URL(此处未显示,但通常会显示在最左侧)之外,我们还得到脚本的类型,文件的总大小和未使用的字节数。原创 2024-04-18 16:49:17 · 707 阅读 · 0 评论 -
一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
高度自适应原创 2022-07-31 15:49:32 · 603 阅读 · 0 评论 -
position:fixed实现相对于父级定位
position:fixed原创 2019-10-26 19:37:26 · 10814 阅读 · 1 评论 -
实现iconfont图标渐变
效果展示1.如何使用icon本文使用symbol,其他使用方式可参考官网https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code第一步:引入项目下面生成的symbol代码:记住前面需要加上协议<link rel="stylesheet" href原创 2019-02-02 23:30:20 · 9034 阅读 · 0 评论 -
Flex布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。一、Flex 布局是什么?Flex 是 Flex...转载 2019-02-09 14:59:51 · 292 阅读 · 0 评论 -
css垂直居中的方法
CSS垂直居中的12种实现方式1.使用绝对定位和负外边距对块级元素进行垂直居中HTML<div id="box"> <div id="child"></div></div>CSS#box { width: 300px; height: 300px; background: #ddd; positio...转载 2019-04-06 14:38:50 · 200 阅读 · 0 评论 -
居中为什么用transform,而不是margin top/left
首先。我们了解下transform是干嘛的。在MDN中的官方解释:CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。简言之,transform可以操作一些动画、位移效果。margin top/left,我们应该很熟悉,用得比较多。那为什么说,居中显示,CSS3标准的transform更胜一筹呢?我们主要还是从浏览器渲染的性能方面考...转载 2019-04-27 13:57:16 · 4357 阅读 · 0 评论