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

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

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

　　css的基本概念

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

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

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

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

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

　　2.css繼承

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

　　3.盒子模型

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

　　4.注釋

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

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

　　不正確： /*注釋*/

　　5.css代碼屬性重置

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

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

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

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

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

　　解決Css的Bug問(wèn)題

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

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

　　2.排除法

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

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

　　所謂的背景邊框調(diào)試法，就是把元素的邊框或背景設(shè)置成顯眼的顏色，可以讓你很好的區(qū)分開(kāi)頁(yè)面結(jié)構(gòu)布局，從而進(jìn)行調(diào)試。可以快速的定位bug的區(qū)域是來(lái)自哪一塊。

　　4.檢查是否清除浮動(dòng)

　　有很多css問(wèn)題是因?yàn)槿萜髟O(shè)置了浮動(dòng)，造成頁(yè)面出現(xiàn)錯(cuò)位。在頁(yè)面上看上去是很恐怖的，因?yàn)楦约合胍男Ч嗖钣袝r(shí)候會(huì)很大。但是不用緊張，這可能是因?yàn)闆](méi)有清除浮動(dòng)造成的。清除浮動(dòng)的方法有很多。

　　常用到的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;