前端基礎(chǔ)(盒模型)九

問答


1. 盒模型包括哪些屬性

盒模型的屬性包括width厉熟、heightpadding较幌、margin揍瑟、border,如下圖:

盒模型示意圖

2. text-align: center的作用是什么绅络,作用在什么元素上月培?能讓什么元素水平居中

text-align:center規(guī)定行內(nèi)內(nèi)容相對(duì)父元素居中對(duì)齊,測(cè)試text-align: center在塊級(jí)元素恩急、行內(nèi)元素、行內(nèi)塊元素的效果如下:

text-align:center測(cè)試

顯然纪蜒,所謂行內(nèi)內(nèi)容包括行內(nèi)元素衷恭、行內(nèi)塊元素行內(nèi)文本

3. 如果遇到一個(gè)屬性想知道兼容性纯续,在哪查看?

點(diǎn)擊查看兼容性

4. IE 盒模型和W3C盒模型有什么區(qū)別?

如下圖:

兩種盒模型對(duì)比圖

區(qū)別在于width和height的算法不同随珠,如下表:

盒模型 width算法 height算法
IE盒模型 width=內(nèi)容寬度+padding+border height=內(nèi)容高度+padding+border
W3C盒模型 width=內(nèi)容寬度 height=內(nèi)容高度

5. 以下代碼的作用灭袁?兼容性?

*{ box-sizing: border-box;}

作用:使盒模型的width/height=內(nèi)容寬度/內(nèi)容高度+padding+border


border-box兼容性

除了IE6和IE7其它主流瀏覽器都支持窗看。

6. CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用

  • CCS Sprite指的是把頁面要用的所有小圖標(biāo)集合到一張圖里面茸歧。
  • 雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對(duì)于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上显沈,使用雪碧圖只需要引用一張圖片软瞎,對(duì)內(nèi)存和帶寬更加友好。

7. img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別

  • img標(biāo)簽是HTML的一個(gè)圖片行內(nèi)塊元素拉讯,background-image是CSS的一個(gè)背景圖片聲明涤浇。
  • img標(biāo)簽是作為頁面內(nèi)容的不可或缺的元素,而background-image只是作為某個(gè)元素的樣式魔慷,起到修飾元素的作用只锭。

8. title和alt屬性分別有什么作用

屬性 作用
title 當(dāng)鼠標(biāo)懸停在具有title屬性的元素上時(shí)會(huì)彈出title屬性值(用來解釋、說明的文本)
alt img標(biāo)簽和input標(biāo)簽(圖片按鈕)特有屬性院尔,當(dāng)圖片加載失敗時(shí)的代替文本蜻展,該文本為搜索引擎提供數(shù)據(jù)。

9. background: url(abc.png) 0 0 no-repeat;這句話是什么意思

  • url(abc.png)表示abc.png圖片為背景邀摆。
  • 以父包含塊左上角border內(nèi)邊緣或者padding外邊緣為坐標(biāo)原點(diǎn)铺呵,向右為x正方向、向下為y正方向隧熙,0 0表示圖片左上角的坐標(biāo)為(0,0)片挂。
  • no-repeat表示x、y方向不平鋪贞盯。

10. background-size有什么作用? 兼容性如何? 常用的值是?

  • background-size的作用是根據(jù)需要自由縮放圖片音念。
  • 除了IE6、7躏敢、8和firefox2闷愤、3、3.5不兼容件余,其它主流瀏覽器基本兼容讥脐。
    點(diǎn)擊見詳情
  • 常見值如下表
含義
length 設(shè)置背景的寬高,第一個(gè)值為寬度啼器,第二個(gè)為高度旬渠,若只設(shè)置一個(gè)值,第二值默認(rèn)為auto
percentage 以父元素的百分比設(shè)置背景的寬高
cover 將圖像擴(kuò)展至完全覆蓋背景區(qū)域(圖像尺寸等比例擴(kuò)展)
contain 將圖像擴(kuò)展至寬高完全適應(yīng)背景區(qū)域

