我所瞭解的CSS

時間 2019-11-18

標籤瞭解 css 欄目 CSS 简体版

原文原文鏈接

我真的瞭解css嗎？我這樣問本身。css

個人思考和這幾天的學習來自於看了寒冬winter大神的這篇blog：談談面試與面試題。說實話，我邊看，腦殼裏面邊翻篇同樣的過着個人那點css知識，看完了，整我的都很差了。html

我以爲不是題目有多難，而是我以前從沒以爲我應該去仔細的學習和思考這些問題。因而，最近就仔細的學習了下，分析總結概括在這，也方便之後進一步的學習和更加深入的理解。css3

---------------------------------------------------------git

| 1.一些自適應或垂直水平居中問題彙總； github

| 2.Normal Flow web

| 3.Containing Block 面試

| 4.Margin Collapse 瀏覽器

| 5.BFC app

| 6.Baseline ide

| 7.Writing Mode

| 8.unicode-bidi

---------------------------------------------------------

若是你以爲本身的css水平不太過關，這裏有個簡潔明瞭的layout教程，很易學易懂，能夠先學習一下：學習CSS Layout

其實我以爲上面有些關鍵詞實際上是很是息息相關的，這裏只是分別理解下。

1、一些自適應或垂直水平居中問題

1.必備技能：水平居中

你們都知道哈，margin:0 auto;搞定：

1 #block{
2   margin: 0 auto;
3   width: 100px;
4   height: 100px;
5   background-color: yellow;
6 }

不過可要看好喔，我沒有float也沒有absolute。而後我加了下float：left;不居中了，而後我又加了position：absolute;也不居中了。那若是我有absolute要怎麼辦呢：

 1 #block{
 2   position: absolute;
 3   width: 100px;
 4   height: 100px;
 5   left: 50%;
 6   top: 50%;
 7   margin-left: -50px;
 8   margin-top: -50px;
 9   background-color: yellow;
10 }

上面的代碼在垂直方向上也居中了。

2.必備技能：文本垂直居中

div中的文字垂直居中於容器中：

 1 css：  2 #block{
 3   font-size: 12px;
 4   height: 36px;
 5   line-height: 36px;
 6   border: 2px #000 solid;
 7 }
 8 
 9 html： 10 <div id="block">
11      我是文本，我要垂直居中在容器中啦！
12  </div>

如果多行的文本，這樣就會有問題了。前兩天看到有一個多行文本垂直居中的實現，是用display:table和display:table-cell一塊兒來實現的，先看實現方法：

 1 CSS:
 2 
 3 #wrap{
 4   height: 400px;
 5   display: table;
 6 }
 7 #block{
 8   vertical-align: middle;
 9   display: table-cell;
10   font-size: 12px;
11   border: 2px #000 solid;
12   width: 500px;
13 }

原理是：CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起做用。因此經過display：table;模擬<table>而後就可使用vertical-align屬性了。

display:table要用在父元素上，display:table-cell要用到子元素上，像table佈局同樣。

1 HTML：
2 <div id="wrap">
3       <div id="block">
4          <pre>我是文本，我要垂直居中在容器中啦！
5 
6          </pre>我也是文本喔，我也要居中~~
7       </div>
8     </div>

這裏用<pre></pre>是爲了模擬多行文本。

不過要鬱悶的注意瀏覽器的兼容性：

3. 一個div裏面兩個子div，其中一個定高100px；要另外一個隨父元素適應高：

 1 CSS：
 2 #wrapper{
 3   position: relative;
 4   width: 300px;
 5   min-height: 500px;
 6   border:2px #00f solid;
 7 }
 8 #fixed{
 9   width: 300px;
10   height:100px; 
11   background-color: yellow
12 }
13 #fit{
14   position: absolute;
15   background-color: pink;
16   width: 300px;
17   top: 100px;
18   bottom: 0;
19 }

絕對定位，有了top再加上bottom：0;而後它就填充了剩下的高度。

4. css3有了很好玩的東西，我以爲有了它，不再用爲各類佈局煩惱了：flexbox-快速佈局神器

我就嘗試了一個下面這樣的簡單三列布局：

 1  2 #wrap{
 3   display: flex;
 4   flex-flow:row wrap;
 5   align-items:stretch;
 6   justify-content:space-around;
 7   width: 100%;
 8   height: 300px;
 9   border: 2px #000 solid;
10 }
11 #left{
12   flex:1 200px;
13   background-color: red;
14 }
15 #right{
16   flex:2 360px;
17   background-color: yellow;
18 }
19 #center{
20   flex:1 250px;
21   background-color: blue;
22 }

不過，仍是老問題，瀏覽器的兼容性永遠不像咱們想的那麼美好：

小結：這裏我也就列出了基本的幾個，在本身對佈局有了些理解後，通常的相似佈局應該都不會有問題，後面碰到有挑戰的有趣的我再收集過來，若是有有趣的相關的問題，但願你與我分享喔。

2、Normal Flow

這裏的normal flow（普通流）實際上爲CSS的定位機制之一，其餘兩個分別是如雷貫耳的浮動和絕對定位。

那具體什麼是普通流呢？普通流就是在多數狀況下呈如今web頁面上的方式，全部的HTML元素都在塊框（block boxes，塊級元素）或者行框（inline boxes，行內元素）中。

