<?xml version="1.0" encoding="utf-8"?>
<!--  RSS generated by phpcms.cn RSS Builder [2026-05-02 21:42:10]  --> 
<rss version="2.0" xmlns:im="http://purl.org/rss/1.0/item-images/" xmlns:dc="http://purl.org/dc/elements/1.1/" >
<channel>
<pubDate>Sat, 02 May 2026 21:42:10 +0800</pubDate>
<lastBuildDate>Sat, 02 May 2026 21:42:10 +0800</lastBuildDate>
<docs>https://www.zhoulujun.cn</docs>
<description>css3|css3
sass|sass
less|less</description>
<link>https://www.zhoulujun.cn</link>
<title>style</title>
<image>
<title>style</title>
<url><![CDATA[]]></url>
<link>https://www.zhoulujun.cn</link>
<description>css3|css3
sass|sass
less|less</description>
</image>
<webMaster>https://www.zhoulujun.cn</webMaster>
<generator>https://www.zhoulujun.cn</generator>
<ttl>60</ttl>
<dc:creator>https://www.zhoulujun.cn</dc:creator>
<dc:date>Sat, 02 May 2026 21:42:10 +0800</dc:date>
<item>
<title><![CDATA[解决table单元格内内容（td 里面的div）高度height:100%无效]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2021_0326_9365.html]]></link>
<description><![CDATA[td中div元素的高度与td保持一致，所以第一个想到的就是将div的高度设置为100%，因为td 高度是对的(自适应)的那么 div 高度直接设置 100% ，但是实际无效。]]></description>
<pubDate>2021-03-26 19:01:00</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2021_0326_9365.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[解决table单元格内内容（td 里面的div）高度height:100%无效]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2021_0326_9364.html]]></link>
<description><![CDATA[td中div元素的高度与td保持一致，所以第一个想到的就是将div的高度设置为100%，因为td 高度是对的(自适应)的那么 div 高度直接设置 100% ，但是实际无效。]]></description>
<pubDate>2021-03-26 19:01:00</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2021_0326_9364.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[TailwindCSS弃坑血泪史]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2024_1025_9301.html]]></link>
<description><![CDATA[<img src=https://www.zhoulujun.cn/uploadfile/images/2024/10/20241025112548325419192.jpg border='0' /><br />​Tailwind 适合的是新生代的公司,比较适合项目工程较大（页面多）、有标准化设计（色卡、字体、sizing、layout）、重复率高、页面结构较简单的项目。总结就是写起来爽，读起来累，维护痛苦]]></description>
<pubDate>2024-10-25 10:56:43</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2024_1025_9301.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[CSS模块化方案PK：BEM/OOCSS/SMACSS/ITCSS、CSS Modules、CSS-in-JS]]></title>
<link><![CDATA[/html/webfront/style/css3/2024_0808_9212.html]]></link>
<description><![CDATA[JavaScript 社区中的 AMD、CMD、CommonJS、ES Modules 等类似，CSS 社区也诞生了相应的模块化解决方案：BEM、OOCSS、SMACSS、ITCSS、CSS Modules 、 CSS-in-JS]]></description>
<pubDate>2024-08-08 11:20:09</pubDate>
<guid><![CDATA[/html/webfront/style/css3/2024_0808_9212.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[Web 性能优化：CSS层面提高FPS的方法]]></title>
<link><![CDATA[/html/webfront/style/css3/2024_0807_9211.html]]></link>
<description><![CDATA[<img src=/uploadfile/images/2024/08/thumb_150_150_20240808113309909980085.png border='0' /><br />JavaScript 社区中的 AMD、CMD、CommonJS、ES Modules 等类似，CSS 社区也诞生了相应的模块化解决方案：BEM、OOCSS、SMACSS、ITCSS，   ]]></description>
<pubDate>2024-08-07 10:44:53</pubDate>
<guid><![CDATA[/html/webfront/style/css3/2024_0807_9211.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[首屏/长列表性能优化：content-visibility优化渲染性能细讲]]></title>
<link><![CDATA[/html/webfront/style/css3/2024_0718_9173.html]]></link>
<description><![CDATA[可视化区域内加载，content-visibility是一个号的选择，但是使用这个属性，需要注意滚动条抖动问题，已经资源按需加载问题]]></description>
<pubDate>2024-07-18 10:00:05</pubDate>
<guid><![CDATA[/html/webfront/style/css3/2024_0718_9173.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[解决高清屏相差零点几像素无法对齐问题]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2021_1231_9023.html]]></link>
<description><![CDATA[高清屏，差 零点几个像素，对不齐。不仔细看不出来，仔细看感觉毛刺蛮明显，那么要这么解决这个问题呢？]]></description>
<pubDate>2021-12-31 15:08:00</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2021_1231_9023.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[css3多行文本多行文本缩略点击更多展开显示全部]]></title>
<link><![CDATA[/html/webfront/style/css3/2023_0930_8985.html]]></link>
<description><![CDATA[<img src=/uploadfile/images/2023/09/thumb_150_150_20230930172619279762766.png border='0' /><br />比如我要实现如下效果：数据集名称展示一行，超出自动省略，末尾增加编辑icon。点击编辑的icon，换成input 输入框数据集描述最多展示三行   ]]></description>
<pubDate>2023-09-30 16:34:32</pubDate>
<guid><![CDATA[/html/webfront/style/css3/2023_0930_8985.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[css3背景图片(background-image)透明度设置方案总结]]></title>
<link><![CDATA[/html/webfront/style/css3/2023_0927_8984.html]]></link>
<description><![CDATA[希望某个的背景图透明，怎么弄？如果是纯色背景，使用8位hex、rgba或者hsla颜色色值即可。比如background-color: rgba(0, 0, 0,  6);    ]]></description>
<pubDate>2023-09-27 21:37:44</pubDate>
<guid><![CDATA[/html/webfront/style/css3/2023_0927_8984.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[post-css/less/sass样式嵌套与命令之"&"符号—BEM]]></title>
<link><![CDATA[/html/webfront/style/postCss/2019_1220_8684.html]]></link>
<description><![CDATA[ button {&-ok {}}， button { &:after {}} 这一类用法是非常熟悉的。p, a, ul, li { & + & {border-top: 0;}} 这一类组合就可以吓死人咯。&符号还可以改变 css类的输出顺序。如  button{a&{}} ]]></description>
<pubDate>2019-12-20 16:49:00</pubDate>
<guid><![CDATA[/html/webfront/style/postCss/2019_1220_8684.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[DarkMode(5)：深色模式不同实现方案切换]]></title>
<link><![CDATA[/html/webfront/style/darkMode/8586.html]]></link>
<description><![CDATA[<img src=/uploadfile/images/2020/12/thumb_150_150_20201210221755902435557.png border='0' /><br />想要从​@mixin themeify {@each $theme-name, $theme-map in $themes {……方案转为普通方案如何办，sass变量如何自动转为css变量实现主体]]></description>
<pubDate>2020-12-10 20:58:53</pubDate>
<guid><![CDATA[/html/webfront/style/darkMode/8586.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[DarkMode(4)：css滤镜 颜色反转实现深色模式]]></title>
<link><![CDATA[/html/webfront/style/darkMode/8585.html]]></link>
<description><![CDATA[在《DarkMode(1)：产品应用深色模式分析》提过，单纯反转是不行的。但是，把不需要反转的，在反转过来。或者用js，给想要反转的，加上反转   ]]></description>
<pubDate>2020-12-10 21:44:21</pubDate>
<guid><![CDATA[/html/webfront/style/darkMode/8585.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[DarkMode(3)：sass函数实实现深色模式操作]]></title>
<link><![CDATA[/html/webfront/style/darkMode/8584.html]]></link>
<description><![CDATA[<img src=https://www.zhoulujun.cn/uploadfile/images/2019/0804/20190804122523428050851.jpg border='0' /><br />深色模式实现起来有很多种。但是最简易的还是 :not(img) { filter: invert(100%) hue-rotate(180deg); } 最舒服。对于不是很复杂的页面，足够了]]></description>
<pubDate>2020-12-07 23:14:06</pubDate>
<guid><![CDATA[/html/webfront/style/darkMode/8584.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[css父元素设置了min-height但子元素设置height:100%无效]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2012_0614_8583.html]]></link>
<description><![CDATA[父元素高度只设置min-height:300px，子元素高度设置为100%，但实际上子元素高度你是多少呢？子元素的 height 或是 min-height 百分比是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度，总结来说就是一个有效高度]]></description>
<pubDate>2012-06-14 22:45:00</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2012_0614_8583.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode]]></title>
<link><![CDATA[/html/webfront/style/darkMode/8558.html]]></link>
<description><![CDATA[CSS 的媒体查询+CSS 变量二者配合就可以实现页面主题跟随系统自动切换深浅模式 。使用 matchMedia 匹配主题媒体，监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。

]]></description>
<pubDate>2020-09-14 20:08:58</pubDate>
<guid><![CDATA[/html/webfront/style/darkMode/8558.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[DarkMode(1)：产品应用深色模式分析]]></title>
<link><![CDATA[/html/webfront/style/darkMode/8557.html]]></link>
<description><![CDATA[<img src=/uploadfile/images/2020/09/thumb_150_150_20200914181505407255919.jpg border='0' /><br />Dark Mode 并不是简单的颜色反转！在界面色彩复杂一些的情况下，直接的颜色反转就完全没法用了。苹果是如何为 iOS 设计 Dark Mode 的？Dark Mode 的设计难点在哪？为什么Dark Mode变得越来越流行]]></description>
<pubDate>2020-09-14 20:08:25</pubDate>
<guid><![CDATA[/html/webfront/style/darkMode/8557.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[SASS/SCSS全局变量及样式在webpack项目应用，vue-cli的配置如何？]]></title>
<link><![CDATA[/html/webfront/style/sass/2020_0903_8555.html]]></link>
<description><![CDATA[sass的全局变量，在react和在vue中，不可能每个文件里面写一个。所以需要全局全局样式与全局变量的问题。sass-loader提供了additionalData，但是vue-cli坑爹，官方文档不信，需要改为prependData]]></description>
<pubDate>2020-09-03 10:45:11</pubDate>
<guid><![CDATA[/html/webfront/style/sass/2020_0903_8555.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[SASS详解@mixins/@include/@extend/@at-root]]></title>
<link><![CDATA[/html/webfront/style/sass/2020_0827_8550.html]]></link>
<description><![CDATA[Sass 支持所有CSS3的 @规则，以及一些已知的其他特定的Sass  "指令 "。@at-root限定输出在文档的根层级上，而不是被嵌套在其父选择器下。@extend 继承另一选择器样式@mixin 指令允许我们定义一个可以在整个样式表中重复使用的]]></description>
<pubDate>2020-08-27 22:51:49</pubDate>
<guid><![CDATA[/html/webfront/style/sass/2020_0827_8550.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[css布局优化：布局计算限制— contain/will-change/合成层]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2020_0813_8543.html]]></link>
<description><![CDATA[CSS 新出了 contain 属性，拥有 contain 属性（不为 none）的元素与页面其他元素相对独立，并且该元素及其后代元素样式、DOM 发生变化时不会导致整个页面回流和重绘。contain: none | strict | content | [ size || layout || paint ]]]></description>
<pubDate>2020-08-13 19:34:05</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2020_0813_8543.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
<item>
<title><![CDATA[css过去及未来展望—分析css演进及排版布局的考量]]></title>
<link><![CDATA[/html/webfront/style/cssBase/2020_0520_8436.html]]></link>
<description><![CDATA[<img src=https://www.zhoulujun.cn/uploadfile/images/2020/05/20200520212926793989596.jpg border='0' /><br />从形式上来说，CSS3 标准自身已经不存在了。每个模块都被独立的标准化。但是每个模块都可以追溯其来龙去脉。从印刷出版到互联网的兴起，这期间板式设计可以构成一篇雄文。]]></description>
<pubDate>2020-05-20 21:22:19</pubDate>
<guid><![CDATA[/html/webfront/style/cssBase/2020_0520_8436.html]]></guid>
<author>https://www.zhoulujun.cn</author>
</item>
</channel>
</rss>
