由於之前一直沒有系統的看過css相關的書籍，導致自己css方面一直都是處於零散狀態。知其然，不知其所以然。所以買了《css權威指南》。雖然比較老了，但是應該也會收穫很大。
1 水平方向上
margin-left +border-left+padding-left+width+padding-right+border-right+margin-right
其中紅色的是可以設定為auto，當設定為auto時，瀏覽器會自動計算該值。基於的原則就是
外層包裹容器的width=被包裹元素的width+padding+border+margin
<div
class
="div1"
>
<
div
class
="div2"
>
div>
div>
.div1.div2那麼此時計算的width就是60px;也就是說我們固定其中任意兩個值，第三個設定為auto，那麼這個值可以被很容易的計算出來。當然如果設定margin-left:-30px;那麼此時width就會等於110px;所以我們會看見，子容易溢位了。只有margin能設定負值，padding，border（百分比也不行）都不可以
當然如果只確定乙個值，另外兩個設定auto。這裡面就有我們最常見的一句
margin:0 auto確定個寬度，然後設定個這個就不說了。
width和乙個margin（left或者right）設定為auto，另外乙個margin（right或left）設定成定值。那麼設定成auto的margin值會變成0。width就為剩餘的空間值。
如果3個都設定為auto，那麼margin都會設定成0；width會盡可能的寬。
如果3個值都是定值。例：margin-left:20px;width:20px;margin-right:20px;那麼這種情況就是過分受限，因為此時margin-left+width+margin-right並不等於父容器的width（100px），那麼會解析成margin-left:20px;width:20px;margin-right:60px;當然這是對於語言是從左向右的情況，如果是從右往左，則應該解析成margin-left:60px;width:20px;margin-right:20px;
2 垂直方向
垂直方向上 margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
紅色代表可以設定為auto值，但是我們並不能通過設定margin:auto 0;來達到垂直居中。關於垂直居中，這個已經是css中的老梗了，這裡就不再敘述了。而是會解析成0。
height值可以設定成百分比，這個值就是相對于父容器高度的百分比。比如父容器height:100px;那麼子容器設定height:10%;那麼實際高度就是10px；當然如果父容器沒有設定高度，那麼子容器此時設定百分比是沒有意義的，height是會重置為auto。
講到垂直方向的margin，那麼一定會講到margin垂直方向上重合的現象，那麼實際上這個是跟bfc的布局規則有關的，關於bfc塊級格式化上下文，我會找個時間專門來寫。那麼也就有很多種防止這種狀況的方法，但是要去理解為什麼這樣做可以，還是建議去看看bfc相關的文件。這樣才能知其所以然。包括一些清除浮動的方法，為什麼要這麼寫。後續會講到。
下面將垂直方向上，div巢狀的情況。
如果塊級正常元素的高度設定為auto，而且子元素全部為塊級元素，其預設高度是從最高子元素的外邊框邊界到最低元素的外邊框。注意這裡這是外邊框而不是外邊距，所以如果此時子元素設定了垂直方向上的margin，那麼會「超出」父容器。當然可以給父容器設定padding或者border，那麼子元素的外邊距就會被包含進來。
看下面這段**，會不會發生margin合併
<答案是會的。div
style
="width: 100px;height: 100px;background: lightblue;margin-bottom: 40px;border: 4px solid;"
>
div>
<
div
style
="width: 100px;height: 100px;background: lightcoral;margin-top: 20px;border: 4px solid;"
>
div>
其實一般所說的加上padding或者border是用於外層的父容器上的。
<這樣才是我所表達的意思，應該還是和bfc有關。div
style
="border: 4px solid;"
>
<
div
style
="width: 100px;height: 100px;background: lightblue;margin-bottom: 40px;"
>
div>
div>
<
div
style
="width: 100px;height: 100px;background: lightcoral;margin-top: 20px;border: 4px solid;"
>
div>
3 列表項
之前由於頁面重構的少，也沒有系統的學習css，問了乙個很二的問題。為什麼我把li標籤的display:inlien-block後，前面的點怎麼沒有了。哎li標籤的display預設為list-item改變了他的預設值。
有時候我們會發現前面的那個圓點好像和li不是乙個整體，看著很不爽，怎麼辦，還有下面這種情況
<ul>
<
li style
="border: 1px solid;margin-top: 100px;width: 100px;overflow: hidden;"
>djl簫氏djl簫氏djl簫氏djl簫氏
尤其是設定了overflow:hidden;那麼不論內容是否溢位，前面的點都會被隱藏，很可能我們並不希望那個點消失，怎麼辦。那就設定list-style-position:inset就行，預設是outset。
行，先寫到這裡，明天繼續。
HTTP快取 HTTP權威指南 第七章
web快取是可以自動儲存常見文件副本的http裝置。如果請求的資源在快取伺服器上已經存在副本，則為快取命中。如果請求的資源在快取伺服器上不存在副本，則為快取未命中。快取要保持副本是資源最新更新後的資源。由快取響應的請求數量佔總的請求數量的比例。提高快取命中率對降低網路時延有利。由於請求資源大小不同，...
第七章筆記
程序就是cpu未完成的工作 檢視程序的相關命令 ps a 關於當前環境的所有程序 x 與當前環境無關的所有程序 f 顯示程序從屬關係 e 顯示當前使用者環境中的所有程序 l 長列表顯示程序的詳細資訊 u 顯示程序的使用者資訊 ps ax o cpu,mem,user,group,comm,nice,...
K R學習筆記 第七章
這一章講i o。i o本來是與作業系統高度相關的內容，但是這一章，卻從標準庫的角度，介紹了如何使用i o。而把i o的一些具體實現細節留在了最後一章中。首先需要注意的是，標準庫中的許多 函式 都是巨集，比如getchar putchar tolower 等等。這樣做的目的是為了減小函式呼叫的開銷，想...