CSS

2018-06-06 · 阅读 988

<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 · 阅读 1350

作为渐变背景色非常合适 .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 · 阅读 1142

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 · 阅读 3208

在 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 · 阅读 5024

二者的区别 .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 · 阅读 2174

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

阅读全文...

2017-01-17 · 阅读 1719

开始以为只需要在 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 · 阅读 2375

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

阅读全文...

2016-12-13 · 阅读 2215

我一直有个疑惑: "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 · 阅读 933

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

阅读全文...

2016-12-02 · 阅读 2215

absolute left right top bottom 绝对是指，相对网页的坐标系来说的。这是我最初的理解，后来在实战中 z-index 从精通到入门 ，发现我的理解有误。 看一下 MDN 的说明 Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow a ...

阅读全文...

2016-11-15 · 阅读 2504

CSS 冲突通常由两种情况引起 继承自不同祖先的样式 多个样式应用于同一个标签 对于第一种冲突，很好理解，nearest 祖先样式优先。 第二种冲突的实现很有趣，采用了打分机制。 一句话概括，即 tag 一分，class 十分，id 一百分，inline 一千分。得分高者胜！ 例如： p 得1分 .name p 得11分 #name p 得101分 #main #name p 得 1101分 #name .content p 得 111 分 最终 #main #name p 获胜！ 但是假设两个 style 得分一样呢？例如，.name a 与 p .name 得分均为 11, 这时哪 ...

阅读全文...

2016-11-13 · 阅读 2239

这个从名字上就很好理解，即根据属性来选择元素。 举几个例子： input[type="password"] input[type] /* 有 type 属性的 input */ 当然，也支持复杂的正则方式匹配 a[href$=".pdf"] 即，属性 href 以 .pdf 为结尾的 a 标签。 ...

阅读全文...

2016-11-13 · 阅读 2836

Pseudo-Class & Pseudo-Elements 这两个名词起的非常不友好，让人看了完全摸不着头脑。可想而知，到了国内，一定有土鳖将其翻译成“伪类”/“伪元素”。伪类。。。好吧，听上去还不如叫变态假面。 首先看一下 MDN 上的解释 A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers ...

阅读全文...

2016-11-13 · 阅读 893

目标 将博客、网站的模板剥离出来，在 wordpress / tumblr 模板市场免费开放下载，如果有一定的用户量，说明你的功力已经得到了认可。 如果改成收费，还有人愿意使用，说明你已经成为了 CSS 大师 ...

阅读全文...