在網(wǎng)頁排版布局的時候，CSS問題，相信是每個網(wǎng)頁制作人員最頭疼的問題。下面由學(xué)習(xí)啦小編為大家整理的css的基本概念，希望大家喜歡!

　　css的基本概念

　　1.行內(nèi)元素和塊級元素

　　要想把布局運用自如，你必須理解行內(nèi)元素和塊級元素以及它們的區(qū)別;

　　塊元素(block element)表示整個一塊是從新行開始(在沒有css控制下)，其內(nèi)部可以是行內(nèi)(內(nèi)聯(lián))元素和其他塊元素,常見的塊元素如“div,h1-h5,p”。當(dāng)有了css控制以后，我們就可以改變它們的默認(rèn)布局模式，把塊元素擺放到你想要的位置上去;

　　行內(nèi)元素(inline element)，關(guān)于inline element的中文叫法，有多種內(nèi)聯(lián)元素、內(nèi)嵌元素、行內(nèi)元素、直進(jìn)式元素?；旧蠜]有統(tǒng)一的翻譯，愛怎么叫怎么叫吧，ahuing喜歡叫它行內(nèi)元素，一聽名字就知道它是在一行顯示的。行內(nèi)元素只能容納文本或者其他行內(nèi)元素，常見行內(nèi)元素 “a,span,i,b”。

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

　　2.css繼承

　　繼承顧名思義就是元素繼承父級的css屬性;繼承屬性可以減少css重復(fù)書寫的麻煩,可以繼承的屬性有“color,font,line-height”，例如，將body{color:red}，那么在不給其內(nèi)的元素再加屬性時，body內(nèi)的字體都顯示紅色;

　　3.盒子模型

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

　　4.注釋

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

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

　　不正確： /*注釋*/

　　5.css代碼屬性重置

　　HTML中標(biāo)簽的默認(rèn)樣式有一個默認(rèn)屬性值，渲染出來的效果不盡相同，我們在寫css頁面的時候，為了避免在css中重復(fù)定義它們，我們需要重置默認(rèn)樣式，以方便統(tǒng)一，從而提高開發(fā)效率，提高樣式代碼的重用，減少重復(fù)代碼，減少維護(hù)成本。在測試一段代碼時，直接寫*{margin:0;padding:0}.就行了，但是在真正的做頁面時，不推薦這樣，這樣表示，所有標(biāo)簽都要重置一次，這樣會大大影響渲染效率。

　　6.css選擇器的優(yōu)先級

　　class是設(shè)置標(biāo)簽的類，id是設(shè)置標(biāo)簽的標(biāo)識，class屬性用于指定元素屬于何種樣式的類。如樣式表可以加入.content1 { color: red; } 使用方法：class="content1";

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

　　id是一個標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，如果一個屋子有2個人同名，就會出現(xiàn)混淆,所以一個頁面相同的id只能有一個。

　　解決Css的Bug問題

　　1.檢查一下html標(biāo)簽是否閉合，單詞拼寫是否出錯

　　這一條可不可小覷啊，有時候折騰了你一天的問題可能就是在這里。而且這種錯誤對于新手來說可能會比較常有，對于做了一段時間的前端朋友可能也會有這問題。所以寫代碼時要認(rèn)真才行。我平時都是用Dreamweaver寫代碼的，所以這有個快捷方式：一般沒有閉合的標(biāo)簽，會有黃色背景高亮。檢查css拼寫是否出錯呢，Dreamweaver也有個功能，就是當(dāng)你開了代碼提示的時候，寫錯css代碼的話，他是不會出現(xiàn)代碼提示的。

　　2.排除法

　　當(dāng)我們新建了比較多的css文件的時候，需要用到排除法，逐個的去排除CSS文件，從而找到bug相對應(yīng)的文件，縮小范圍。這方法是比較常用的。

　　3.背景邊框調(diào)試法

　　所謂的背景邊框調(diào)試法，就是把元素的邊框或背景設(shè)置成顯眼的顏色，可以讓你很好的區(qū)分開頁面結(jié)構(gòu)布局，從而進(jìn)行調(diào)試?？梢钥焖俚亩ㄎ籦ug的區(qū)域是來自哪一塊。

　　4.檢查是否清除浮動

　　有很多css問題是因為容器設(shè)置了浮動，造成頁面出現(xiàn)錯位。在頁面上看上去是很恐怖的，因為跟自己想要的效果相差有時候會很大。但是不用緊張，這可能是因為沒有清除浮動造成的。清除浮動的方法有很多。

　　常用到的CSS代碼哪些詳解

　　邊框?qū)挾?: border-width : 5px;

　　上邊寬度 : border-top-width : 5px;

　　左邊寬度 : border-left-width : 5px;

　　右邊寬度 : border-right-width : 5px;

　　底邊寬度 : border-bottom-width : 5px;

　　邊框顏色 : border-color : #000000;

　　上邊顏色 : border-top-color : #000000;

　　邊框樣式 : border-style : double; 可替換 dashed; dotted; none;

　　上邊樣式 : border-top-style : solid;

　　左邊樣式 : border-left-style : inset;

　　右邊樣式 : border-right-style : ridge;

　　底邊樣式 : border-bottom-style : solid;

　　整體寬度 : width : 5px;

　　整體高度 : height : 5px;

　　溢出選項 : overflow : visible; 可替換 hidden; scroll; auto;

　　內(nèi)側(cè)邊距 : padding : 5px;

　　上內(nèi)邊距 : padding-top : 5px;

　　外側(cè)邊距 : margin : 5px;

　　上外邊距 : margin-top : 5px;

　　文字字體 : font-family : fantasy;

　　文字大小 : font-size : 12pt;

　　文字粗細(xì) : font-weight : bold;

　　文字樣式 : font-style : italic;