矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的。border設定的是自身的寬度，其長度也是隨著相應邊的長度變化而變化的。padding和border的取值是不會根據某些條件自動改變 的，一旦設定就不會發生改變。margin的取值雖然可以自動變化，但產生變化的條件一般都是空間受限。取值可以根據內容變化而變化的只有width和 height屬性，前提是width、height取值為auto。下面根據塊級和行內分開討論，並在各種情況下再根據水平方向和垂直方向分開討論。
1.塊級矩形區域中：
在水平方向上，如果width沒有設定固定值即值為auto的時候，width屬性有盡可能寬的傾向，比如若width和margin同時設定為auto，
那麼margin的值會被瀏覽器重置為0。如果為width設定了固定值，那麼它的值就是固定的了，不論是否脫離文件流是否超出了父元素的內容區。
1.當width設定為auto的時候，這種情況下width有一條原則：若該內容區在布局上下文中（父元素的內容區）則它的width會盡可能的大。若該內
容區因為正的margin的原因全部超過了布局上下文，或者padding、border大於了布局上下文的寬，那麼它的width取值是為0的，雖然
width為0，但內容還是存在的並且padding和border屬性值也都是不會改變的。但還存在一種情況，就是當padding和margin同時
存在的時候，正數的margin-right不能使元素的矩形區域離開父元素的內容區，其數值再大也無效。而正數的margin-left可以是元素的矩
形區域離開父元素的內容區。另外一條特殊性原則就是當margin為負的情況了，負數產生的效果就是把內容區穿過布局上下文並往布局上下文外側移動相應的
距離。當一側margin為負數的時候，並還存在三種可能情況：另一側margin沒有數值、另一側margin有正值、另一側marging有負值。
另一側margin沒有值的時候，width會一直延伸。另一側margin有正值的時候，根據正數的大小，以負數margin位置和正數margin位
置為內容區的兩邊，自動調整width的大小，當正數margin延伸的位置與負數margin所在的位置重合的時候，width變為0。另一側
margin有負值的時候，內容區兩邊向布局上下文外側左右延伸。
2.當width設定為固定值的時候，這種情況看起來複雜度低一些，畢竟可以自
己改變的量只剩下了margin。此時如果在內容區兩邊同時新增左右padding是不會有任何衝突的，但是若同時新增左右margin就很可能產生衝突
了。因為width是固定的，若固定一邊的margin，那麼另一邊的margin也會是固定的，但另一邊的固定的值很可能不是你設定的那個值。這時候這
個矩形區域就會受限，首先的處理方法就是有乙個優先順序，如果左右margin相互衝突，那麼優先滿足左邊的margin，如果上下margin相互衝突，
那麼優先滿足上面的margin。像固定寬度的情況下兩邊都是負數的margin，那麼元素會優先向左邊移動。還有乙個特殊用法是關於水平居中，即當左右
兩邊margin設定為auto，並且width為固定值，則該內容區域在布局上下文中水平居中。
左右負外邊距還有乙個特殊的規則，就是如果左外
邊距為負數，並且元素都超出了瀏覽器，那麼它就真的超出看不見了，不會在瀏覽器下面形成滾動條。如果右外邊距為負數，並且元素向外移動超出了瀏覽器，那麼
它是不會消失看不見的，因為會在瀏覽器下面形成滾動條。還有在正常情況下，漢字在父元素高度允許的情況下會自動換行，若父元素的高不足以容納所有漢字，並
且父元素也沒有設定over-flow屬性，那麼漢字內容就會超出父元素。而單詞要想換行的話除了父元素高度要允許，還是額外設定word-wrap和
word-break屬性。
在垂直方向上，垂直方向上的情況比水平方向上的還要複雜一些，因為margin在垂直方向上可以合併而在水平
方向上是不會合併的。垂直方向上的height屬性不會像width一樣預設情況下會盡量延展，而是會盡量雖小剛好為內容高度。這樣在height為
auto，並且父元素沒有adding和border空間的時候，最高塊級子元素和最低塊級子元素的margin範圍是不會在父元素的內容區內的，它倆
margin作用範圍和父元素的margin是一樣的（都是父元素外的margin空間），並且有合併效果。如果父元素有border或者
padding，那麼這倆空間就會阻擋最高和最低塊級子元素的margin作用範圍超出其布局上下文，並會增加父元素的height數值。還要注意若
padding或margin設定為了百分數，那麼不管垂直還是水平方向這百分數的參照都是父元素的width。在乙個布局上下文中，其中的各個塊級子元
素之間的相對位置是一定的，如果乙個子元素位置發生了變化，那麼它下面的子元素為了維持和原來一樣的相對位置也會隨著產生相應的位置變化。這在負的外邊距
情況下要特別注意，負的外邊距根據父元素的height是否為auto表現的也不是很一樣。這種不一樣主要表現在最後乙個塊級子元素上，前面說過當
margin-top的值和margin-bottom的實現衝突的時候要優先實現margin-top的值，因為塊級子元素在布局上下文中根據
margin可以自由調整位置的，所以第乙個和中間的子元素是不存在margin-top和margin-bottom衝突的情況的，唯一可以出現衝突的
情況就是最後乙個塊級子元素，因為最後乙個塊級子元素的margin-bottom是對父元素內容區的下邊界產生作用的，如果這個下邊界可變就沒有衝突，
如果這個下邊界不可變就可能會有衝突，這個下邊界可變與不可變就是父元素的height是否為auto決定的。當height為auto的時候，塊級子元
素所有的負的margin都會產生父元素變短的效果，若height為固定值，那麼最後乙個塊級子元素的margin-bottom不會有任何作用。
2.行內矩形區域中：
行內矩形區域（盒模型）就簡單一些了。首先行內矩形區域的width和height的設定是無效的，它只會根據內容的大小自動調整自己的大小。在外邊距方
面，margin的垂直設定是不會有任何效果的，因為它畢竟在行框內，margin改變不了行間距。而水平的margin是可以有相應的效果的。同樣的
padding，border的垂直設定也同樣是不會改變行間距的，因此看不出效果，除非有背景或者顏色會有一些效果，比如說會遮蓋住相鄰上下兩行的內
容，但行間距還是沒有改變的。水平設定倒是也同樣會有相應的效果。
關於CSS盒模型
在我們使用css進行網頁布局的時候，我們一定會用到的就是盒子模型，那麼盒模型是有兩個標準的，乙個是標準盒模型，乙個是ie盒模型 怪異盒模型 而在討論標準盒模型之前首先要把盒模型的寫法知道 內容屬性 屬性實際作用 width 設定內容的寬度 height 設定內容的高度 max width 設定內容的...
關於CSS盒模型（box model）
剛完過年，大家是不是都在物色新的工作機會呢？可能在面試的時候，我們大多數人都會被問到乙個問題，那就是css盒模型。這個看似簡單的問題，實際上卻不太好回答，今天我們從以下幾個方面談一談css盒模型 1 什麼是盒模型 2 標準盒模型和怪異盒模型 ie盒模型 的區別 3 我們應該如何設定和選擇盒模型 4 ...
Web前端篇 CSS盒模型
常用塊元素由 p,h1 h6,div,ul,ol,tr,li,form常用內聯元素由 a,span,em,i,strong,u,常見的內聯塊元素 上面三句 相當於一句 border 3px solid red 同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。上...