11. 如何讓一個(gè)div水平居中端壳?如何讓圖片水平居中

讓div水平居中的方法有:

  • margin: xxpx auto實(shí)現(xiàn)
  • 使用絕對(duì)定位實(shí)現(xiàn)
    演示如下:
div水平居中

12. 如何設(shè)置元素透明? 兼容性告丢?

  • opacity可以設(shè)置元素透明,如下設(shè)置屬性值為0到1從完全透明到完全不透明:
測(cè)試opaticy

兼容性如下:


opacity兼容性
  • filter:alpha(opacity=50); 這個(gè)是為IE6設(shè)計(jì)损谦,取值范圍0-100岖免。
  • -moz-opacity:0.5; 這個(gè)是為了支持一些老版本的Mozilla瀏覽器;
  • -khtml-opacity: 0.5; 這個(gè)為了支持一些老版本的Safari瀏覽器;

13. opacity和rgba都能設(shè)置透明岳颇,有什么區(qū)別

  • 對(duì)設(shè)置透明來說,opacity是作為CSS聲明的屬性颅湘,rgba是作為CSS中background-color的屬性值话侧。
  • opacity是設(shè)置整個(gè)元素為透明,而rgba只是設(shè)置元素的背景顏色透明闯参。

代碼


task9-1
task9-1 preview
task9-2
task9-2 preview
task9-3
task9-3 preview
task9-4
task9-4 preview

參考



本文章著作權(quán)歸饑人谷_九霄和饑人谷所有瞻鹏,轉(zhuǎn)載須說明來源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市赢赊,隨后出現(xiàn)的幾起案子乙漓,更是在濱河造成了極大的恐慌,老刑警劉巖释移,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叭披,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡玩讳,警方通過查閱死者的電腦和手機(jī)涩蜘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來熏纯,“玉大人同诫,你說我怎么就攤上這事≌晾剑” “怎么了误窖?”我有些...
    開封第一講書人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秩贰。 經(jīng)常有香客問我霹俺,道長(zhǎng),這世上最難降的妖魔是什么毒费? 我笑而不...
    開封第一講書人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任丙唧,我火速辦了婚禮,結(jié)果婚禮上觅玻,老公的妹妹穿的比我還像新娘想际。我一直安慰自己,他們只是感情好溪厘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開白布胡本。 她就那樣靜靜地躺著,像睡著了一般桩匪。 火紅的嫁衣襯著肌膚如雪打瘪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,231評(píng)論 1 299
  • 那天傻昙,我揣著相機(jī)與錄音闺骚,去河邊找鬼。 笑死妆档,一個(gè)胖子當(dāng)著我的面吹牛僻爽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播贾惦,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼胸梆,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了须板?” 一聲冷哼從身側(cè)響起碰镜,我...
    開封第一講書人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎习瑰,沒想到半個(gè)月后绪颖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡甜奄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年柠横,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片课兄。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡牍氛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出烟阐,到底是詐尸還是另有隱情搬俊,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布蜒茄,位于F島的核電站唉擂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏扩淀。R本人自食惡果不足惜楔敌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驻谆。 院中可真熱鬧卵凑,春花似錦、人聲如沸胜臊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽象对。三九已至黑忱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甫煞。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來泰國打工菇曲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抚吠。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓常潮,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親楷力。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喊式,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,552評(píng)論 32 459
  • ?前端面試題匯總 一萧朝、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過岔留?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評(píng)論 0 8
  • display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系:它們都能讓元素不可見 區(qū)別...
    紋小艾閱讀 1,466評(píng)論 0 1
  • 冬季做戶外運(yùn)動(dòng)時(shí)厕吉,要保護(hù)好身體健康酱固,而膝蓋是我們?nèi)梭w很重要的一部分,并且非常容易受涼头朱。 大多數(shù)膝關(guān)節(jié)的疾病都與膝蓋...
    陪跑閱讀 988評(píng)論 0 0