CSS

分类下相关文章

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; } 文本截断效果如图: webkit-line-clamp clamp 的中文意思是,钳子,也有夹紧的意思。 line-clamp 的作用是,将超出指定行数的文本截断。 ...

阅读全文...

区域内指定 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 ...

阅读全文...

CSS Layout

网页设计的两个流派 fixed-width liquid 液体的、流式 responsive web design 则为第三个流派。针对不同屏幕尺寸采用不同的布局 (media query)。例如,PC 上使用 fixed-width, 移动设备上使用 liquid. fixed-width 常见的宽度是 960, 以便于支持 1024*768 分辨率的屏幕。 早期的 table 排版方式,相对于如今的 div 方式最大的劣势就是没法使用一套代码兼容移动设备,即,采用 liquid 方式是不可能的。 div 内部排版 padding-left & padding-top 使用 HT ...

阅读全文...

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日