1）像這樣的行內標記，定義它的margin-top和margin-bottom是無效的，除非你把它設定為塊狀元素才可以。display:block
2）對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，
3）無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的盒模型結構，我們就可以使用外邊距，內邊距，邊框，高和寬來控制的大小以及與其他物件之間的位置關係。
4）浮動是從網頁布局的角度來定義元素的顯示，而行內和塊狀屬性主要是從元素自身的性質來定其顯示的。
5）當元素沒有定義邊框時，可以把內邊距作為外邊距使用。有時候外邊距會有重疊現象的。
6）當為元素定義背景影象時，內邊距區域內可以顯示背景影象，而對外邊距區域來說，背景影象是達不到的，他永遠都是透明狀態
7）用div+css設計網頁結構時，設計師滿腦子都是網頁內容，而非內容所呈現的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會自動佔據一行，因為在他末尾附加了乙個換行符，而行內元素沒有這個特點。塊狀元素有完整的盒模型結構，可以定義寬度和高度，而行內元素沒有這個特性，無法通過高度來改變文字行的行高。
塊元素的代表標記 div
行內元素的代表標記 span ，行內標記不具備組織結構框架
9）網頁布局分為：自然布局，浮動布局， 定位布局
10）當乙個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設定高和寬。如果沒有設定，則元素會按照它所包含的內容大小來確定它的大小。
11）當元素浮動後，周邊的物件會自動環繞浮動元素周圍，形成一種環繞關係。
12）塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。
13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對或是相對元素）都會覆蓋在文件流物件之上。但是，select元素的視窗控制項還不完全支援z-index
15）在css定位布局中，一般遵循「外部相對定位，內部絕對定位」
16）在body中設定min-width:760px,可以避免布局重疊現象。
浮動模型不會與流動模型發生衝突。當元素定義為浮動布局時，它在垂直方向上應該還處於文件流中，也就是說浮動元素不會脫離正常文件流而任意的浮動，它的上邊線將與未被宣告為浮動時的位置一樣。但是在水平方向上，它的浮向邊會盡可能地靠近它的包含元素邊緣（這個邊緣是指包含元素補白的內邊沿）。例如，在上面的示例中，我們能夠看到第2個span元素雖然浮動位置有了變化，但依然處於第1個span元素後面，且靠近包含元素body的右邊緣，並隨文件流一起上下流動
（1）塊狀元素。該元素是矩形的，有自己的高度和寬度。 （2）內聯元素。和塊級元素相反，內斂元素沒有固定形狀，也沒無法設定寬度和高度。 塊元素(block element)一般是其他元素的容器元素，塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤'p"。「form"這個塊元素比較特殊，它只能用來容納其他塊元素。 如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種布局，除了頁面載入速度的差別外，沒有其他的差別。但是如果普通使用者不經意點了檢視頁面源**按鈕後，兩者所表現出來的差異就非常大了。基於良好重構理念設計的css布局頁面原始碼，至少也能讓沒有web開發經驗的普通使用者把內容快速的讀懂。從這個角度來說，css layout code應該有更好的美學體驗。 你能夠把塊容器元素div想象成乙個個box，或者如果你玩過剪貼文載的話，那就更加容易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是乙個block。然後我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報了。作為一種技術的延伸，網頁布局設計也遵循了同樣的模式。 內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文字或者其他內聯元素，常見內聯元素 「a」。 需要說明的是：inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧。另外提到內聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修復著名的ie雙倍浮動邊界問題。 塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內聯元素的這種屬性差異就不成為差異了。比如，我們完全可以把內聯元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。
塊元素(block element)
◎ address - 位址
◎ blockquote - 塊引用
◎ div - 常用塊級容易，也是css layout的主要標籤
◎ dl - 定義列表
◎ fieldset - form控制組
◎ form - 互動表單
◎ h1 - h6 大標題
◎ hr - 水平分隔線
◎ menu - 選單列表
◎ noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
◎ ol - 排序表單
◎ p - 段落
◎ pre - 格式化文字
◎ table - **
◎ ul - 非排序列表（無序列表）
塊狀元素前後元素會換行
行內元素前後元素不會換行
文件流將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.
每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.
內聯元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素.
有三種情況將使得元素脫離文件流而存在,分別是浮動,絕對定位, 固定定位. 但是在ie中浮動元素也存在於文件流中(還讓我覺得這樣很合理》<).
浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當乙個元素從正常文件流中抽出後，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間
基於文件流, 我們可以很容易理解以下的定位模式:
相對定位, 即相對於元素在文件流中位置進行偏移. 但保留原佔位.
絕對定位, 即完全脫離文件流, 相對於position屬性非static值的最近父級元素進行偏移
固定定位, 即完全脫離文件流, 相對於視區進行偏移
《css權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素
知識總結 HTML5布局之flex布局總結
一 布局幾種方式 1.靜態 自然 布局 沒有任何 float,position等 修飾的布局 2.浮動布局 float 3.定位布局 position 4.彈性布局 flex 5.柵格布局 就是把網頁的寬度分成固定的相同寬度,然後列出各種可能的組合,以便頁面在進行呈現時能夠進行快速的布局,通常12等...
html5 伸縮布局
基本概念 1 主軸 flex容器的主軸主要用來配置flex專案，預設是水平方向 2 側軸 與主軸垂直的軸稱作側軸，預設是垂直方向的 3 方向 預設主軸從左向右，側軸預設從上到下 4 主軸和側軸並不是固定不變的，通過flex direction可以互換 display flex 給父盒子加flex屬性...
知識點滴 HTML5 布局總結
布局總結 1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的...