国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

這篇隨筆不是專程講SpringSide，卻只得每個程序員一看。

還記得胡戈調(diào)侃《無極》中的王城布局為“圈圈套圈圈”娛樂城，也還記得我剛開始做Web開發(fā)時“表格套表格”的頁面布局。在大部分的程序員中，可能還在使用表格進行布局，使用表格進行布局的巨大缺點就是當頁面進行一點點修改的時候，都有可能完全打亂頁面的外觀，而且非常不利于和美工的配合。當然了，很多美工人員也在使用表格進行布局，他們在圖形軟件中設計好頁面，然后使用切片工具一切就完事，卻給我們需要在網(wǎng)頁網(wǎng)頁中動態(tài)增加內(nèi)容的程序員帶來了麻煩。在CSS盛行的今天，我們早就該讓表格只做它的本分工作了。

網(wǎng)上也有不少使用div + css進行布局的教程，卻存在很多缺陷，一是對css的布局模型講解不清楚，讓人很難理解相對定位、浮動等概念；二是雖然避免了“表格套表格”的缺點，卻帶來了“div 套 div”的缺點，過量使用div標簽；三是class過多，造成class災難。

要正確使用css，對css的基本只是就不能夠不了解。既然是漫談，我這里就只講四個方面，最后給出xkland項目作為實例。

一、CSS中的塊模型

在CSS的定義中，有的html標簽被瀏覽器當成一個塊來顯示，比如div、table、p、ul等等，我們稱之為塊元素；有的html標簽被瀏覽器顯示在文本行之類，如a、span、font等等，我們稱之為行內(nèi)元素。行內(nèi)元素我這里就不講了，只講講塊元素的模型。

每一個塊元素都可以分為context、padding、boder和margin幾個部分，我們常說的寬和高，指的只是context的寬和高，padding代表內(nèi)容和邊框之間的填充，margin代表邊框之外的空白，如下圖：


這幾個部分都是可以通過CSS進行指定的，當然，CSS還可以控制背景，因此，我們可以通過CSS來靈活控制我們頁面的外觀。

二、CSS中的文檔流模型

所有的塊元素在html文檔中是按照它們出現(xiàn)在文檔中的先后順序排列的（當然，嵌套不在此列），每一個塊都會另起一行。如下圖：


他們對應的html如下：
為了定義他們的寬度、高度還有邊框，我們定義如下的CSS：
三、CSS中的相對定位和絕對定位模型

在文檔流中，每個塊元素都會被安排到流中的一個位置，我們可以通過CSS中的定位屬性來重新安排它的位置。定位分為相對定位和絕對定位，相對定位是相對于該塊元素在文檔流中的位置的，比如，我們可以使用相對定位把div2放到div1的右側(cè)，CSS代碼如下：
下面是效果：


可以看到一個有趣的現(xiàn)象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個空間，說明相對定位的元素是會占據(jù)文檔流空間的，這里的div2就是典型的“站著茅坑不拉屎”。

使用絕對定位也是可以把div2擺到div1的右邊的，而且絕對定位是不會占據(jù)文檔流空間的，如下圖，div1和div3之間沒有空白：


div2的CSS代碼：

絕對定位是個好東西，可以把內(nèi)容顯示到頁面上的任何位置，但是對于我們程序員來說，卻不能使用太多的絕對定位，因為使用程序動態(tài)向div中添加內(nèi)容，div的大小是不可知的，無法將每一個div的位置都定死。

四、CSS中的浮動和清除模型

在CSS中，最讓人不好理解的應該算是float和clear意義了。float可以達到這樣一個效果，就是本來應該一行一個的塊元素，如果定義了float屬性，則只要行的空間足夠，它會跑別的float元素的屁股后面，而不再會單獨占用一行，如下圖：

這里把div2和div3都定義了為浮動，代碼如下：

那什么情況下需要clear呢？這是因為float的元素和絕對定位的元素一樣，也是不占用文檔空間的，因此，如果我們把div2和div3都嵌套在div1中，并且把div2和div3都定義為浮動，那么由于它們不占用文檔空間，所以作為父元素的div1不知道自動擴展大小，以至于顯示出來div2和div3會跑到div1的外面，如下圖：


下面是它們的html代碼：
下面是它們的css代碼：
因為float的元素不占用文檔流空間，有時候被的元素還會重疊到float元素上，這里我就不舉例了。

為了解決上面的問題，就需要在float之后的元素上面使用clear，在此例中，我們在div3后面加入一個空段落，并設置其為clear，如下：
下面是新增加的空段落的CSS代碼：
效果圖：

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。