css技巧如何提升

展開全部 首先我們需要清楚，瀏覽器是如何讀取選擇器，以識別樣式，并將相應的樣式附于對應的HTML元素，達到美化頁面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中說過“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行”。比如說： div.nav ul li a 上面的實例來說，瀏覽器首先會嘗試在你的HTML標簽中尋找“a”元素，接著在匹配“l(fā)i和ul”，最后在去匹配“div.nav”。這就是前成所主的“選擇器從右到左的原則”。 選擇器的最后一部分，也就是選擇器的最右邊（在這個例子中就是a[title]部分）部分被稱為“關鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。 老版本的瀏覽器可以過濾掉不匹配的選擇器，而直接匹配更高效的選擇器。記得David Hyatt在《Writing efficient CSS for use in the Mozilla UI》說過：“這個關鍵選擇器可以大大提高選擇器的性能，少檢查一個給定的元素規(guī)則，就可以更有效的將樣式匹配給對應的HTML元素。”那么如何讓關鍵選擇器更有效，性能化更高呢？其實很簡單，主要把握一點“越具體的關鍵選擇器，其性能越高” 那么什么樣類型的選擇器，其性能高？什么樣的類型的選擇器性能低呢？下面我們就針對兩個問題來展開具體的學習。 CSS選擇器的效率 如果你閱讀了本站的有關于選擇器類型的介紹的話，你對選擇器并不會感到陌生。就算你沒讀過，我想CSS選擇器不會讓我們覺得是新東西，比如我們常用的基本選擇器“元素標簽選擇器div”、“id選擇器#header”、“類選擇器.class”，或者說我們很少見的偽類選擇器“:focus”以及更復雜的css3選擇器“:nth-child”等等。 選擇器有一個固有的效率，我們來看Steve Souders給排的一個順序： id選擇器（#myid）類選擇器（.myclassname）標簽選擇器（div,h1,p）相鄰選擇器（h1+p）子選擇器（ul li）后代選擇器（li a）通配符選擇器（*）屬性選擇器（a[rel="external"]）偽類選擇器（a:hover,li:nth-child） 上面九種選擇器的效率是從高到低排下來的，基中ID選擇器的效率是最高，而偽類選擇器的效率則是最底。詳細的介紹大家還可以點擊Writing efficient CSS selectors。 綜合上面的順序，我們清楚的知道，id和類名用于關鍵選擇器上效率是最高的，而CSS3的仿偽類和屬性選擇器，雖然使用方便，但其效率卻是最低的。我們下面一起來看幾個實例的對比： div #myid 效率要比下面的高： #myid div 第一種選擇器比第二種選擇器效率高，大家或許會問為什么？其實根據(jù)前面所介紹的我們就不難理解了，因為第一個選擇器的“關鍵選擇器”使用了 “ID選擇器”，而第二個選擇器的“關鍵選擇器”使用的是“標簽選擇器”，對比下來，“ID選擇器”效率高過“標簽選擇器”，所以說第一個選擇器的效率要高于第二個選擇器。 在類名或ID名前面加上標簽也會致使選擇器效率變低的，比如說： div #myid 上面兩個選擇的效率要高于下面的選擇器： p#mydiv p.myclassname 來自Mozilla的幾點建議 David在《Use efficient CSS selectors》中介紹了幾種書寫高效率的CSS選擇器的方法，下面我將他們移到這里來讓大家參考： 寫道 1 避免普遍規(guī)則 2 不要在ID選擇器前加標簽名或類名 3 不要在類名選擇器前加標簽名 4 盡可能使用具體的類別 5 避免使用后代選擇器 6 標簽分類規(guī)則中不應該包含一個子選擇器 7 子選擇器的問題 8 借助相關繼承關系 9 使用范圍內的樣式表 如果你不夠清楚上面所講的是什么，你可以點擊這里，他會讓你更容易了解這些規(guī)則。 我們應該怎么做 前面說“ID選擇器”的效率是最高的，那么今天我們寫樣式，為了提高選擇器的效率，是不是我們要在每一個文檔的HTML元素中都加入ID名呢？我想這樣的做法是沒有的。對于一個有語義的代碼編寫和如何提高性能，以前他們之間如何的平衡？其實這個選擇器的效率低一點，對于大多數(shù)網(wǎng)站來說并不會有太大的影響，但對于一個大型的網(wǎng)站，產(chǎn)生大量的流量這就會有差別了，也就很值得我們去對他進行優(yōu)化。那么我們就很有必要的去了解他們是如何工作，比如說，一般情況下哪些選擇器的使用效率更高。來看兩個簡單的例子： #myid 上面的選擇器高于下面的： p#myid 后者的寫法我發(fā)現(xiàn)還是有很多朋友這樣寫，但我不知道你為什么需要在ID前面加一個標簽？難道你同一個頁面會有多個相同的ID不成？ 我們接下來在來看一個實例，用于列表上的，比如說我們制作導航菜單的： #nav a 高效于： #nav li a 上面只是介紹了兩個常碰到的實例，在這里說這兩個實例，主要目的是讓你在今后的編寫樣式時，能注意這方面的的細節(jié)，從而加快你的代碼效率。

