網(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)前版面”以視覺上界限明顯的方式進行劃分若干個區(qū)塊猜揪，劃分只用兩種方式：
a)上下結(jié)構(gòu)：此時惭墓，只要使用若干個盒子，自然就是上下結(jié)構(gòu)而姐，無需其他設(shè)置腊凶。
b)左右結(jié)構(gòu)：此時使用若干個盒子，并進行相應(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é)：布局需要左右排列，左右排列需要浮動草姻，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子钓猬。
