CSS

分类下相关文章

修改 Android 下 Chrome 浏览器的顶部地址栏颜色

我看到很多网站在 Android 手机的 Chrome 浏览器里,可以更改顶部的地址栏及 status bar 的颜色。 而我目前的网站就没有这个效果。说明不是 Chrome 默认的行为。 查了一下,原来在 Android 5.0 以上, Chrome 版本 39 以上,可以通过设置 <meta name="theme-color" content="#SOME_COLOR"> 来实现此效果。 例如,我设置的颜色是 <meta name="theme-color" content="#375680&qu ...

阅读全文...

px,em 与 rem 的区别,及各自使用场景

px 是绝对值,em 与 rem 都是相对值。 em 是相对父级元素字体大小的倍数。例如,父级 div 字体设置了 20px, 在设置 2em 之后,该元素的字体大小就变成了 40px。 rem 是相对 html 根元素字体大小的倍数。而 html 默认的字体大小是 16px。所以,1rem 就相当于 16px。当然这个默认值也可以调整。 使用场景 em。中文段落的首行两格缩进,2em。 ...

阅读全文...

使用 CSS 限制商品标题行数不超过两行

标题超出两行的部分显示为省略号 .name { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; font-size: 0.9rem; height: 2.5rem; } 文本截断效果如图: 注意: font-size: 0.9rem; height: 2.5rem; overflo ...

阅读全文...

区域内指定 element 的第一个,样式与后面的同类 element 不同

例如,article-content div 内,第一个 h2 标签不需要设置 margin-top,可以这样实现 .article-content h2 { font-size: 1.6em; border-bottom: 1px solid #ddd; padding-bottom: .1em; margin-bottom: 2.4rem; } .article-content h2 ~ h2 { margin-top: 2.2em; } 确实能达到预期的效果,但是这语法根本看不懂,也记不住。。。 但是,这样做,漏掉了一种情况,即 h2 不是第一个元素,有可能 p 是第一个元 ...

阅读全文...

中文段落行首缩进使用 2em

即 text-indent: 2em; 为何不使用 px 行首缩进如果使用 px 的话,代码非常不好维护,因为一旦 font-size 从 15px 调整到 20px,那对应的 text-indent 也得做对应得调整。 em 是什么 Em 是一个相对值,而不是一个绝对值。即 即,相对于当前的 font-size。 所以,em 天生就是为中文行首缩进而生。 ...

阅读全文...

去除网页输入框右侧出现的 LastPass 账号密码自动填充图标

原代码 <input type="text" class="form-control" placeholder="请输入您要查找的内容"> 解决办法是在 Input id 中加入 search 关键词。 <input type="text" class="form-control" placeholder="请输入您要查找的内容" id="search-input"> 可见 LastPass 会分析 input 输入框的 i ...

阅读全文...

CSS class 共存/不共存选择器

<div class="a b c"></div> 同时包含多个 class 的元素选择 例如,同时包含 class a b .a.b { color: blue; } 包含某个 class 但是同时不能包含另一个 class 例如,包含 class a 但是不包含 class d .a:not(.d) { color: black; } ...

阅读全文...

linear-gradient 实现渐变背景色

作为渐变背景色非常合适 .header-filter-gradient { background: linear-gradient(45deg, rgb(168,29,132) 0%, rgb(234,57,111) 100%); } 效果 代码 https://codepen.io/anon/pen/aKNJwz ...

阅读全文...

去掉 wordpress hestia 主题轮播图区域的背景色

hestia 主题顶部的 .header-filter 部分是一个背景图,但是被加了一层阴暗的遮罩色。经常有同事反馈说太阴暗了这个色调,不适合作为官网的主色调。 来看看 hestia 的 style.css 里的代码 .header-filter { background-image: url(https://www.sunzhongwei.com/wp-content/uploads/2018/05/meitu_1.jpg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; ...

阅读全文...

CSS 实现的水波纹效果

在 Chrome 帮助页看到的。 实现代码 img src="http://www.google.com/intl/en/chrome/assets/common/images/chrome_logo_2x.png" alt="Chrome" id="logo" style="-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb ...

阅读全文...

Bootstrap 中 .container 与 .container-fluid 的区别

二者的区别 .container 是 fixed-with, .container-fluid 是 full-width 看编译之后的 bootstrap 代码,即可一目了然 @media (min-width: 1200px) .container { width: 1170px; } @media (min-width: 992px) .container { width: 970px; } @media (min-width: 768px) .container { width: 750px; } .container { padding-right ...

阅读全文...

被滥用的 inherit

今天调样式,被 inherit 坑了一把。 这份 CSS 样式原来是这样写的 你能想到的所有标签 { font: inherit; } 然后我看了半天一段文字的样式,永远是粗体,但是我从 chrome styles 里怎么也看不出来,这个样式是怎么加上去的,从 computed 里才发现,样式来自这行全局的 font: inherit。(computed 真是神器,特别是代码不规范的情况下) 我第一感觉 inherit 被滥用了。你想,整个页面里的 font 属性都要继承祖先的样式,这算哪门子的逻辑。。。 MDN 的一个例子,就很好 /* 头变绿 */ h2 { color: green ...

阅读全文...

动起手来发现自己啥也不会系列之 z-index

开始以为只需要在 div 1, div 2 上分别设置不同的 z-index 值就可以了。没想到完全不行。 <div id="card1"> </div> <div id="card2"> </div> #card1 { z-index: 1; width: 300px; height: 300px; background-color: yellow; } #card2 { z-index: 2; width: 200px; height: 200px; background-colo ...

阅读全文...

Two-Column Layout 与 Block Formatting Context

在临摹 semantic-ui 的 feed 实现时,发现我对 Two-Column Layout 的实现并没有掌握。 这是我第一次做出来的效果 而我想要的效果是这样的 双栏布局不就是加个 float: left 这么简单么?看起来并没有这么简单,我之前用 placehold.it 图片来模拟 div float 布局,看来是忽略了很多隐藏的问题。 Google 了一下,原来只需要在右侧 div 加上 overflow: hidden 即可。 WTF,overflow: hidden 与 float 布局有什么关系 我印象中,这应该不是第一次查到这么诡异的 CSS 解决方案了。如果是之前, ...

阅读全文...

CSS Pixel V.S. Device Pixel

我一直有个疑惑: "iPhone 从 4 到 7,屏幕的清晰度有了多次质的提升, 但是,为何在 Chrome 的 Toggle Device Toolbar 中, iPhone 设备对应的像素却基本没有提升?" 今天在看 CSS The Missing Manual 的时候才明白是怎么回事? CSS 像素与物理像素并不是一回事。在 iPhone 升级换代过程中,iPhone 单位空间内的物理像素点越来越多。 而 CSS 像素与物理像素并不是 1:1 的关系, 而是 1:N 的关系,随着屏幕升级,这个 N 在不断增大。 Device Pixel 设备像素。即,物理像素。 CS ...

阅读全文...

近期节日

2019年05月20日 全国助残日
2019年05月21日 小满
2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
查看更多节日