網(wǎng)站設計制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺管理系統(tǒng)；成都網(wǎng)站制作、成都網(wǎng)站設計收費合理；免費進行網(wǎng)站備案等企業(yè)網(wǎng)站建設一條龍服務.我們是一家持續(xù)穩(wěn)定運營了十多年的成都創(chuàng)新互聯(lián)公司網(wǎng)站建設公司。

css的基本語法

css的基本語法

cascading stylesheet(級聯(lián)樣式表)。為網(wǎng)頁提供外觀（也就是，網(wǎng)頁的表現(xiàn)形式）。將網(wǎng)頁的外觀寫在一個css文件里，方便頁面代碼的維護（將表現(xiàn)與數(shù)據(jù)分離）。為方便大家學習css，我為大家分享css的基本語法如下：

css的基本語法

選擇器{

屬性1:屬性值1;

屬性n:屬性值n;

符合選擇器要求的標記，會添加對應的樣式。

Chrome瀏覽器為SVG和CSS添加GPU加速功能

互聯(lián)網(wǎng)有消息透露，谷歌正在為Chrome瀏覽器增加新的GPU加速功能。Chrome18瀏覽器將內建開關選項，讓消費者選擇使用GPU硬件加速基于矢量的SVG圖形和CSS過濾器，讓Chrome瀏覽器在未來網(wǎng)頁顯示上獲得突破性速度，并且達成驚人的視覺效果。

Chrome瀏覽器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系統(tǒng)，但目前這個功能仍然主要是實驗性質，因為只有幾個少數(shù)網(wǎng)站部署了SVG和CSSGPU加速。

但也有信息表示，tomshardware測試發(fā)現(xiàn)Chrome這項功能在顯示目前網(wǎng)頁方面，顯示速度并沒有出現(xiàn)任何顯著增加，在WebVizHTML5基準測試當中出現(xiàn)了不穩(wěn)定和崩潰問題。

評論表示，雖然SVG和CSSGPU加速還有待完善，但是Mozilla火狐、微軟IE和其他版本瀏覽器之間的競爭，肯定會推動這種技術快速發(fā)展和完善。

設置容器中的內容垂直居中css代碼

如實例1設置網(wǎng)頁整體居中的代碼中內容是居容器的頂部的，而在表格布局時默認是垂直居中的，當我們需要垂直居中的時候該怎么辦呢？別害怕，跟我來，也是比較簡單的，只用設置容器內的行高就行了。

line-height:500px;

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/

title標準之路;/title

style

#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}

/style

/head

bodypid="layout"標準之路 /p

/body

/html

提示：可以先修改部分代碼后再運行

這是一種方法，另外和種方法就是設置的`它內邊距padding了，自己可以試試喲～～

CSS對不同瀏覽器的兼容性解決辦法

CSS 對不同瀏覽器的兼容性解決辦法由于CSS 在不同瀏覽器中存在兼容性問題，所以在使用 p+CSS 布局中，可能導致相同的內容在不同瀏覽器中出現(xiàn)不同的顯示效果，為了解決這些方面的問題，以下針對CSS 某些屬性的用法提出相應的一些解決辦法。 1、頁面居中問題在IE 瀏覽器下，可以通過定義CSS 樣式body {text- align: center;}來實現(xiàn)頁面居中，但在FireFox（以下簡寫為FF）瀏覽器下此屬性就失效了。解決辦法：使用"margin- left: auto; margin- right : auto; " 、padding 屬性在不同瀏覽器的顯示問題當給p 設置padding 屬性后，在FF 瀏覽器中會導致 width 和height 增加(p 的實際寬度=p 寬+Padding), 但在 IE 瀏覽器中width 和height 不會增加，這就導致相同的內容在不同瀏覽器中出現(xiàn)不同的顯示效果。解決辦法：給p 設定IE、FF 兩個寬度，在IE 的寬度前加上IE 特有標記" * " 號。例如： #pwidth{ padding:5px; width:100px; *width:110px; } 3、奇怪的間隙問題有的時候我們明明設好了高度，可在IE6 上卻看見一些奇怪的間隙。解決辦法：試試在有空隙的p 上加上"font- size:0px;" 4、關于手形光標要將頁面內容的光標顯示為手形，通常的做法是使CSS 屬性cursor: hand; 但這于做法只適用于IE. 解決辦法：cursor: pointer; 5、浮動在IE6 產(chǎn)生雙倍距離問題例如： #box{ float:left; width:100px; margin:0 0 0 100px; } 這種情況之下IE6 會產(chǎn)生200px 的距離。解決辦法：在以上屬性的基礎上，加上display:inline，使浮動忽略。6、UL 和FORM標簽的padding 與margin ul 標簽在FF 中默認是有padding 值的, 而在IE 中只有 margin 默認有值。FORM標簽在IE 中,將會自動margin 一些邊距,而在FF 中margin 則是0；解決辦法：css 中首先都使用這樣的樣式ul,form{margin:0; padding:0;}。 7、截字省略號 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 這個CSS 是定義當內容溢出寬度后會自行的截掉超出部分的文字，并以省略號結尾，但注意Firefox 并不支持。

p+CSS 網(wǎng)頁布局的分類

p+CSS 網(wǎng)頁布局的分類1、一列固定寬度一列布局是所有布局的基礎，也是最簡單的布局方式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列固定寬度CSS 代碼： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 2、一列自適應寬度自適應的布局能夠根據(jù)瀏覽器窗口的大小自動改變其寬度和高度值，是網(wǎng)頁設計中一種非常靈活的布局形式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列自適應寬度CSS 代碼： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 3、一列固定寬度居中頁面整體居中是網(wǎng)頁布局中最常見到形式，在傳統(tǒng)的表格布局中，使用TABLE 的align="center" 屬性來實現(xiàn)，在p+CSS 布局中采用如下代碼來實現(xiàn)：XHTML 代碼： 一列自適應寬度CSS 代碼： p+CSS 網(wǎng)頁布局方法探析。如今的網(wǎng)頁設計考慮得更多的是搜索引擎以及給用戶帶來更多的便利，傳統(tǒng)的TABLE 網(wǎng)頁布局由于其龐大的HTML 代碼，使得其在搜索引擎方面顯得有些無能為力，而用p+CSS 進行網(wǎng)頁布局具有代碼精簡的優(yōu)點使得其在這方面又體現(xiàn)出更多的優(yōu)勢。但是又由于CSS 對不同瀏覽器存在兼容性問題，所以對于初學者來說，在使用p+CSS 進行網(wǎng)頁布局過程中可能會遇到各種問題，本文就給大家探討幾點p+CSS 布局的技巧。4、二列固定寬度在有一列固定寬度布局的基礎上，實現(xiàn)二列固定寬度也就很簡單了，用p+CSS 布局的代碼如下：XHTML 代碼： 左側右側CSS 代碼： #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 5、二列固定寬度居中從一列固定寬度居中的布局方法中，我們就不難完成二列固定寬度居中了，可以使用一個居中的p 作為容器，將二列分欄的p 放置在容器中，從而就實現(xiàn)二列的居中顯示。 p+CSS 的代碼如下： XHTML 代碼： 左側右側CSS 代碼： #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 這里僅列舉了一列、二列的布局方式，實際上三列、四列等多列的布局方式也和二列的布局方式的實現(xiàn)方法是一樣的。事實上不管多么復雜的頁面設計，在p+CSS 網(wǎng)頁布局中，均是以p 為基礎，通過一列、二列、三列這些基礎的布局方式的相互組合與嵌套來實現(xiàn)復雜的布局。

p+CSS網(wǎng)頁布局技巧：設置網(wǎng)頁整體居中的css代碼

以前用表格布局時設置網(wǎng)頁居中非常方便，把表格對齊方式設置為居中就行了，就這么簡單，現(xiàn)在呢，用p+CSS樣式表控制，好像不是那么容易了，其實也很簡單，只不過方式不同而已。

style

#layout { width:778px; margin:0 auto; text-align:center;}

/style

p id="layout"標準之路;/p

請看這段代碼，寬度為適合800×600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設置為0，左右設為自動。這樣它就居中了。

那么可能你要問了，text-align:center;為什么還要讓內容居中呢？呵呵，別著急，這句是為了適應IE6以下版本的瀏覽器而加的，IE6以下對margin:0 auto;不能解析為居中，所以用這種方式來補救，以下在設計內容時再用 text-align:left;就可以了。

注：margin和padding的值的順序為順時針上右下左，如margin:1px 2px 3px 4px;還可以縮寫為上下、左右，如本例，如果為margin:0px;則是各邊都為0

提示：可以先修改部分代碼后再運行

;

CSS面試須知，哪些需要掌握得CSS技巧

主要都圍繞知識點的理解與css兼容性問題上，請參考下面的

2.1 link和@import都可以為頁面引入CSS文件，其區(qū)別是？

將樣式定義在單獨的.css的文件里，link和@import都可以在html頁面引入css文件。有l(wèi)ink和@import兩種方式，導入方式如下：

link方式：link rel=”stylesheet” type=”text/css” href=”aa.css”

@import方式：style type=”text/css”@import “aa.css”;/style

link和@import兩種導入css文件的區(qū)別：

祖先的差別。Link屬于XHTML標簽，而@import完全是CSS提供的一種方式。Link標簽除了可以加載CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能加載css了。

加載順序的差別。當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網(wǎng)速慢時更為明顯。

兼容性的差別。由于@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。

使用DOM控制樣式時的差別。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。

@Import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表。

2.2 如何理解CSS樣式表的層疊性？

CSS使用層疊的原則來考慮繼承、層疊次序和優(yōu)先級等重要特征，從而判斷相互沖突的規(guī)則中哪個規(guī)則應該起作用。

繼承性是指，許多CSS的樣式規(guī)則不但影響選擇器所定義的元素，而且會被這些元素的后代繼承。

層疊性是指，當一個web頁面使用多個樣式表，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式?jīng)]有沖突的時候，瀏覽器會顯示所有的樣式。

優(yōu)先級是指，當發(fā)生樣式定義沖突時，瀏覽器首先會按照不同樣式規(guī)則的優(yōu)先級來應用樣式。CSS樣式的優(yōu)先級如下所示（其中數(shù)字3擁有最高的優(yōu)先權）：

1.瀏覽器缺省設置；

2.外部樣式表（.css文件）或者內部樣式表（位于head元素內部）；

3.內聯(lián)樣式（作為某個元素的style屬性的值）。

同等優(yōu)先級下，以最后定義的樣式為準，important比內聯(lián)高。

2.3 哪些屬性可以繼承？

Css中可以繼承的屬性如下：

文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；

列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；

表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；

其他屬性：Cursor、visibility；

2.4 CSS選擇器中，元素選擇器和類選擇器的區(qū)別是什么？

元素選擇器是常見的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個HTML元素，比如p、h1、em、a等，甚至可以是html元素本身。

類選擇器用于將樣式規(guī)則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時，首先要定義樣式類，其語法為：

.className{ }；

所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設置為”className”，則可以將類選擇器的樣式與元素關聯(lián)。

在實際使用時，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。

2.5 簡要描述CSS中的定位機制

CSS中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。

浮動定位是將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內。

相對定位將元素相對于它在普通流中的位置進行定位。

絕對定位是指將元素的內容從普通流中完全移除，并且可以使用偏移屬性來固定該元素的位置。

固定定位是指將元素的內容固定在頁面的某個位置。

2.6 display屬性和 visibility屬性的區(qū)別？

可以使用display屬性定義建立布局是元素生成的顯示框類型。

1.如果將display屬性設置為block，可以讓行內元素表現(xiàn)得像塊級元素一樣；

2.如果將display屬性設置為inline，可以讓塊級元素表現(xiàn)得像內聯(lián)元素一樣；

3.可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不在顯示，不占用文檔中的空間。

在DIV設計中，室友display:none屬性后，HTML元素（對象）的寬度。高度等各種

屬性都將”丟失”；而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

2.7 簡述對CSS的盒子模型的理解？

CSS盒子模型也叫做框模型，具備內容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個元素都被視為一個框，而每個框都有三個屬性：

border：元素的邊框（可能不可見），用于將框的邊緣與其他框分開；

margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白；

padding：內邊距，表示框內容和邊框之間的空間。

盒子模型的結構如圖所示：

由上圖可以看出，width和height指的是內容區(qū)域的寬度和高度。增加內邊距、外邊距和邊框不會影響到內容區(qū)域的尺寸，但會增加元素框的總尺寸。

因此，如果在一個具有邊框的元素中放置文本，往往需要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便于閱讀。而外邊距則可以在多個元素框之間創(chuàng)建空白，避免這些框都擠在一起。因此，在設計頁面時，經(jīng)常會使用padding屬性和margin屬性來設置頁面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設置了元素的邊距以后，會增加元素在頁面布局中所占的面積。

2.8 簡述CSS3中的偽類選擇器？

CSS3提供了大量偽類選擇器，瀏覽器對于有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：

目標偽類：即 :target，突出顯示活動的HTML錨，用于選取當前活動的目標元素；

元素狀態(tài)偽類：比如 :enabled、:disabled、:checked；

結構偽類： 比如 :first-child、:last-child、:empty、:only-child；

否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個元素。

2.9 為什么建議設置背景圖像的同時還設置背景顏色？

一般建議在使用背景圖片的同時提供background-color屬性，并且將其設置為和圖像主要顏色類似的顏色。這樣，如果正在加載頁面，或者因為各種原因無法顯示背景圖像時，頁面可以使用這種顏色作為背景色。

2.10 如何居中div？如何居中一個浮動元素？

給div設置一個寬度，然后設置元素的左右外邊距為auto，比如，margin:0 auto。則可以實現(xiàn)div居中顯示。

對于浮動元素，設置其左右外邊距為關鍵字auto是無效的。此時，如果需要設置其居中顯示，可以：1.精確計算其左外邊距并進行設置，實現(xiàn)居中顯示。

2.使用一個居中顯示的div元素包含次浮動元素,

代碼如：div style=”margin:0 auto;”div style=”float:left;”/div/div

2.11 在設置文本的字體時，為什么建議設置替換字體？

可以使用font-family屬性來指定文本的字體，代碼如下所示：font-family:name/inherit;

此時，name為首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。

但是，如果用戶機器上并沒有安裝name所指定的字體，則會顯示默認字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會影響頁面的布局，就可以解決問題了。

我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體替代默認字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器才會使用默認字體顯示頁面。代碼如下所示：

h1{font-family:Georgia,serif;}

此時，如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對h1元素使用Times。盡管Times與Georgia并不完全匹配，但至少足夠接近。

因此，我們建議在所有font-family規(guī)則中都提供一個通用字體系列。這樣就提供了一條后路，在用戶機器無法提供與規(guī)則匹配的特定字體時，就可以選擇一個通用字體作為替換。

2.12 內聯(lián)元素可以實現(xiàn)浮動嗎？

在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。因此，對于內聯(lián)元素，如果設置為浮動，會產(chǎn)生和塊級框相同的效果。

2.13 什么情況下需要額外設置表格的顯示規(guī)則？

默認情況下（不額外設置表格的顯示規(guī)則時），表格按照自動表格布局進行顯示，即瀏覽器在顯示表之前查看每一個單元格，然后基于所有格的設置計算表單大小，而列的寬度是由列段元個中沒有折行的最寬的內容設定的。此時，單元格的大小會適應內容的大小。

自動表格布局的算法在表格復雜時會比較慢，這是由于它需要在確定最終的布局之前訪問表格中多有的內容。在不能提前確定每一列的大小時，這種方式會非常適用。

如果額外設置表格的顯示規(guī)則，即設置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決于表格寬度，列寬度，表格邊框寬度，單元格間距，而與單元格的內容無關。瀏覽器將使用某列指定的寬度來計算布局，并使用該寬度計算該列中所有其他單元格的寬度。

固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。因為如果指定使用固定表格布局，瀏覽器在接收到第一行后就可以顯示表格。如果表格龐大且已經(jīng)指定了大小，則會加速表的顯示。

2.14 簡要描述CSS中content屬性的作用

content屬性與:before及:after偽元素配合使用，來插入生成內容，可以在元素之前或之后放置生成的內容。可以插入文本、圖像、引號，并可以結合計數(shù)器為頁面元素插入編號。比如，查看如下代碼：

body {counter-reset:chapter;}

h1:before { content:”第”counter(chapter)”章”;}

h1 { counter-increment:chapter;}

使用content屬性，并結合:before選擇器和計數(shù)器counter，可以在每個h1元素前插入新的內容。

2.15 CSS Sprite是什么，談談這個技術的優(yōu)缺點

CSS Sprite是一種網(wǎng)頁圖片應用處理方式，就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的組合進行背景定位。

其優(yōu)點在于：①減少網(wǎng)頁的http請求，提高性能，這也是CSS Sprite最大的優(yōu)點，

也是其被廣泛傳播和應用的主要原因；

②減少圖片的字節(jié)，多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和；

③較少了命名困擾，只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高制作效率；

④更換風格方便。只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風格就可以改變，維護起來更加方便；

但是CSS Sprite也存在一些不可忽視的缺點：

①圖片合成比較麻煩；

②背景設置時，需要得到每一個背景單元的精確位置；

③維護合成圖片時，最好只是向下加圖片，而不是更改已有圖片。

2.16 對CSS3有了解嗎？列舉幾個CSS3的新特性并簡要描述

CSS3作為CSS技術的升級版本，著力于模塊化發(fā)展，將規(guī)范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；并加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄布局、2D/3D轉換、動畫等。

其中，CSS3提供了一些復雜選擇器，用于實現(xiàn)頁面復雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用于為元素設置漸變效果的背景；轉換可以實現(xiàn)元素的變換，比如位移、縮放、旋轉等；過渡可以實現(xiàn)簡單的動畫效果；動畫屬性則可以實現(xiàn)復雜的動畫，可以實現(xiàn)逐幀制作動畫。

2.17 過渡與動畫的區(qū)別是什么？

過渡屬性transition可以在一定的事件內實現(xiàn)元素的狀態(tài)過渡為最終狀態(tài)，用于模擬一種過渡動畫效果，但是功能有限，只能用于制作簡單的動畫效果；

動畫屬性animation可以制作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以制作更為復雜的動畫。

2.18 什么是CSS reset？

CSS reset，又叫做CSS重寫或者CSS重置，用于改寫HTML標簽的默認樣式。

有些HTML標簽在瀏覽器里有默認的樣式，例如p標簽有上下邊距，li標簽有列表標識符號等。這些默認樣式在不同瀏覽器之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現(xiàn)的，而Firefox下，它的縮進是由padding實現(xiàn)的。著必然會帶來瀏覽器兼容問題。

因此，在CSS代碼中，可以使用CSS代碼去掉這些默認樣式，即重新定義標簽樣式，從而覆蓋瀏覽器的CSS默認屬性，即CSS reset。

需要注意的是，在進行樣式重寫時，不建議使用 * 選擇器進行重寫，這樣會降低效率，影響性能。

2.19 如何清除浮動元素所帶來的影響？

浮動定位是指將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以元素浮動之后，其原有位置不再保留，其他元素的位置會受到影響。

如果需要清除左側或者右側浮動元素帶來的影響，則可以使用clear屬性來設置。另外，包含框呃逆的子元素浮動后，如果包含框沒有設置具體的高度，則其高度會發(fā)生變化，此時，可以使用overflow屬性來清除子元素浮動后帶來的影響。

2.20 談談你對瀏覽器兼容性問題的理解

瀏覽器的類型及版本的不同會造成CSS效果不盡相同，因此需要實現(xiàn)瀏覽器兼容，也可以針對不同的瀏覽器編寫不同的CSS。

目前，各主流瀏覽器的新版本，對應W3C的標準支持很好，因此，首先保證代碼符合W3C的標準，這是解決瀏覽器兼容問題的前提。

其次，對于某些支持受限的屬性，針對不同的瀏覽器添加相應的前綴，比如-webkit-、-o-、-moz-。

第三，對于IE的低版本，可以編寫帶有特定前綴的代碼，實現(xiàn)版本識別。比如：

.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#f1ee18\9;/*IE6 7 8識別*/

+background-color:#f1ee18;/*IE6 7識別*/

_background-color:#f1ee18;/*IE6識別*/

}

另外，對于特定的兼容性問題，特殊解決。常見的特殊問題有：

1.使用CSS reset：對于有些HTML標簽，瀏覽器默認的margin和padding不同，可以使用CSS代碼改寫默認的樣式效果，從而實現(xiàn)統(tǒng)一

2.IE低版本中，不能使用auto關鍵字實現(xiàn)塊級元素居中顯示，可以改用設置父元素的text-align；

3.子元素設置上外邊距時，父元素需要設置邊框或者外邊距；

4.外邊距合并問題。

怎么讓CSS樣式表優(yōu)化簡單

CSS簡寫就是指將多行的CSS屬性聲明化成一行，又稱為CSS代碼優(yōu)化。CSS簡寫的最大好處就是能夠顯著減少CSS文件的大小，其實還有很多其他益 處。臃腫而雜亂的CSS樣式表會使你遇到問題是難以調試。尤其是當一個團隊在進行設計的時候，你的臃腫的CSS代碼會使你的團隊其他成員的工作效率下降。

今天，整理了一些CSS簡寫技巧，它們其實是CSS最常用的寫法，但是太多的人使用Dreamweaver這種所見即所得軟件來編寫CSS，使得代碼過 于臃腫。不過沒關系，看過本文之后，你一能能掌握CSS代碼優(yōu)化的技巧，今后讓你的每一個CSS樣式表都看起來整潔而簡短吧。

屬性值為0

書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會這樣寫:

padding:10px5px0px0px;

試試這樣吧:

padding:10px5px00;

移除選擇器

選擇器是你在為一些元素應用CSS樣式時的基本方法，比如h1,h2,h2,div,strong,pre,ul,ol等等…如果你使用了class(.類名)或ID(#id名),那么就不用再在聲明CSS時包含選擇器了。

div#logowrap

嘗試扔掉多余的選擇器吧:

#logowrap

在這個例子中所謂的那個選擇器就是div

*總愛和你開玩笑

要明智的使用*而避免它在整個CSS樣式表中亂開玩笑，*是個通配符，你可以使用它來為你的設計部分或全部進行一系列CSS聲明。例如:

*{

margin:0;

}

這個聲明會將所有元素的margin值設置為0，同樣的，為了嚴謹起見，你可以嘗試這樣設置:

#menu*{

margin:0;

}

這樣的聲明是指將#menu下的所有元素的margin設為0。

背景

背景(background)屬性可能會包含設置背景色、背景圖、背景圖的位置和背景圖重復方式的參數(shù)，你可能會寫成:

background-image:url(”logo.png”);

background-position:topcenter;

background-repeat:no-repeat;

其實可以寫成:

background:url(logo.png)no-repeattopcenter;

顏色

顏色(color)屬性在CSS通常指定為一個十六進制的值,一個#加6位數(shù)，他的簡寫方式是如果顏色值由成對兒出現(xiàn)的三對而數(shù)字組成，你可以省略掉沒對中的一個數(shù)字。

#000000可以寫成#000,#336699可以寫成#369

這種簡寫技巧只適用于成對出現(xiàn)的顏色值，其它顏色值不適用這種技巧，比如:

#010101,#223345,#FFF000

Margin(外邊距/空白邊)

聲明CSSmagin值得時候通常會寫成這樣:

margin-top:0px;

margin-right:10px;

margin-bottom:0px;

margin-left:10px;

讓我們試試把值為0的單位去掉，并把4條聲明合并成一條聲明:

margin:010px010px;

當你生命padding、margin、border(還有一些其他屬性)時，記得要把按照順時針的方向來聲明屬性值，也就是按照上-右-下-左的方 向。關于這些屬性還有另一個更加簡單的寫法，看看屬性中上和下、左和右是否值是相等的，如果是那么就可以進一步優(yōu)化了，你可以省略掉后兩個值，剩下的兩個 值前者指上下，后者指左右:

margin:010px;

它是指左右的值為10px，上下的值為0；

Padding(內邊距)

padding的簡寫技巧等同于margin:

padding-top:0px;

padding-right:10px;

padding-bottom:0px;

padding-left:10px;

可以寫成:

padding:010px;

Borders(邊框)

邊框的簡寫方式相比其它生命來說會比較復雜，很多CSSer一開始都容易記混它的簡寫順序，如果你想聲明一個1像素寬的實線黑色邊框，可能會寫成:

border-width:1px;

border-style:solid;

border-color:#000;

其實可以寫成:

border:1pxsolid#000;

注意:這里的顏色值已經(jīng)使用了上面講過的顏色簡寫方法了哦。

我們還可以為四個邊設置不同的寬度:

border-top-width:1px;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:4px;

可以簡寫成:

border-width:1px2px3px4px;

最后，我們還可以只設置左和右的邊的樣式:

border-right:1pxsolid#000;

border-bottom:1pxsolid#000;

雖然并沒減少多少代碼,但暴風彬彬建議寫成這樣:

border:1pxsolid#000;

border-width:01px1px0;

先設置四個邊的默認風格，然后聲明具體的哪個邊要顯示。

文字

文字屬性也有很多可能會用到的屬性值，像背景一樣，你可能會聲明這種復雜的文字樣式:

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:150%;

font-family:宋體,Arial,sans-serif;

其實可以優(yōu)化成一行:

font:italicsmall-capsbold1em/150%宋體,Arial,sans-serif;

列表

list-style-type:square;

list-style-position:inside;

list-style-image:url(filename.gif);

可以寫成:

list-style:squareinsideurl(filename.gif);

CSS技巧分享：如何用css制作橫排二級下拉菜單

工具/材料

notepad++

瀏覽器

打開Notepad++，先輸入個頁面框架

！DOCTYPE html

html xmlns=""

hade

/hade

body

/body

框架好了，那么就該定義頁面的title，關鍵詞keyword，和描述description

meta charset="UTF-8" content="text/html" http-equiv="content-type"

title純css二級導航下拉菜單/title

meta name="keyword" content="搜狗略懂"

meta name="description" content="描述"

這些內容只能在head/head中完成。

定義頁面使用的css樣式，也是需要在head里定義的。

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只選擇nav下一級里面的ul元素

nav ul選擇nav內所包含的所有ul元素

navul比nav ul限定更嚴格，必須后面的元素只比前面的低一個級別。

這里根據(jù)你的需求來自己定義。

--

/style

添加一個DIV標簽，在頁面中劃分出一個塊來，用來顯示。

div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述

然后使用無序標簽ul+樣式li 來實現(xiàn)模塊。

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗問問/a/li

lia href="#"搜狗輸入法/a/li

lia href="#"搜狗瀏覽器/a/li

lia href="#"搜狐/a/li

/ul

/div

放上全部的代碼吧，可以參考一下啊，

!DOCTYPE html

html xmlns=""http://允許你通過一個網(wǎng)址來識別你的標記

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="keyword" content="利用css實現(xiàn)下拉菜單"

meta name="description" content="搜狗略懂、css分享"

titlecss實現(xiàn)下拉導航欄菜單/title

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只選擇nav下一級里面的ul元素

nav ul選擇nav內所包含的所有ul元素

navul比nav ul限定更嚴格，必須后面的元素只比前面的低一個級別。

這里根據(jù)你的需求來自己定義。

--

/style

/head

body

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗問問/a/li

lia href="#"搜狗輸入法/a/li

lia href="#"搜狗瀏覽器/a/li

lia href="#"搜狐/a/li

/ul

/li

/ul

/div

/body

/html

如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可

特別提示

寫代碼過程中一定要記得換行，開頭留空，否則過后找東西，連你自己都不知道寫的是什么。何談從哪里找起？

當前標題：css樣式技巧,css樣式教程
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article49/dsiseeh.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、自適應網(wǎng)站、關鍵詞優(yōu)化、ChatGPT、響應式網(wǎng)站、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)