Deshun 发布于 2个月前 (10-12) 166℃
赞 (0)
之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ,然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。但是最近精简代码我把 iconfnt.css 移除了,只保留了 iconfnt.js,这样之前 css 中用上面方法引用的图标失效了。就一个图标,总不能再把那么大的 css 引进来吧,可以不以直接给伪类设置一个 svg 图标呢?当然是...
标签:
css
/ CSS伪类
/ CSS伪类设置svg图标
/ svg图标
Deshun 发布于 9个月前 (02-24) 574℃
赞 (0)
一个老项目,直接 yarn start 运行时样式没有加载。先说一下采坑过程:之前写过一篇 create-react-app中CSS Module不生效的解决办法 ,但这个项目是自编码,需要 npm link 到主项目,所以就不能使用 CSS Module 写样式了。页面都是使用 impo...
标签:
create-react-app
/ css
/ CSS Module
Deshun 发布于 10个月前 (02-02) 737℃
赞 (0)
在 Create React App 脚手架创建的项目中使用 CSS Modules 。第一种方式create-react-app 中内置了使用 CSS Modules 的配置,create-react-app 内置的用法是将所有的 .css / .less / .scss 等样式文件都修改成 .module.css / .module.less / .module.scss 等。即可使用 CSS...
标签:
create-react-app
/ css
/ CSS Module
Deshun 发布于 12个月前 (12-09) 915℃
赞 (1)
首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析目前存在的问题:1. antd 样式被重复引用,打包时被重复编译进 css 文件,造成代码冗余。2. 组件自定义样式没有通过类名区分,导致页面中使用多个组件时样式污染。关于 CSS 样...
标签:
react
/ react css
/ css
/ react css重复
/ react css冗余
/ css优化
/ css冗余
/ css精简
Deshun 发布于 1年前 (2022-07-05) 777℃
赞 (0)
像这种,如果子元素的宽度过大,就会出现被挤扁的情况,不能显示实际的宽度。解决方法:有一个 flex-shrink 属性,可以解决元素被挤压的问题。flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收...
标签:
css
/ flex
/ 弹性布局
/ flex元素变形
/ flex元素被挤扁
/ 弹性布局元素被挤扁
Deshun 发布于 2年前 (2022-04-07) 999℃
赞 (0)
在 *.less 文件中写:.test {
width: calc(300px - 20px);
}在相应的 *.css 文件中的结果是这样的:.test {
width: calc(280px);
}这里的 calc(300px - 20px) 由编译软件计算得出。在 *...
标签:
css
/ less
/ css教程
/ less教程
Deshun 发布于 3年前 (2021-03-17) 1783℃
赞 (0)
HTML,也叫“超文本标记语言”,其元素无非就是行内元素、块级元素和行内块级元素。行内元素:行内元素只占据它对应边框所包含的空间,行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。但是 padding 内边距可以起作用, m...
标签:
html
/ css
/ 前端基数
/ css基础
/ css知识
/ HTML知识
/ HTML教程
/ HTML学习
Deshun 发布于 3年前 (2020-07-01) 3916℃
赞 (0)
在同事的项目中遇到一个问题,使用 Vue 的 v-html 后,内容里边的图片太大,显示不全。但是设置 style 又不管用:.img {
max-width: 100%;
height: auto;
}实际上还是 Vue 的 scoped 穿透问题:参考我之前的文章(Vue项目中scoped属性的作用,及scop...
标签:
vue
/ v-html
/ css
/ scoped
/ css穿透
/ scoped穿透
Deshun 发布于 4年前 (2019-11-13) 9753℃
赞 (2)
CSS 的 border 属性,可以设置实线,虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小,非常难看,很难满足UI图的效果。可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:width: 100%;
height: 1px;
background-image: linear-gradi...
标签:
css
/ 小技巧
/ 代码
/ css虚线
/ css个性化虚线
/ css虚线样式
Deshun 发布于 4年前 (2019-10-24) 1816℃
赞 (0)
日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下:$("div.content *").not(".keep");表示 .content 类的 div 下除 .keep 类以外的所有元素;另外,注意这里的&n...
标签:
jQuery
/ css
/ 选择器
/ not()
/ jquery选择器
/ jquery选择排除