CSS

2019-03-09 · 阅读 149 · 字数 102

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

阅读全文...

2019-03-09 · 阅读 136 · 字数 83

标题超出两行的部分显示为省略号 .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 的作用是，将超出指定行数的文本截断。 ...

阅读全文...

2018-12-06 · 阅读 824

例如，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 是第一个元 ...

阅读全文...

2018-11-30 · 阅读 1006

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

阅读全文...

2018-10-25 · 阅读 998

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

阅读全文...

2018-06-06 · 阅读 2099

<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; } ...

阅读全文...

2018-06-05 · 阅读 3107

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

阅读全文...

2018-05-04 · 阅读 2183

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; ...

阅读全文...

2017-06-22 · 阅读 5387

在 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 ...

阅读全文...

2017-04-06 · 阅读 7273

二者的区别 .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 ...

阅读全文...

2017-04-05 · 阅读 2985

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

阅读全文...

2017-01-17 · 阅读 2480

开始以为只需要在 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 ...

阅读全文...

2017-01-02 · 阅读 3396

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

阅读全文...

2016-12-13 · 阅读 3135

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

阅读全文...

2016-12-13 · 阅读 1661

网页设计的两个流派 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 ...

阅读全文...