網(wǎng)頁設(shè)計中的“內(nèi)容與表現(xiàn)分離”思想
我們以前學(xué)習(xí)ｈｔｍｌ攘烛，說魏滚，標(biāo)簽具有“表形表意”之作用。其實也可以說坟漱，內(nèi)容和其表現(xiàn)混在一起鼠次。
現(xiàn)在：
ｃｓｓ技術(shù)其實可以將一個網(wǎng)頁中的各個標(biāo)簽的表現(xiàn)都“提出來”放到一個專門的地方（比如style標(biāo)簽中），剩余的部分（標(biāo)簽和文字內(nèi)容等）被整體上稱為“結(jié)構(gòu)/內(nèi)容”芋齿。這種做法就被稱為“內(nèi)容與表現(xiàn)分離思想”
盒子的兩種初始狀態(tài)（基本表現(xiàn)）
類似ｄｉｖ的盒子：一個盒子自動“占據(jù)一行”（不管其內(nèi)部內(nèi)容多少）：這就是“塊盒子”（塊元素）腥寇。常用塊盒子：
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特點：可以設(shè)置固定的寬高，margin觅捆，padding赦役，
類似ｓｐａｎ盒子：一個盒子中的內(nèi)容會跟同類的盒子并排在一行出現(xiàn)，除非該行已滿栅炒，則會自然到下一行——類似文字的表現(xiàn)特性掂摔。：這就是行內(nèi)盒子（行內(nèi)元素）。行內(nèi)盒子通常放“最終的數(shù)據(jù)內(nèi)容”赢赊，比如文本乙漓，圖片。其他行內(nèi)盒子：
b, strong, font, i, u, a, img, input, textarea, select,
特點：寬高不能設(shè)定释移，而是由其內(nèi)容“撐出”叭披，margin和padding沒有上下方面的表現(xiàn)。
通常玩讳，行內(nèi)盒子是“小盒子”趋观，塊盒子是“大盒子”扛禽，
布局初步（原理）
所謂布局，其實是指的將網(wǎng)頁內(nèi)容以一定的方式放到合適的位置上去皱坛。
布局的基本步驟：
1编曼， 將“當(dāng)前版面”以視覺上界限明顯的方式進(jìn)行劃分若干個區(qū)塊，劃分只用兩種方式：
a) 上下結(jié)構(gòu)：此時剩辟，只要使用若干個盒子掐场，自然就是上下結(jié)構(gòu)，無需其他設(shè)置贩猎。
b) 左右結(jié)構(gòu)：此時使用若干個盒子熊户，并進(jìn)行相應(yīng)的浮動，通常的模式：
i. 2個盒子：一左一右
ii. 3個盒子：兩左一右或兩右一左吭服，或一邊倒嚷堡。
iii. 更多盒子：通常一邊倒。
浮動解釋：
浮動就像水中的氣泡艇棕，會“網(wǎng)上浮”
更形象的比喻：大家（所有標(biāo)簽）都在“地面上平鋪著”蝌戒，各自占據(jù)著一定的面積，浮動元素卻“浮”到天花板上去了沼琉，其并占據(jù)大家通常的“地面面積”北苟。
浮動除了表現(xiàn)上不跟別的元素?fù)屨嫉乇P之外，其最主要的特性（也就是破壞效果）其實是：使其父盒子失去合理高度——父盒子已經(jīng)包不住其這些浮動的內(nèi)部盒子了打瘪！這在布局中基本上是不允許的友鼻！那么我們就必須使用補充的做法來實現(xiàn)合理包含——父盒子包住子盒子。讓父盒子獲得正確有效高度的方法有３個：
１闺骚， 給父盒子設(shè)置一個固定的高度——通常設(shè)計時已知高度且不回改變的時候彩扔。
２， 給父盒子的內(nèi)部最末尾加一個清除浮動的空盒子僻爽，如下：<div style=”clear:both”></div>
３借杰， 給父盒子設(shè)置一個css屬性：overflow:hidden;
則最好總結(jié)：布局需要左右排列，左右排列需要浮動进泼，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子。
