不是軟件
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、剛察網(wǎng)絡(luò)推廣、微信小程序、剛察網(wǎng)絡(luò)營(yíng)銷、剛察企業(yè)策劃、剛察品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供剛察建站搭建服務(wù),24小時(shí)服務(wù)熱線:18982081108,官方網(wǎng)址:www.cdcxhl.com
HTML是一種做網(wǎng)頁(yè)的標(biāo)簽語(yǔ)言,CSS則是用來(lái)修飾HTML的語(yǔ)言,
HTML5是一種新的技術(shù),其實(shí)就是HTML的升級(jí)版,但融入更多的js功能,加上現(xiàn)在的css3,在高版本的瀏覽器會(huì)做出很酷很炫的效果。
一般我們叫前端開(kāi)發(fā),網(wǎng)上搜HTML視頻教程(先學(xué)HTML以后再轉(zhuǎn)入html5),一大堆。
我的做前端開(kāi)發(fā)的,希望可以幫到你
CSS發(fā)展史
CSS(Cascading Style Sheets,層疊樣式表)是一種將表示樣式應(yīng)用到標(biāo)記的系統(tǒng)。CSS以設(shè)計(jì)、改變其HTML頁(yè)面的樣式而知名,并使用于Web和其他媒介,如XML文檔中。1996年12月W3C推出了CSS規(guī)范的第一個(gè)版本,1998年W3C發(fā)布了CSS的第二個(gè)版本即CSS2.0,2001年5月W3C開(kāi)始進(jìn)行CSS3標(biāo)準(zhǔn)的制定,到目前為止該標(biāo)準(zhǔn)還沒(méi)有最終定稿。
CSS1.0
選擇器:要使用CSS對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一,一對(duì)多或者多對(duì)一的控制,就需要用到CSS選擇器。選擇器大致分為派生選擇器、ID選擇器和類選擇器,用來(lái)定義希望應(yīng)用樣式的HTML元素或者標(biāo)簽。
樣式屬性:該屬性主要包括Font字體、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外邊框、Border邊框、Padding內(nèi)邊框、List列表、Table表格和Scrollbar滾動(dòng)條等,用于定義網(wǎng)頁(yè)的一些樣式變化。
偽類屬性:主要定義了針對(duì)描述對(duì)象a的link、hover、active、visited和針對(duì)節(jié)點(diǎn)的first-letter、first-child、first-line等幾個(gè)偽類屬性。
保存方式:用戶可以直接存儲(chǔ)在HTML網(wǎng)頁(yè)中,也可以將CSS樣式代碼存儲(chǔ)為獨(dú)立的樣式表文件。
CSS2.0
選擇器:css2提供了更多強(qiáng)大的選擇器,用來(lái)定位HTML節(jié)點(diǎn)或者標(biāo)記
符號(hào)名稱
含義
示例
*
用于匹配任何標(biāo)記
*{color:red}
用于指定父子節(jié)點(diǎn)關(guān)系
AAA CCC DDD {color:red}匹配父節(jié)點(diǎn)分別為CCC和AAA的節(jié)點(diǎn)DDD節(jié)點(diǎn)
□
用于匹配在某一層有某個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)
AAA CCC DDD {color:blue}匹配包含父節(jié)點(diǎn)CCC的父節(jié)點(diǎn)AAA的節(jié)點(diǎn)DDD
+
用于表示在同一個(gè)級(jí)別節(jié)點(diǎn)之間的關(guān)系
AAA+BBB{color:red}表示,有一個(gè)兄弟節(jié)點(diǎn)AAA的節(jié)點(diǎn)BBB
名稱[表達(dá)式]
選擇包含特殊屬性值的節(jié)點(diǎn)
BBB[text="xyz"]{color:blue} 表示包含text屬性值為xyz的BBB標(biāo)簽
位置模型:在CSS2中進(jìn)一步增強(qiáng)了位置屬性功能,增加了relative、absolute和fixed等幾個(gè)值
值名稱
含義
relative
元素框相對(duì)父節(jié)點(diǎn)偏移某個(gè)距離,元素仍保持其未定位前的形狀,它原本所占的空間仍保留
absolute
元素框從文檔流中完全刪除,并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉,就好像元素原來(lái)不存在一樣
fixed
元素框的表現(xiàn)類似于absolute值,不過(guò)其包含塊是視窗本身
z-index
用來(lái)指定相互重疊的元素的疊放順序,數(shù)字較大的元素會(huì)疊放在數(shù)值較小的元素前面
布局、表格樣式:CSS2對(duì)display屬性進(jìn)行了擴(kuò)充,用戶可用該屬性指定元素是否會(huì)顯示以及如何顯示,也可以使用該屬性配合位置和浮動(dòng)進(jìn)行頁(yè)面的布局。另外,用戶還可以將一個(gè)非表格的結(jié)構(gòu)化文檔顯示為一個(gè)表格樣式。
媒體類型:用于對(duì)不同的媒體類型定義不同的樣式。
屬性名稱
含義
aural
用于語(yǔ)音和音頻合成器
embossed
用于分頁(yè)的盲人用點(diǎn)字法打印
用于打印機(jī)
screen
用于計(jì)算機(jī)顯示器
braille
用于盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備
projection
用于方案展示如幻燈片
偽類:CSS2增加了focus(將樣式添加到被選中的元素)、:first-child(將特殊的樣式添加到元素的第一個(gè)子元素)、:lang(允許創(chuàng)作者來(lái)定義指定的元素中使用的語(yǔ)言)。
光標(biāo)樣式:增加了cursor屬性,用于指定設(shè)備應(yīng)該顯示怎樣的光標(biāo)類型。
值名稱
含義
default
默認(rèn)光標(biāo)(通常是一個(gè)箭頭)
auto
默認(rèn),瀏覽器設(shè)置的光標(biāo)
crosshair
光標(biāo)呈現(xiàn)為十字線
pointer
光標(biāo)呈現(xiàn)為指示鏈接的指針(一只手)
move
此光標(biāo)指示某對(duì)象可被移動(dòng)
e-resize
此光標(biāo)指示矩形框的邊緣可被向右移動(dòng)
text
此光標(biāo)指示文本
wait
此光標(biāo)指示程序正忙(通常是一只表或沙漏形狀)
help
此光標(biāo)指示可用的幫助(通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球)
DIV+CSS其實(shí)是一種錯(cuò)誤的叫法,標(biāo)準(zhǔn)的叫法應(yīng)該是XHTML+CSS,因?yàn)镈IV與table都是XHTML或HTML語(yǔ)言中的一個(gè)標(biāo)記,而CSS只是一種樣式表現(xiàn)。DIV+CSS已經(jīng)將內(nèi)容和表現(xiàn)分割開(kāi)來(lái),所以修改網(wǎng)頁(yè)時(shí)只需指定內(nèi)容修改即可。
CSS常用命令規(guī)則
名稱
含義
名稱
含義
header
頁(yè)頭
content/Container
內(nèi)容
footer
頁(yè)腳
nav
導(dǎo)航
sidebar
側(cè)欄
column
欄目
wrapper
頁(yè)面外圍控制整體布局寬度
left
左側(cè)
right
右側(cè)
center
中間
loginbar
登錄條
logo
標(biāo)志
banner
廣告
main
頁(yè)面主題
hot
熱點(diǎn)
news
新聞
download
下載
subnav
子導(dǎo)航
menu
菜單
submenu
子菜單
search
搜索
friendlink
友情鏈接
copyright
版權(quán)
scroll
滾動(dòng)
content
內(nèi)容
tab
標(biāo)簽頁(yè)
list
文章列表
msg
提示信息
title
欄目標(biāo)題
joinus
加入
guild
指南
service
服務(wù)
register
注冊(cè)
status
狀態(tài)
vote
投票
partner
合作伙伴
HTML5和CSS3是HTML和CSS的最新版本。
HTML和CSS并不難理解。HTML為構(gòu)成網(wǎng)頁(yè)的主要語(yǔ)言。通過(guò)這種語(yǔ)言,我們可以向計(jì)算機(jī)說(shuō)明網(wǎng)頁(yè)格式、內(nèi)容、顯示效果等等。而CSS則是專門用來(lái)控制網(wǎng)頁(yè)顯示效果的語(yǔ)言。
html是網(wǎng)頁(yè)語(yǔ)言,即HTML(Hypertext Markup Language),是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。html5是當(dāng)前最新版本,主要特點(diǎn)是支持原生的視頻播放、離線存儲(chǔ)、更多的語(yǔ)義化標(biāo)簽。
css全稱叫Cascading Style Sheet,可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”,用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面的格式,可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在HTML文檔中,而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或HTML文檔的某一部分,通常為文件頭部分。CSS3也是當(dāng)前最新版本,主要特點(diǎn)是支持圓角、陰影、動(dòng)畫效果等。
值得一提的是,目前IE6、7、8不能完整支持HTML5和CSS3,其它如谷歌、火狐瀏覽器等主流版本已經(jīng)支持。
CSS即層疊樣式表(Cascading StyleSheet)。 在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù),可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。 只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改,就可以改變同一頁(yè)面的不同部分,或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。
CSS3是CSS技術(shù)的升級(jí)版本,CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效 、多欄布局等。
CSS即層疊樣式表(Cascading StyleSheet)。 在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù),可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。 只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改,就可以改變同一頁(yè)面的不同部分,或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本,CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效 、多欄布局等。
主要都圍繞知識(shí)點(diǎn)的理解與css兼容性問(wèn)題上,請(qǐng)參考下面的
2.1 link和@import都可以為頁(yè)面引入CSS文件,其區(qū)別是?
將樣式定義在單獨(dú)的.css的文件里,link和@import都可以在html頁(yè)面引入css文件。有l(wèi)ink和@import兩種方式,導(dǎo)入方式如下:
link方式:link rel=”stylesheet” type=”text/css” href=”aa.css”
@import方式:style type=”text/css”@import “aa.css”;/style
link和@import兩種導(dǎo)入css文件的區(qū)別:
祖先的差別。Link屬于XHTML標(biāo)簽,而@import完全是CSS提供的一種方式。Link標(biāo)簽除了可以加載CSS外,還可以做很多其他的事情,比如定義RCC,定義rel連接屬性等;@import就只能加載css了。
加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候,link引用的CSS會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式(就是閃爍),網(wǎng)速慢時(shí)更為明顯。
兼容性的差別。由于@import是CSS2.1提出的所有老的瀏覽器不支持,@import只有在IE5以上的才能識(shí)別,而link標(biāo)簽無(wú)此問(wèn)題。
使用DOM控制樣式時(shí)的差別。當(dāng)使用JavaScript控制DOM去改變樣式的時(shí)候,只能使用link標(biāo)簽,因?yàn)锧import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表,比如可以創(chuàng)建一個(gè)主樣式表,在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性?
CSS使用層疊的原則來(lái)考慮繼承、層疊次序和優(yōu)先級(jí)等重要特征,從而判斷相互沖突的規(guī)則中哪個(gè)規(guī)則應(yīng)該起作用。
繼承性是指,許多CSS的樣式規(guī)則不但影響選擇器所定義的元素,而且會(huì)被這些元素的后代繼承。
層疊性是指,當(dāng)一個(gè)web頁(yè)面使用多個(gè)樣式表,多個(gè)樣式表中的樣式可層疊為一個(gè)。在多個(gè)樣式表之間所定義的樣式?jīng)]有沖突的時(shí)候,瀏覽器會(huì)顯示所有的樣式。
優(yōu)先級(jí)是指,當(dāng)發(fā)生樣式定義沖突時(shí),瀏覽器首先會(huì)按照不同樣式規(guī)則的優(yōu)先級(jí)來(lái)應(yīng)用樣式。CSS樣式的優(yōu)先級(jí)如下所示(其中數(shù)字3擁有最高的優(yōu)先權(quán)):
1.瀏覽器缺省設(shè)置;
2.外部樣式表(.css文件)或者內(nèi)部樣式表(位于head元素內(nèi)部);
3.內(nèi)聯(lián)樣式(作為某個(gè)元素的style屬性的值)。
同等優(yōu)先級(jí)下,以最后定義的樣式為準(zhǔn),important比內(nèi)聯(lián)高。
2.3 哪些屬性可以繼承?
Css中可以繼承的屬性如下:
文本相關(guān)屬性:font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color;
列表相關(guān)屬性:list-style-image、list-style-position、list-style-type、list-style;
表格相關(guān)屬性:border-collapse、border-spacing、caption-side、table-layoute;
其他屬性:Cursor、visibility;
2.4 CSS選擇器中,元素選擇器和類選擇器的區(qū)別是什么?
元素選擇器是常見(jiàn)的CSS選擇器,即文檔的元素就是最基本的選擇器。選擇器通常是某個(gè)HTML元素,比如p、h1、em、a等,甚至可以是html元素本身。
類選擇器用于將樣式規(guī)則與附帶class屬性的元素匹配,其中該class屬性的值為類選擇器中指定的值。使用類選擇器時(shí),首先要定義樣式類,其語(yǔ)法為:
.className{ };
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設(shè)置為”className”,則可以將類選擇器的樣式與元素關(guān)聯(lián)。
在實(shí)際使用時(shí),如果需要為某種元素定義樣式,則往往使用元素選擇器;如果要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素,最常用的方法就是使用類選擇器。
2.5 簡(jiǎn)要描述CSS中的定位機(jī)制
CSS中,除了默認(rèn)的流定位方式以外,還有如下幾種定位機(jī)制:浮動(dòng)定位、相對(duì)定位、絕對(duì)定位和固定定位。
浮動(dòng)定位是將元素排除在普通流之外,并且將它放置在包含框的左邊或者右邊,但是依舊位于包含框之內(nèi)。
相對(duì)定位將元素相對(duì)于它在普通流中的位置進(jìn)行定位。
絕對(duì)定位是指將元素的內(nèi)容從普通流中完全移除,并且可以使用偏移屬性來(lái)固定該元素的位置。
固定定位是指將元素的內(nèi)容固定在頁(yè)面的某個(gè)位置。
2.6 display屬性和 visibility屬性的區(qū)別?
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設(shè)置為block,可以讓行內(nèi)元素表現(xiàn)得像塊級(jí)元素一樣;
2.如果將display屬性設(shè)置為inline,可以讓塊級(jí)元素表現(xiàn)得像內(nèi)聯(lián)元素一樣;
3.可以通過(guò)把display屬性設(shè)置為none,讓生成的元素根本沒(méi)有框。這樣的話,該框及其所有內(nèi)容就不在顯示,不占用文檔中的空間。
在DIV設(shè)計(jì)中,室友display:none屬性后,HTML元素(對(duì)象)的寬度。高度等各種
屬性都將”丟失”;而使用visibility:hidden屬性后,HTML元素(對(duì)象)僅僅是在視覺(jué)上看不見(jiàn)(完全透明),而它所占據(jù)的空間位置仍然存在,也即是說(shuō)它仍具有高度、寬度等屬性值。
2.7 簡(jiǎn)述對(duì)CSS的盒子模型的理解?
CSS盒子模型也叫做框模型,具備內(nèi)容(content)、填充(padding)、邊框(border)、邊距(margin)這些屬性。在CSS中,每個(gè)元素都被視為一個(gè)框,而每個(gè)框都有三個(gè)屬性:
border:元素的邊框(可能不可見(jiàn)),用于將框的邊緣與其他框分開(kāi);
margin:外邊距,表示框的邊緣與相鄰框之間的距離,也稱為頁(yè)邊空白;
padding:內(nèi)邊距,表示框內(nèi)容和邊框之間的空間。
盒子模型的結(jié)構(gòu)如圖所示:
由上圖可以看出,width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、外邊距和邊框不會(huì)影響到內(nèi)容區(qū)域的尺寸,但會(huì)增加元素框的總尺寸。
因此,如果在一個(gè)具有邊框的元素中放置文本,往往需要設(shè)置一些內(nèi)邊距,以便文本的邊緣不要接觸邊框,這樣更便于閱讀。而外邊距則可以在多個(gè)元素框之間創(chuàng)建空白,避免這些框都擠在一起。因此,在設(shè)計(jì)頁(yè)面時(shí),經(jīng)常會(huì)使用padding屬性和margin屬性來(lái)設(shè)置頁(yè)面的布局。但是,必須注意的是,一旦用了padding屬性或者margin屬性設(shè)置了元素的邊距以后,會(huì)增加元素在頁(yè)面布局中所占的面積。
2.8 簡(jiǎn)述CSS3中的偽類選擇器?
CSS3提供了大量偽類選擇器,瀏覽器對(duì)于有些偽類選擇器的支持還不太好。目前,常用的偽類選擇器有:
目標(biāo)偽類:即 :target,突出顯示活動(dòng)的HTML錨,用于選取當(dāng)前活動(dòng)的目標(biāo)元素;
元素狀態(tài)偽類:比如 :enabled、:disabled、:checked;
結(jié)構(gòu)偽類: 比如 :first-child、:last-child、:empty、:only-child;
否定偽類:即 :not(selector),匹配非指定元素/選擇器的每個(gè)元素。
2.9 為什么建議設(shè)置背景圖像的同時(shí)還設(shè)置背景顏色?
一般建議在使用背景圖片的同時(shí)提供background-color屬性,并且將其設(shè)置為和圖像主要顏色類似的顏色。這樣,如果正在加載頁(yè)面,或者因?yàn)楦鞣N原因無(wú)法顯示背景圖像時(shí),頁(yè)面可以使用這種顏色作為背景色。
2.10 如何居中div?如何居中一個(gè)浮動(dòng)元素?
給div設(shè)置一個(gè)寬度,然后設(shè)置元素的左右外邊距為auto,比如,margin:0 auto。則可以實(shí)現(xiàn)div居中顯示。
對(duì)于浮動(dòng)元素,設(shè)置其左右外邊距為關(guān)鍵字auto是無(wú)效的。此時(shí),如果需要設(shè)置其居中顯示,可以:1.精確計(jì)算其左外邊距并進(jìn)行設(shè)置,實(shí)現(xiàn)居中顯示。
2.使用一個(gè)居中顯示的div元素包含次浮動(dòng)元素,
代碼如:div style=”margin:0 auto;”div style=”float:left;”/div/div
2.11 在設(shè)置文本的字體時(shí),為什么建議設(shè)置替換字體?
可以使用font-family屬性來(lái)指定文本的字體,代碼如下所示:font-family:name/inherit;
此時(shí),name為首選字體的名稱。如果字體名稱有多個(gè)單詞,即中間有空格,則需要將字體名稱用一對(duì)單引號(hào)或者雙引號(hào)包圍起來(lái)。
但是,如果用戶機(jī)器上并沒(méi)有安裝name所指定的字體,則會(huì)顯示默認(rèn)字體。因此,如果可以指定一種替代字體,替代字體可以和指定字體不完全相同,相似且不會(huì)影響頁(yè)面的布局,就可以解決問(wèn)題了。
我們可以為font-family屬性指定多種字體,且多種字體之間用逗號(hào)隔開(kāi),這樣可以為頁(yè)面指定一個(gè)字體列表。如果用戶機(jī)器沒(méi)有第一種字體,則瀏覽器會(huì)查找字體列表中的下一種字體替代默認(rèn)字體顯示。如果找遍了字體列表還是沒(méi)有可以使用的字體,瀏覽器才會(huì)使用默認(rèn)字體顯示頁(yè)面。代碼如下所示:
h1{font-family:Georgia,serif;}
此時(shí),如果用戶機(jī)器上沒(méi)有安裝Georgia,但安裝了Times字體(serif字體系列中的一種字體),瀏覽器就可能對(duì)h1元素使用Times。盡管Times與Georgia并不完全匹配,但至少足夠接近。
因此,我們建議在所有font-family規(guī)則中都提供一個(gè)通用字體系列。這樣就提供了一條后路,在用戶機(jī)器無(wú)法提供與規(guī)則匹配的特定字體時(shí),就可以選擇一個(gè)通用字體作為替換。
2.12 內(nèi)聯(lián)元素可以實(shí)現(xiàn)浮動(dòng)嗎?
在CSS中,任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框,而不論它本身是何種元素。因此,對(duì)于內(nèi)聯(lián)元素,如果設(shè)置為浮動(dòng),會(huì)產(chǎn)生和塊級(jí)框相同的效果。
2.13 什么情況下需要額外設(shè)置表格的顯示規(guī)則?
默認(rèn)情況下(不額外設(shè)置表格的顯示規(guī)則時(shí)),表格按照自動(dòng)表格布局進(jìn)行顯示,即瀏覽器在顯示表之前查看每一個(gè)單元格,然后基于所有格的設(shè)置計(jì)算表單大小,而列的寬度是由列段元個(gè)中沒(méi)有折行的最寬的內(nèi)容設(shè)定的。此時(shí),單元格的大小會(huì)適應(yīng)內(nèi)容的大小。
自動(dòng)表格布局的算法在表格復(fù)雜時(shí)會(huì)比較慢,這是由于它需要在確定最終的布局之前訪問(wèn)表格中多有的內(nèi)容。在不能提前確定每一列的大小時(shí),這種方式會(huì)非常適用。
如果額外設(shè)置表格的顯示規(guī)則,即設(shè)置table-layout屬性的值為fixed,則稱為固定表格布局。在固定表格布局中,水平布局僅取決于表格寬度,列寬度,表格邊框?qū)挾?,單元格間距,而與單元格的內(nèi)容無(wú)關(guān)。瀏覽器將使用某列指定的寬度來(lái)計(jì)算布局,并使用該寬度計(jì)算該列中所有其他單元格的寬度。
固定表格布局與自動(dòng)表格布局相比,允許瀏覽器更快地對(duì)表格進(jìn)行布局。因?yàn)槿绻付ㄊ褂霉潭ū砀癫季?,瀏覽器在接收到第一行后就可以顯示表格。如果表格龐大且已經(jīng)指定了大小,則會(huì)加速表的顯示。
2.14 簡(jiǎn)要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用,來(lái)插入生成內(nèi)容,可以在元素之前或之后放置生成的內(nèi)容??梢圆迦胛谋?、圖像、引號(hào),并可以結(jié)合計(jì)數(shù)器為頁(yè)面元素插入編號(hào)。比如,查看如下代碼:
body {counter-reset:chapter;}
h1:before { content:”第”counter(chapter)”章”;}
h1 { counter-increment:chapter;}
使用content屬性,并結(jié)合:before選擇器和計(jì)數(shù)器counter,可以在每個(gè)h1元素前插入新的內(nèi)容。
2.15 CSS Sprite是什么,談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)
CSS Sprite是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式,就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中,再利用CSS的”background-image”,”background-repeat”,”background-position”的組合進(jìn)行背景定位。
其優(yōu)點(diǎn)在于:①減少網(wǎng)頁(yè)的http請(qǐng)求,提高性能,這也是CSS Sprite最大的優(yōu)點(diǎn),
也是其被廣泛傳播和應(yīng)用的主要原因;
②減少圖片的字節(jié),多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和;
③較少了命名困擾,只需對(duì)一張集合的圖片命名,不需要對(duì)每一個(gè)小元素進(jìn)行命名提高制作效率;
④更換風(fēng)格方便。只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式,整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變,維護(hù)起來(lái)更加方便;
但是CSS Sprite也存在一些不可忽視的缺點(diǎn):
①圖片合成比較麻煩;
②背景設(shè)置時(shí),需要得到每一個(gè)背景單元的精確位置;
③維護(hù)合成圖片時(shí),最好只是向下加圖片,而不是更改已有圖片。
2.16 對(duì)CSS3有了解嗎?列舉幾個(gè)CSS3的新特性并簡(jiǎn)要描述
CSS3作為CSS技術(shù)的升級(jí)版本,著力于模塊化發(fā)展,將規(guī)范分解為一些小的模塊,如選擇器、盒子模型、列表模塊、背景和邊框等;并加入了很多新的模塊和屬性,比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過(guò)渡、多欄布局、2D/3D轉(zhuǎn)換、動(dòng)畫等。
其中,CSS3提供了一些復(fù)雜選擇器,用于實(shí)現(xiàn)頁(yè)面復(fù)雜情況下的元素選擇,如屬性選擇器,一些偽類和偽元素選擇器;漸變用于為元素設(shè)置漸變效果的背景;轉(zhuǎn)換可以實(shí)現(xiàn)元素的變換,比如位移、縮放、旋轉(zhuǎn)等;過(guò)渡可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果;動(dòng)畫屬性則可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫,可以實(shí)現(xiàn)逐幀制作動(dòng)畫。
2.17 過(guò)渡與動(dòng)畫的區(qū)別是什么?
過(guò)渡屬性transition可以在一定的事件內(nèi)實(shí)現(xiàn)元素的狀態(tài)過(guò)渡為最終狀態(tài),用于模擬一種過(guò)渡動(dòng)畫效果,但是功能有限,只能用于制作簡(jiǎn)單的動(dòng)畫效果;
動(dòng)畫屬性animation可以制作類似Flash動(dòng)畫,通過(guò)關(guān)鍵幀控制動(dòng)畫的每一步,控制更為精確,從而可以制作更為復(fù)雜的動(dòng)畫。
2.18 什么是CSS reset?
CSS reset,又叫做CSS重寫或者CSS重置,用于改寫HTML標(biāo)簽的默認(rèn)樣式。
有些HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式,例如p標(biāo)簽有上下邊距,li標(biāo)簽有列表標(biāo)識(shí)符號(hào)等。這些默認(rèn)樣式在不同瀏覽器之間也會(huì)有差別,例如ul默認(rèn)帶有縮進(jìn)的樣式,在IE下,它的縮進(jìn)是通過(guò)margin實(shí)現(xiàn)的,而Firefox下,它的縮進(jìn)是由padding實(shí)現(xiàn)的。著必然會(huì)帶來(lái)瀏覽器兼容問(wèn)題。
因此,在CSS代碼中,可以使用CSS代碼去掉這些默認(rèn)樣式,即重新定義標(biāo)簽樣式,從而覆蓋瀏覽器的CSS默認(rèn)屬性,即CSS reset。
需要注意的是,在進(jìn)行樣式重寫時(shí),不建議使用 * 選擇器進(jìn)行重寫,這樣會(huì)降低效率,影響性能。
2.19 如何清除浮動(dòng)元素所帶來(lái)的影響?
浮動(dòng)定位是指將元素排除在普通流之外,并且將它放置在包含框的左邊或者右邊,但是依舊位于包含框之內(nèi)。也就是說(shuō),浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
由于浮動(dòng)框不在文檔的普通流中,所以元素浮動(dòng)之后,其原有位置不再保留,其他元素的位置會(huì)受到影響。
如果需要清除左側(cè)或者右側(cè)浮動(dòng)元素帶來(lái)的影響,則可以使用clear屬性來(lái)設(shè)置。另外,包含框呃逆的子元素浮動(dòng)后,如果包含框沒(méi)有設(shè)置具體的高度,則其高度會(huì)發(fā)生變化,此時(shí),可以使用overflow屬性來(lái)清除子元素浮動(dòng)后帶來(lái)的影響。
2.20 談?wù)勀銓?duì)瀏覽器兼容性問(wèn)題的理解
瀏覽器的類型及版本的不同會(huì)造成CSS效果不盡相同,因此需要實(shí)現(xiàn)瀏覽器兼容,也可以針對(duì)不同的瀏覽器編寫不同的CSS。
目前,各主流瀏覽器的新版本,對(duì)應(yīng)W3C的標(biāo)準(zhǔn)支持很好,因此,首先保證代碼符合W3C的標(biāo)準(zhǔn),這是解決瀏覽器兼容問(wèn)題的前提。
其次,對(duì)于某些支持受限的屬性,針對(duì)不同的瀏覽器添加相應(yīng)的前綴,比如-webkit-、-o-、-moz-。
第三,對(duì)于IE的低版本,可以編寫帶有特定前綴的代碼,實(shí)現(xiàn)版本識(shí)別。比如:
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#f1ee18\9;/*IE6 7 8識(shí)別*/
+background-color:#f1ee18;/*IE6 7識(shí)別*/
_background-color:#f1ee18;/*IE6識(shí)別*/
}
另外,對(duì)于特定的兼容性問(wèn)題,特殊解決。常見(jiàn)的特殊問(wèn)題有:
1.使用CSS reset:對(duì)于有些HTML標(biāo)簽,瀏覽器默認(rèn)的margin和padding不同,可以使用CSS代碼改寫默認(rèn)的樣式效果,從而實(shí)現(xiàn)統(tǒng)一
2.IE低版本中,不能使用auto關(guān)鍵字實(shí)現(xiàn)塊級(jí)元素居中顯示,可以改用設(shè)置父元素的text-align;
3.子元素設(shè)置上外邊距時(shí),父元素需要設(shè)置邊框或者外邊距;
4.外邊距合并問(wèn)題。