CSS Tricks

[magicdawn]

No description provided.

[magicdawn]

固定表头 https://jsfiddle.net/yt1h6sz3/

http://salzerdesign.com/test/fixedTable.html

[magicdawn]

利用
th > .thinner absolute定位

[magicdawn]

文字

https://jsfiddle.net/8ft7wos0/

white-space

• normal 默认值, 去除换行符, 合并空格
• pre, 保持原样
• nowrap, 不换行, 只有 <br /> 能起换行作用
• pre-line
• pre-wrap

word-wrap

定义如何 wrap

• break-word 可以在单词中间去 break
• normal 不截断单词，默认

text-overflow

文本超出之后如何显示，在 overflow: hidden 时才起作用。

• clip 裁剪
• ellipsis 省略号 默认

[magicdawn]

• tooltip https://jsfiddle.net/magicdawn/02r58eef/
• modal
• dropdown

[magicdawn]

BFC

http://www.html-js.com/article/1866

case1

全是float的子元素, 可以使用.clearfix去fix, 也可以去触发一个BFC, 例如 display: inline-block

拿bootstrap的btn group来说, button子元素中可能有 space 空白, 引起间距, 使用 float取消这个检举, 然后就全是 float 子元素了, .btn-group 使用 display: inline-block 消除这个

case2, position: absolute

生成了新的 block format context, 于是连同 border, 对齐在 left: 0, right: 0

[magicdawn]

CSS3 box-shadow

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

[magicdawn]

css 优先级相同

后出现再 css 文件中的，起作用。https://jsfiddle.net/magicdawn/rhL1cfp8/

[magicdawn]

盒模型

W3C的 width height都是默认是 content-box的宽高。
可以使用 box-sizing: content-box | border-box;

[magicdawn]

CSS3 selector

http://www.w3school.com.cn/cssref/css_selectors.asp

根元素

:root 即是 html 元素

状态

• :target 作为 target 被点到的时候
• :empty 内容为空的时候
• hover / active / focus
• enabled / disabled
• checked / default / intermediate (intermediate指页面打开没有选中时的状态, 大多数都不支持，书上说的)
• read-only / read-write
• selection 被选中的文字

child

1. :first-child :last-child 作为第一个 child / 最后一个 child
2. :nth-child / :nth-last-child
   • :nth-child(1) // 第一个 child
   • :nth-child(even) // 偶数, 下标从 1 开始，第一个是奇数, odd
   • :nth-child(3n + 1) // n=0... , 3n+1 = 1, 4, 7... 元素下标从1开始，即是第1个，第4个，第7个

nth-child / nth-of-type 区别

• nth-child 是它作为第几个 child
• nth-of-type 是先用选择器将所有符合条件的筛出来，然后再 nth

only-child
可以使用 first & last 实现, 因为既是 first 又是 last

selector:first-child:last-child{
  // 即是第一个 也是最后一个，即是 only
}

before & after

• content 可写 unicode字符 content: "\2713";
• content: attr(data-foo) 读取一个 attribute
• content: open-quote; 对于着
  selector{ quotes: "(" ")"; } selector:before{ content: open-quote; } selector:after{ content: close-quote; }
• content: counter(counter_varname) 做 TOC 会比较好玩。

[magicdawn]

css 两栏等高布局

http://jsfiddle.net/magicdawn/xU2LA/18/
http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

margin-bottom 负值, 效果为不占用竖直方向上的 margin, 消除 padding-bottom
更多 margin-bottom 负值
http://www.cnblogs.com/xiaohuochai/p/5314289.html

[magicdawn]

flex 问题

absolute in flex

flex 的 absolute child, 没有因为 align-items 居中, only safari

https://stackoverflow.com/questions/44418175/how-to-center-absolutely-positioned-children-of-a-flex-container-in-safari

flex-grow

flex-grow是剩余空间去 grow, 例如 https://jsfiddle.net/magicdawn/6s5ktb67/2/
one & three 的空白空间一样宽, 但是 one 和 three 宽度不一样

[magicdawn]

ripple

https://jsfiddle.net/magicdawn/7wrqLhke/

注意点:

• animation-timing-function 默认值是 ease, 改成 linear 能方便根据时间预测位置

starts slowly, accelerates in the middle, and slows down at the end.

简而言之就是: 慢-快-慢

[magicdawn]

css stacking context

• https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
• https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index

新建 stack context

css 2

• el: el.position = relative / absolute / fixed(部分浏览器) && el.z-index !== auto

css3
...

[magicdawn]

overscroll-behavior

• https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
• https://segmentfault.com/a/1190000012014962

取值

• auto 默认值, 有默认的 scroll overflow behavior, 不阻止 scroll chain
• contain: 有默认的 scroll overflow behavior, 阻止 scroll chain
• none: 没有默认的 scroll overflow behavior, 阻止 scroll chain

overscroll-anchor

virtuoso 的 item 会加上 overscroll-anchor: none.

问题: 对于 先图后文字的页面, 打开时已经滚动到文字, 开始阅读, 后面图片加载, 导致滚动跳动.
浏览器为了解决这个问题, 默认会有 overscroll-anchor: auto. 不让他跳动.
overscroll-anchor: none opt out 这个功能.

[magicdawn]

height

min-height > max-height > height

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

max-height overrides height, but min-height overrides max-height.