css必須知道的基本概念_css有哪些基本概念

時間：2017-07-17 15:55:09 宇民40由分享

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

　　css的基本概念

　　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}.就行了，但是在真正的做頁面時，不推薦這樣，這樣表示，所有標簽都要重置一次，這樣會大大影響渲染效率。

　　6.css選擇器的優先級

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

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

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

　　解決Css的Bug問題

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

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

　　2.排除法

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

　　3.背景邊框調試法

　　所謂的背景邊框調試法，就是把元素的邊框或背景設置成顯眼的顏色，可以讓你很好的區分開頁面結構布局，從而進行調試。可以快速的定位bug的區域是來自哪一塊。

　　4.檢查是否清除浮動

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

　　常用到的CSS代碼哪些詳解

　　邊框寬度 : border-width : 5px;

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

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

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

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