記新遇到的小東西
1. table 寬度設置
table-layout: fixed;2. flex
flex子元素的高和父元素相同
[深入理解 Flex 佈局以及計算](http://www.codeceo.com/article/flexbox-layout-and-calculation.html)
3. felx & ellipsis
flex container 加上 `min-width: 0`
4. 當flex遇上IE——bulma IE11
- IE 不支持`.tile` 的 `min-height: min-content` ，所以不能用 `flex-basis: 0` ，改爲 `flex-basis: auto`
- IE 中 flex container 設置 `min-height` 以後，設置 `align-items: center` flex items 不會居中【解決：將 container 變爲 flex item】
[align-items, align-self not working on IE11](http://stackoverflow.com/questions/40775317/align-items-align-self-not-working-on-ie11)
- `width: 100%; //fix for IE11 text overflow`
5. button很有個性啊
button後面有a標籤，a標籤垂直方向的位置會被button影響
<button class="button" onclick="console.log(1)">漢字</button>
<a class="link" href="">我是鏈接</a>
<style type="text/css">
.button{
font-size: 30px;
}
.link{
}
</style>6. aria-hidden
無障礙系列的一個鬼東西，詳見 WAI-ARIA無障礙網頁應用屬性完全展示
7. animation-fill-mode
規定動畫在播放之前或之後，其動畫效果是否可見。
| 值 | 描述 |
|---|---|
| none | 不改變默認行爲。 |
| forwards | 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。 |
| backwards | 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 |
| both | 向前和向後填充模式都被應用。 |
8. overflow:hidden + display:inline-block moves text upwards
9. white-space: pre-wrap;
親測 IE8 下需手動禁用 CSS 再啓用才起效，可以用 js 動態添加 style 解決
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>white-space: pre-line and pre-wrap</title>
<style type="text/css">
p {width: 25em; border: 1px dotted red;}
.cl1 {white-space: pre;}
.cl2 {white-space: nowrap;}
.cl3 {white-space: normal;}
.cl4 {white-space: pre-wrap;}
.cl5 {white-space: pre-line;}
</style>
</head>
<body id="www-meyerweb-com" class="css">
<p class="cl1">
[cl1] This paragraph should show extra space where there would ordinarily not be any.
There should also be preservation of returns
as this sentence
very clearly demonstrates.
</p>
<p class="cl2">
[cl2] This paragraph should not word-wrap, no matter how long the paragraph might be or over how many lines it would ordinarily wrap, as it has been set to <code>white-space: nowrap</code> and that should have the obvious effect.
</p>
<p class="cl1">
[cl1] This paragraph should show extra space, <span class="cl3">[cl3] except in the second half</span>.
</p>
<p class="cl4">
[cl4] This paragraph should show extra space where there would ordinarily not be any. It should also wrap lines in any situation where they exceed the width of the containing element, such as with this sentence.
There should also be preservation of returns
as this sentence
very clearly demonstrates.
</p>
<p class="cl5">
[cl5] This paragraph should not show extra spaces where there would ordinarily not be any; in other words, whitespace is collapsed. It should also wrap lines in any situation where they exceed the width of the containing element, such as with this sentence.
However, there should be preservation of returns
as this sentence
very clearly demonstrates.
</p>
</body>
</html>10. 百分比計算規則
relative/-
屬性 參照 width、margin、padding【、left、right】 父width height【、top、bottom】 父height absolute
屬性 參照 padding、margin-right、left、right 父width width、other-margin 父width+padding height、top、bottom 父height+padding line-height
屬性 參照 line-height font-size transform
屬性 參照 width width+padding height height+padding
以上 width、height 均指盒模型中計算出來的，不包含 padding 的
box-sizing: border-box; 先基於以上規則計算出大小，然後再應用box-sizing: border-box;【在盒模型中width、height減去padding】
CSS 優先級
media query 不算入優先級，所以最好寫在後面，纔會起效
order of precedence in css:- Inline styles
- Embedded styles
- External styles
and selector precedence is:
- ID selector
- attribute selector
- class selector
- child selector
- adjacent sibling selector
- descendant selector
- type selector
11. 堆疊上下文
- z-index值不是auto，就會建立自己的局部堆疊上下文。【z-index:auto與z-index:0的值相等，但z-index:0會建立新的局部堆疊上下文】
- 計算規則
- auto值指當前堆疊上下文中生成的棧層次與其 父框 的層次相同
- 元素不會疊放在其堆疊上下文(即定位父級z-index爲數字值)的背景之下，但可以疊放在其內容之下；當元素沒有處於堆疊上下文中，元素不會疊放在
<body>元素的背景之下，但可以疊放在其內容之下
堆疊顯示
兼容性
- IE7定位元素的z-index的默認值是0，自動生成堆疊上下文
- 浮動元素且position是static，元素父級是relative，IE6中無論該元素父級的z-index如何設置都不起作用
- IE6下select設置z-index無效，且默認會堆疊在div上【resolve：可以利用iframe充當橋樑解決】
- CSS3下列屬性會激活堆疊上下文
1、z-index值不爲auto的flex項(父元素display:flex | inline-flex)
2、元素的透明度opacity值不等於1
3、元素的變形transform不是none
4、元素的mix-blend-mode值不是normal
5、元素的filter值不是none
7、will-change指定的屬性值爲上面的任意一個
8、元素的-webkit-overflow-scrolling設置爲touch
