首先要了解如下概念：
viewport，視窗大小，containing block，block formatting context，inline formatting context，dirction和unicode-bidi，display和float以及postion的三者關係，盒子模型。
一.viewport
viewport是你所看到的視窗。它有兩個重要屬性，乙個是css畫素，另乙個是裝置畫素。
裝置畫素由解析度決定，css畫素由開發者決定。
裝置畫素和css畫素的關係有
1.重疊，即1css畫素等於1裝置畫素。
2.縮小瀏覽器，乙個裝置畫素覆蓋多個css畫素。
3.放大瀏覽器，乙個css畫素覆蓋多個裝置畫素。
設定width=device-width之後，乙個css畫素會占用多個裝置畫素，從而感覺上網頁放大了。占用計算方式是，css畫素=裝置畫素/(device-width)。
二.視窗大小
瀏覽器視窗的大小，一種帶滾動條，另一種不帶滾動條。
不帶滾動條的視窗寬高獲取，document.documentelement.clientwidth和document.documentelement.clientheight。
帶滾動條的視窗寬高獲取，window.innerwidth和window.innerheight。
這些個屬性獲取到的是css畫素。因此，當使用者放大瀏覽器，乙個css畫素覆蓋多個裝置畫素，使用者能看到的css畫素變少，所以window.innerwidth會變小
三.containing block
containing block（包含塊）是，乙個元素的盒模型的定位計算所依據的矩形(box)。
如果乙個元素的』position』為』relative』或』static』，那麼其包含塊則是由最近的塊級或單元格或行內塊級元素的內容區建立。
如果乙個元素』position』為』fixed』，那麼其包含塊為當前螢幕的可視視窗。
如果乙個元素的』position』為』absolute』，那麼其包含塊則是最近的』position』為』relative』 或』absolute』或 『fixed』的祖先元素,有如下幾種情況：
->如果其祖先元素是行內元素，則包含塊取決於其祖先元素的 「direction」 特性。
->其他情況下，如果祖先元素不是行內元素，那麼包含塊的區域應該是祖先元素的內邊距邊界。
四.block formatting context
bfc主要是用來計算包含浮動元素的元素寬高。
它的觸發方式：
float:(任何值除了none)
overflow:（任何值除了visible）
display:(table-cell/table-caption/inline-block)
position:(任何值除了static/relative)
它的效果：
1.浮動元素參與高度的計算
2.與浮動元素相鄰，不覆蓋浮動元素
3.不會與它們的子元素發生外邊距摺疊
五.inline formatting context
有文字便有inline box，有inline box便有行框line boxes，有行框意味著它是在ifc裡面。
1.行框的寬高計算：
浮動的文字在行框外面，即不參與行框的寬高計算。行框的高度由文字的大小決定，寬度由包含塊containg block決定，會被浮動框隔斷哦。
2.行內框的垂直對齊
當乙個行內框的高度小於包含它的行框的高度時，在行框中垂直方向上的對齊決定於 'vertical-align' 特性。 'vertical-align' 預設值為基線( 'baseline' )對齊。
3.行內框在行框中水平方向上的對齊
取決於text-align屬性。
六.dirction和unicode-bidi
讓文字倒著來，比如"例如strong為行內元素，行內元素可能會佔多行，所以行內元素框可能由多行多個框組成。" 變成 "。成組框個多行多由能可框素元內行以所，行多佔會能可素元內行，素元內行為gnorts如例"
設定unicode-bidi: bidi-override;direction: rtl;即可
七.display和float以及postion的三者關係
1. 'display' 的值為 'none'
如果 'display' 的值為 'none'，那麼 'position' 和 'float' 不起作用。在這種情況下，元素不產生框。因此浮動和定位無效。
2. 'position' 的值是 'absolute' 或 'fixed'
否則，如果 'position' 的值是 'absolute' 或 'fixed'，框就是絕對定位的，'float' 計算後的值應該是 'none'，並且，'display' 會被按照下表設定。 框的位置將由 'top'，'right'，'bottom' 和 'left' 屬性和該框的包含塊確定。
3. 'float' 的值不是 "none"
如果 'float' 的值不是 "none"，該框浮動並且 'display' 會被按照轉換對應表設定。
總結是：浮動或絕對定位的元素，只能是塊元素或**。
八.盒子模型
盒子模型就不說了，太多書籍解釋這個。
需要注意的是
1.盒子的寬高是cotent+padding+border+margin
2.盒子的背景顏色和影象預設覆蓋到content+padding+border
3.塊級盒子兄弟的上下margin，父和第乙個子元素margin-top會發生摺疊。
草珊瑚的redux使用方式
阮大師寫入門教程能力一流。首推它的redux三篇入門文章。這三篇文章介紹了，redux的基本概念和api，非同步操作，以及如何跟react相結合。文章寫得不錯，但實踐起來還是略顯繁瑣。下面提出我自己對redux結合react使用的思考。使用ramda庫組合自定義中介軟體。這使得 更靈活和透明。非同步...
CSS基礎中的基礎
最近在家沒有電腦，沒有專案，就從b站上看了看css，方便後來學習，就做一下筆記。無意義塊狀元素標籤 無意義行內元素標籤 段落標籤 無序列表 列表項超連結標籤 標籤斜體標籤 粗體標籤 id選擇器 id 類選擇器 class 關係選擇器 div p div p div,p 偽類選擇器 hover 結構性...
珊瑚SDK的一些開發建議！
經過筆者對珊瑚sdk的使用，從開發者的角度，給想使用該服務的開發者幾個建議 1.在接入中，千萬別忽略demo，我在第一次接入有自己是老鳥的心態，直接通過文件上的函式列表直接呼叫，直接使用，可最後發現自己沒按業務流程來呼叫，相應的ui無法顯示出來，所以業務流程部分一定要利用demo 2.作為cocos...