Normal Flow文檔流
HTML 5 中已經(jīng)拋棄了「內(nèi)聯(lián)元素」的概念嫌褪，所有元素都可以通過 CSS 變成內(nèi)聯(lián)的
inline 內(nèi)聯(lián)寬高不能指定；內(nèi)聯(lián)元素的高度由 line-height 間接確定
block 塊能制定寬高；div是塊元素懈贺，注意父元素和子元素的margin會合并犀忱，高取最高值
inline-block 兩者結(jié)合，能指定寬高拜银；如果寫了display: inline-block殊鞭，margin不會合并遭垛。
不要在內(nèi)聯(lián)元素里寫塊元素！盡量別寫高度
寬度也別寫死,用min-height | min-width | 50%
大部分情況不要寫width100%
用 overflow 如果內(nèi)容超出文檔流操灿，
overflow: visible //顯示
overflow: hidden //隱藏
overflow: scroll //不用
overflow: auto //常用
CSS盒模型
它分2種锯仪，一種是content box,一種是border box。區(qū)別是content box寬度包含到 content,border box 寬度包含到 border趾盐。含border\padding\content庶喜。
border-box 好用
如何讓父元素和子元素margin不合并？
加一個padding \ 加一個border \ 加一個 overflow: hidden
box-sizing
對于新的web站點救鲤，你可能希望首先將box-sizing設(shè)置為border-box久窟，如下所示：
* { box-sizing: border-box; }
width和height屬性包括內(nèi)容，內(nèi)邊距和邊框本缠，但不包括外邊距斥扛。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。注意丹锹，填充和邊框?qū)⒃诤凶觾?nèi) , 例如,.box {width: 350px; border: 10px solid black;}導致在瀏覽器中呈現(xiàn)的寬度為350px的盒子稀颁。內(nèi)容框不能為負，并且被分配到0楣黍，使得不可能使用border-box使元素消失匾灶。
這使得處理元素大小的工作變得容易得多，并且通常消除了在布局內(nèi)容時可能遇到的許多陷阱租漂。
然而阶女，在某些情況下，你應(yīng)謹慎使用這個屬性窜锯。例如： 你正在編寫一個將由其他人使用的共享組件庫张肾，如果他們網(wǎng)站的其余部分沒有設(shè)置此值，他們可能會發(fā)現(xiàn)很難使用你的組件庫锚扎。
