「Luy」CSS盒子模式還是很重要的

01-28

前面的一些廢話

其實本文之後用的實例場景分析我在兩個月前就寫好了，只是最近公司的項目真的用上了，所以重溫了一邊。

可喜可賀的是，這個需求不算很大，就在上周我的Luy（讀作擼一，但是你就把它讀成擼吧，沒錯就是擼管的擼）已經能夠全面支持react-redux，react-router。我小小的用這個框架構建了這個公司的頁面（因為可以無痛切換回react所以，誰怕誰！？）

總之，Luy這個框架經過100+個commits終於來到了支持react生態的地步，文檔也會馬上跟上。

最後，擼的倉庫地址：Luy

假設，我們有一個需求，讓一個玩意兒在一個框內自由移動，工程師能夠在這個組件上設置padding，border，margin，並且，設置margin的時候，能夠控制邊框的距離，怎麼做？可能抽象了一點。上圖：

相信看過上面預覽地址的朋友一定看到了這個例子，想要做出這個在我的組件裡面相當簡單：

要完成這麼一個需求，你必須要對CSS盒子模型有一個清晰的認識，我們都知道，每一個標籤都是一個小小的方塊，如同盒子一樣，一層包著一層，這就是所謂的盒子模型。

不過巧就巧在，他媽的有兩個盒子模型的標準。

(以下把w3c簡稱wc）

WC標準盒子模型

IE盒子模型

我真是操了，為此，在一些項目中，尤其是特別要注重計算盒子邊界的項目，究其要注意這兩類瀏覽器的區別。

當然，微軟也不是豬頭三，設計IE的時候雖然另闢蹊徑，但是還是做了一些兼容，那就是在頁面的最上方加上<!DOCTYPE html>，使得所有的瀏覽器都會使用WC標準盒子模型。

在ie8中可以使用box-sizing這個css屬性去切換盒子模型，這個屬性就兩個值:

熟悉前端的同學，一秒就能寫出代碼來：

.luyBox{n width:150px;n height:150px;n /* 木有padding*/n border:1px solid black;n /* 木有margin*/n}n

我們可以看到，我們指定的150,150其實只有中間藍色區塊的大小，這就是標準的WC模型.

我們還可以觀察到的一點就是：border結束以後，margin之外的那一圈其實並不屬於元素的一部分，很多人把margin和padding搞混了，其實這兩個玩意根本不是一樣的。padding是元素內的「填充」，而margin是元素外「額外佔據的面積」.

完