新手建站：div+css教程之基本概念及區別

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

1.行內元素和塊級元素

要想把佈局運用自如，你必須理解行內元素和塊級元素以及它們的區別;

塊元素(block element)表示整個一塊是從新行開始(在沒有css控制下)，其內部可以是行內(內聯)元素和其他塊元素,常見的塊元素如「div,h1-h5,p」。 當有了css控制以後，我們就可以改變它們的預設佈局模式，把塊元素擺放到你想要的位置上去;

行內元素(inline element)，關於inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。 基本上沒有統一的翻譯，愛怎麼叫怎麼叫吧，ahuing喜歡叫它行內元素，一聽名字就知道它是在一行顯示的。 行內元素只能容納文本或者其他行內元素，常見行內元素 「a,span,i,b」。

塊元素(block element)和行內元素(inline element)都是html規範中的概念。 而當加入了css控制以後，塊元素和內聯元素的這種屬性差異就不成為差異了，也就是說塊級元素可以成行內元素，行內元素也可以成塊級元素。 比如，我們完全可以把行內元素span加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。 而把兩個ul加上display:inline屬性，它們可以顯示在一行，遺憾的是ie6不支援，不過可以用hack解決，後序會介紹。 它們還有一個區別就是行內元素設置寬和高是不起用的，但是當將它浮動時，他就有了haslayout,就可以設置寬和高。

2.css繼承

繼承顧名思義就是元素繼承父級的css屬性;繼承屬性可以減少css重複書寫的麻煩,可以繼承的屬性有「color,font,line-height」，例如，將body{color:red}，那麼在不給其內的元素再加屬性時， body內的字體都顯示紅色;

3.盒子模型

盒子模型，是XHTML+CSS佈局頁面中的核心!對於理解後面的佈局理想很重要，對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了。 那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字叫「content(內容)」，而盒子的紙壁給他起個名字叫「border(邊框)」，如果盒子內部的東西比如是一塊硬碟， 但是硬碟怕震動，所以我們需要在硬碟的四周盒子的內部均勻填充一些防震材料，這時硬碟和盒子的邊框就有了一定的距離了，我們稱這部分距離叫「padding(內邊距)」，如果我們需要購買許多塊硬碟， 還是因為硬碟怕震動所以需要在盒子和盒子之間也需要一些防震材料來填充，那麼盒子和盒子之間的距離我們稱之為"margin(外邊距)"OK~!這下盒子模型的四要素就出來了分別是：content(內容)、border(邊框)、 padding(內邊距)、margin(外邊距)，理解「盒子模型」了沒?就是這麼點知識

4.注釋

每種語言都有自己的注釋方法，html,css也不例外，平時寫代碼時要養成注釋的好習慣，如果不注釋的話，也許當時你很清楚，但是時間久了，你肯定模糊，或者讓別人看，就很難看懂，不僅注釋，還要注釋清楚，錯誤的注釋比不注釋更糟糕。 html注釋推薦dedecms程式的注釋方法，把注釋當做一個標籤，例如， 內容 有開始，有結束;css注釋要注意的就是如果注釋裡有漢字時ie6就識別不出來，有興趣的朋友可以去測試下，解決方法就是多加幾個「*」，如下

正確：/*** 注釋 ***/

不正確： /*注釋*/

5.css代碼屬性重置

HTML中標籤的預設樣式有一個預設屬性值，渲染出來的效果不盡相同，我們在寫css頁面的時候，為了避免在css中重複定義它們，我們需要重置預設樣式，以方便統一，從而提高開發效率，提高樣式代碼的重用，減少重複代碼， 減少維護成本。 在測試一段代碼時，直接寫*{margin:0;padding:0}.就行了，但是在真正的做頁面時，不推薦這樣，這樣表示，所有標籤都要重置一次，這樣會大大影響渲染效率，下面是ahuing常用字的css重置代碼：

/*** reset -------------------------------------------------------------- ****/ body,html{color:#444;margin:0; padding:0;font:12px/24px "\5B8B\4F53",san-serif;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,select,object{margin:0; padding:0;} ul,ol,li{list-style-type:none} h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} address,cite,code,em,th,i{ font-weight:normal; font-style:normal;} img{ border:none } object,textarea,img{vertical-align: top;} /*** 相容用 ***/ a{text-decoration:none;color:#2C2C2C} a: hover{text-decoration:underline;color:#F60;}

6.css選擇器的優先順序

class是設置標籤的類，id是設置標籤的標識，class屬性用於指定元素屬於何種樣式的類。 如樣式表可以加入.content1 { color: red; } 使用方法：class="content1";

id屬性用於定義一個元素的獨特的樣式。 如一個CSS規則#content2 { font-size: 14px } 使用方法：id="content2";

id是一個標籤，用於區分不同的結構和內容，就象你的名字，如果一個屋子有2個人同名，就會出現混淆,所以一個頁面相同的id只能有一個;

class是一個樣式，可以套在任何結構和內容上，就象一件衣服，可以重複使用;

概念上說就是不一樣的：

id是先找到結構/內容，再給它定義樣式;class是先定義好一種樣式，再套給多個結構/內容。

在實際應用的時候，Class可能對文字的排版等比較有用，而ID則對宏觀佈局和設計放置各種元素較有用,ahuing在做頁面時，一般css不是id，只用class,而id留給js調用的。

ID 的優先順序要高於class,同一個標籤的class採用就近原則，離標籤最近的級別越高，頁面裡的css屬性高於css檔裡的，直接在標籤裡的屬性最高，例如：

<style>.black{background:#000}</style> <div class="black" style="background: #fff;" ></div>,

背景就會顯示白色。

本文來自HTTP://www.ahuing.com,如果需要轉帖，請注明來源 ，謝謝大家