從寬高說起
從寬高說起，我們知道一個物體的大小是由長、寬、高三個方向的尺寸決定的，但是你想啊電腦顯示器是一個平面的，而不是3維，另因網頁大部分情況下只需要使用到2維，所以為了簡單在CSS中只有寬和高的設置。
有了寬和高的概念以后，就會產生另外一個問題，如果內容超出寬和高以后是該顯示還是隱藏呢？為了解決這個問題CSS提供了一個overflow屬性，它允許你對元素內容超出后做相應的處理，然而很不幸的是不少人對overflow屬性存在著誤解，比如下面這段代碼
<style>
.box{
width:200px;
}
span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="box">
<span>CSS邏輯思維</span>
</div>這段代碼的寫作者希望當span中的內容超出一行后顯示省略號，但是他卻忽略了一個事實，overflow只在當內容超出元素所設置的寬或高才會起作用，而寫作者并沒有給span設置寬度（當然也設置不了，因為它是行內元素），而又因行內元素的寬高是由內容決定的，也就是它的寬和高是自適應的，因此這段代碼是有問題的，有些人會奇怪為什么塊元素不設置寬度也可以實現文本溢出隱藏，首先你一定要明白一個道理overflow屬性只在內容超出元素所設置的寬高才可以使用，如果沒有超出哪來的溢出一說？再則CSS也不知道你需要在什么時候隱藏，它只能是在寬和高不夠了才去做處理，而塊元素之所以可以是因為它是滿足這個條件的，也就是說盡管你沒有手動去設置寬度，但是塊元素它本身就有寬度（默認父元素的寬）。
而我們再來看看行內元素
很明顯它的寬高是自適應的。
這也就是為什么行內元素無法給文本設置text-align對齊方式的原因。
再說css中的box-sizing
為什么CSS要新增box-sizing這個屬性呢？如果我們把場景切換到現實生活中，你會發現生活中，我們很少去說類似我要買一個寬200cm，高150cm，邊框8cm的顯示器，而是說寬200cm，高150cm（一般說幾寸）。
而在CSS3之前我們是無法直接去設置一個元素的寬度的，因為元素的寬度是由width + padding + border-left + border-right相加而成的，我們平時在CSS中設置的width并不是元素真正的寬，而只是內容的寬度，然而更多的時候我們是希望width是包含padding和border的，這也是為什么在CSS3中需要加box-sizing這個屬性。
這個box-sizing一出世又有些人對box-sizing存在著疑惑，為什么沒有box-sizing:margin-box;這一條？我想反問一句：你家房子外面的地盤是你家的嗎？把這句話拿到前面這個問題：margin是width的嗎？默念3遍，當然要讓width包含margin也不是不能實現，只是這種情況需求很小，而且也可以通過其他方式實現。
文章列表
留言列表