普通流就是這樣的過程：

1.對於塊級元素：

在對應的 block formatting context 中，塊級元素按照其在HTML中的順序，在其容器框裏從左上角開始，從上到下垂直地依次分配空間、堆砌( stack )，並獨佔一行，邊界緊貼父容器。兩相鄰元素間的距離由 margin 屬性決定，在同一個 block formatting context 中的垂直邊界將被重疊( collapse )。而且，除非建立一個新的 block formatting context ，不然塊級元素的寬度不受浮動元素的影響(這就是浮動元素能蓋在塊級元素上面的緣由)。

2.對於行內元素：

在對應的 inline formatting context 中，行內元素從容器的頂端開始，一個接一個地水平排布。水平填充、邊框和邊距對行內元素有效。但垂直的填充、邊框和空白邊不影響其高度。一個水平行中的全部 inline box 組成了名爲 line box 的矩形區域。 line box 的高度始終容下全部的 inline box ，並只與行高有關。 line box 的寬度受到父容器和浮動元素存在的影響(這就是文本環繞浮動元素)。若是 line box 的寬度小於容器， line box 的水平排布就取決於 text-align 。若是 line box 的寬度大於容器，則截斷 line box 並換行在新的 line box 中從新排布元素(截斷處不該用 padding 和 margin 值)。若是 line box 沒法截斷，如單詞過長或者指定不換行，則會溢出容器。

3.對這些 block box 和 inline box 進行相對定位，即相對於已排布的位置進行偏移。元素在其中保留原來所佔用的空間。

這有一篇文章，做者總結的很是好：CSS定位之一：普通流

3、Containing Block

containing block（包含塊），我理解就是定位參考框，與上面說的css的定位機制息息相關。元素一旦定義了定位顯示（static absolute relative）便具備了包含塊的性質，它所包含的定位元素都將以該包含塊爲座標系進行定位和調整。

舉個簡單明瞭的小例子：若是一個div定義了position:absolute;那麼他會相對於誰定位呢？他會向上尋找父元素-》父元素的父元素....直到找到一個position:relative/fixed/absolute的父元素，而後來相對於它進行對位。

包含塊的創建有它的規則：

1.根元素做爲初始包含塊，原諒後面兩句我實在翻譯不來，請戳下面手冊，自行理解；

2.對於position：relative和static的元素，他們的包含塊是由最近的塊元素祖先創建的；

3.對於position：fixed的元素，他的包含塊是由視口（viewport）創建的；

4.就像上面的小例子，position:absolute的元素他的包含塊由最近的不是position：static的祖先創建：

4.1 若是祖先是塊級元素，containing block 由祖先的 padding edge 造成。

4.2 若是祖先是內聯元素，containing block 取決於祖先的 direction 屬性。

w3c包含塊的定義：the definition of containing block

中文參考：什麼是CSS包含塊 CSS核心：包含塊

我以爲吧，既然簡單瞭解了containing block的工做原理，那麼我以爲css另外一定位機制position相關，也必須再來一遍了，張鑫旭大神的這一系列寫的蠻好，自行移步腦補：

CSS 相對|絕對(relative/absolute)定位系列（一）

CSS 相對|絕對(relative/absolute)定位系列（二）

CSS 相對|絕對(relative/absolute)定位系列（三）

CSS 相對|絕對(relative/absolute)定位系列（四）

CSS 相對|絕對(relative/absolute)定位系列（五）

4、Margin Collapse

W3C是這樣定義collapsing margins 的：‘這裏的摺疊意味着，相鄰的邊距（沒有非空內容，padding或border areas或clearance來分開他們）兩個或兩個以上的盒子（能夠是相鄰或嵌套）相結合，造成一個單一的邊緣’。簡單來講，就是：

1.垂直的兩個正margin重合，會獲得二者中較大的margin，margin較小的元素的margin值就會被collapsed爲0；

2.若是有一個margin爲負值，那麼正負相加獲得最後的值；

3.若是兩個margin都是負的，那麼絕對值較大的負值會被應用。

可是下面這些狀況就不會發生margin collapse：

n.1 浮動元素；

n.2 position：absolute的元素；

n.3 inline-block元素；

n.4 元素的overflow值設爲其餘不是可見的值的時候，他不與他的子元素髮生margin collapse；

n.5 被cleared的元素，他的top margin不與他父元素的bottom margin重疊；

n.6 根元素不發生重疊；

定義理解起來老是有點彆扭，看些實例就行了，能夠移步這裏：Collapsing margins

5、BFC

什麼是bfc呢，上面理解normal flow的時候總在說那個block formatting context，其實這就是bfc。就是說: 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。

通俗點理解，我以爲他就是塊框和行框的渲染上下文。

咱們能夠理解爲一個箱子（其實是看不見摸不着的），箱子裏面物品的擺放是不受外界的影響的。轉換爲BFC的理解則是：BFC中的元素的佈局是不受外界的影響（咱們每每利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。

仔細讀過這個 CSS定位之一：普通流應該就會理解了bfc究竟是什麼。normal flow中塊框和行框的表現還有margin collapse都跟他息息相關。

這裏有較爲容易理解的相關描述：深刻理解BFC