css 面試題-01

來自微信公眾號(hào):前端大全

1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型惜犀?與低版本IE的盒子模型有什么不同的坯沪?

標(biāo)準(zhǔn)盒子模型:寬度=內(nèi)容的寬度(content)+ border + padding + margin
低版本IE盒子模型:寬度=內(nèi)容寬度(content+border+padding)+ margin

2 box-sizing屬性鳖敷?

用來控制元素的盒子模型的解析模式政恍,默認(rèn)為content-box
context-box:W3C的標(biāo)準(zhǔn)盒子模型敬辣,設(shè)置元素的 height/width 屬性指的是content部分的高/寬
border-box:IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬

3 CSS選擇器有哪些蟆豫?哪些屬性可以繼承议忽?

CSS選擇符:id選擇器(#myid)、類選擇器(.myclassname)十减、標(biāo)簽選擇器(div, h1, p)栈幸、相鄰選擇器(h1 + p)、子選擇器(ul > li)帮辟、后代選擇器(li a)速址、通配符選擇器(*)、屬性選擇器(a[rel=”external”])由驹、偽類選擇器(a:hover, li:nth-child)

可繼承的屬性:font-size, font-family, color

不可繼承的樣式:border, padding, margin, width, height

優(yōu)先級(jí)(就近原則):!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級(jí)高

4 CSS優(yōu)先級(jí)算法如何計(jì)算芍锚?

元素選擇符: 1
class選擇符: 10
id選擇符:100
元素標(biāo)簽:1000

!important聲明的樣式優(yōu)先級(jí)最高,如果沖突再進(jìn)行計(jì)算蔓榄。

如果優(yōu)先級(jí)相同闹炉,則選擇最后出現(xiàn)的樣式。

繼承得到的樣式的優(yōu)先級(jí)最低润樱。

5 CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中羡棵。

6 如何居中div壹若?如何居中一個(gè)浮動(dòng)元素?如何讓絕對(duì)定位的div居中?

div:
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;

//  浮動(dòng)元素的上下左右居中:
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

// 絕對(duì)定位的左右居中:
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

還有更加優(yōu)雅的居中方式就是用flexbox店展,我以后會(huì)做整理养篓。

7、 display有哪些值赂蕴?說明他們的作用?

inline(默認(rèn))–內(nèi)聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項(xiàng)目列表
inline-block

8柳弄、 position的值?

static(默認(rèn)):按照正常文檔流進(jìn)行排列概说;
relative(相對(duì)定位):不脫離文檔流碧注,參考自身靜態(tài)位置通過 top, bottom, left, right 定位;
absolute(絕對(duì)定位):參考距其最近一個(gè)不為static的父級(jí)元素通過top, bottom, left, right 定位糖赔;
fixed(固定定位):所固定的參照對(duì)像是可視窗口萍丐。

9、 CSS3有哪些新特性放典?

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap(對(duì)長(zhǎng)的不可分割單詞換行)word-wrap:break-word

文字陰影:text-shadow: 5px 5px 5px #FF0000;(水平陰影逝变,垂直陰影,模糊距離奋构,陰影顏色)

font-face屬性:定義自己的字體

圓角(邊框半徑):border-radius 屬性用于創(chuàng)建圓角

邊框圖片:border-image: url(border.png) 30 30 round

盒陰影:box-shadow: 10px 10px 5px #888888

媒體查詢:定義兩套css壳影,當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

10 請(qǐng)解釋一下CSS3的flexbox(彈性盒布局模型),以及適用場(chǎng)景?

該布局模型的目的是提供一種更加高效的方式來對(duì)容器中的條目進(jìn)行布局弥臼、對(duì)齊和分配空間宴咧。在傳統(tǒng)的布局方式中,block 布局是把塊在垂直方向從上到下依次排列的醋火;而 inline 布局則是在水平方向來排列悠汽。彈性盒布局并沒有這樣內(nèi)在的方向限制,可以由開發(fā)人員自由操作芥驳。
試用場(chǎng)景:彈性布局適合于移動(dòng)前端開發(fā)柿冲,在Android和ios上也完美支持。

1###1 用純CSS創(chuàng)建一個(gè)三角形的原理是什么兆旬?

首先假抄,需要把元素的寬度、高度設(shè)為0丽猬。然后設(shè)置邊框樣式宿饱。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12、 一個(gè)滿屏品字布局如何設(shè)計(jì)?

第一種真正的品字:

三塊高寬是確定的脚祟;

上面那塊用margin: 0 auto;居中谬以;

下面兩塊用float或者inline-block不換行;

用margin調(diào)整位置使他們居中由桌。

第二種全屏的品字布局:
上面的div設(shè)置成100%为黎,下面的div分別寬50%邮丰,然后使用float或者inline使其不換行。

13 常見的兼容性問題铭乾?

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣剪廉。*{margin:0;padding:0;}

IE6雙邊距bug:塊屬性標(biāo)簽float后,又有橫行的margin情況下炕檩,在IE6顯示margin比設(shè)置的大斗蒋。hack:display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

漸進(jìn)識(shí)別的方式笛质,從總體中逐漸排除局部泉沾。首先,巧妙的使用“9”這一標(biāo)記经瓷,將IE瀏覽器從所有情況中分離出來爆哑。接著,再次使用“+”將IE8和IE7舆吮、IE6分離開來揭朝,這樣IE8已經(jīng)獨(dú)立識(shí)別。

{

background-color:#f1ee18;/所有識(shí)別/

.background-color:#00deff\9; /IE6色冀、7潭袱、8識(shí)別/

+background-color:#a200ff;/IE6、7識(shí)別/

_background-color:#1e0bd1;/IE6識(shí)別/

}

設(shè)置較小高度標(biāo)簽(一般小于10px)锋恬,在IE6屯换,IE7中高度超出自己設(shè)置高度拆内。hack:給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度嬉挡。

IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性禽拔;Firefox下索守,只能使用getAttribute()獲取自定義屬性晕窑。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決卵佛。

超鏈接訪問過后hover樣式就不出現(xiàn)了杨赤,被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 為什么要初始化CSS樣式

因?yàn)闉g覽器的兼容問題截汪,不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的疾牲,如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

15 absolute的containing block計(jì)算方式跟正常流有什么不同衙解?

無論屬于哪種阳柔,都要先找到其祖先元素中最近的 position 值不為 static 的元素,然后再判斷:

若此元素為 inline 元素蚓峦,則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形盔沫;

否則,則由這個(gè)祖先元素的 padding box 構(gòu)成医咨。

如果都找不到,則為 initial containing block架诞。

補(bǔ)充:

static(默認(rèn)的)/relative:簡(jiǎn)單說就是它的父元素的內(nèi)容框(即去掉padding的部分)

absolute: 向上找最近的定位為absolute/relative的元素

fixed: 它的containing block一律為根元素(html/body)

16 CSS里的visibility屬性有個(gè)collapse屬性值?在不同瀏覽器下以后什么區(qū)別干茉?

當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后谴忧,對(duì)于一般的元素,它的表現(xiàn)跟hidden是一樣的角虫。

chrome中沾谓,使用collapse值和使用hidden沒有區(qū)別。

firefox戳鹅,opera和IE均驶,使用collapse值和使用display:none沒有什么區(qū)別。

17 display:none與visibility:hidden的區(qū)別枫虏?

display:none 不顯示對(duì)應(yīng)的元素妇穴,在文檔布局中不再分配空間(回流+重繪)
visibility:hidden 隱藏對(duì)應(yīng)元素,在文檔布局中仍保留原來的空間(重繪)

18 position跟display隶债、overflow腾它、float這些特性相互疊加后會(huì)怎么樣?

display屬性規(guī)定元素應(yīng)該生成的框的類型死讹;position屬性規(guī)定元素的定位類型瞒滴;float屬性是一種布局方式,定義元素在哪個(gè)方向浮動(dòng)赞警。
類似于優(yōu)先級(jí)機(jī)制:position:absolute/fixed優(yōu)先級(jí)最高妓忍,有他們?cè)跁r(shí),float不起作用愧旦,display值需要調(diào)整世剖。float 或者absolute定位的元素,只能是塊元素或表格忘瓦。

19 對(duì)BFC規(guī)范(塊級(jí)格式化上下文:block formatting context)的理解搁廓?

BFC規(guī)定了內(nèi)部的Block Box如何布局。
定位方案:

內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置耕皮。

Box垂直方向的距離由margin決定境蜕,屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

每個(gè)元素的margin box 的左邊凌停,與包含塊border box的左邊相接觸粱年。

BFC的區(qū)域不會(huì)與float box重疊。

BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器罚拟,容器里面的子元素不會(huì)影響到外面的元素台诗。

計(jì)算BFC的高度時(shí)完箩,浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā)BFC

根元素拉队,即html

float的值不為none(默認(rèn))

overflow的值不為visible(默認(rèn))

display的值為inline-block弊知、table-cell、table-caption

position的值為absolute或fixed

20 為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)粱快?清除浮動(dòng)的方式秩彤?

浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。由于浮動(dòng)元素不在文檔流中事哭,所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣漫雷。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。
浮動(dòng)帶來的問題:

父元素的高度無法被撐開鳍咱,影響與父元素同級(jí)的元素

與浮動(dòng)元素同級(jí)的非浮動(dòng)元素(內(nèi)聯(lián)元素)會(huì)跟隨其后

若非第一個(gè)元素浮動(dòng)降盹,則該元素之前的元素也需要浮動(dòng),否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)谤辜。

清除浮動(dòng)的方式:

父級(jí)div定義height

最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both蓄坏。

包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。

父級(jí)div定義zoom

21 上下margin重合的問題

在重合元素外包裹一層容器每辟,并觸發(fā)該容器生成一個(gè)BFC剑辫。
例子:

<div class="aside"></div>

<div class="text">

<div class="main"></div>

</div>

.aside {

        margin-bottom: 100px;  

        width: 100px;

        height: 150px;

        background: #f66;

    }

    .main {

        margin-top: 100px;

        height: 200px;

        background: #fcc;

    }

     .text{

        /*盒子main的外面包一個(gè)div,通過改變此div的屬性使兩個(gè)盒子分屬于兩個(gè)不同的BFC渠欺,以此來阻止margin重疊*/

        overflow: hidden;  //此時(shí)已經(jīng)觸發(fā)了BFC屬性妹蔽。

    }

22設(shè)置元素浮動(dòng)后,該元素的display值是多少挠将?

自動(dòng)變成display:block

23 移動(dòng)端的布局用過媒體查詢嗎胳岂?

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css,適應(yīng)相應(yīng)的設(shè)備的顯示舔稀。

<head>里邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24 使用 CSS 預(yù)處理器嗎乳丰?

Less sass

25 CSS優(yōu)化、提高性能的方法有哪些内贮?

避免過度約束

避免后代選擇符

避免鏈?zhǔn)竭x擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復(fù)

最好使用表示語義的名字产园。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么

避免!important夜郁,可以選擇其他選擇器

盡可能的精簡(jiǎn)規(guī)則什燕,你可以合并不同類里的重復(fù)規(guī)則

26 瀏覽器是怎樣解析CSS選擇器的?

CSS選擇器的解析是從右向左解析的竞端。若從左向右的匹配屎即,發(fā)現(xiàn)不符合規(guī)則,需要進(jìn)行回溯,會(huì)損失很多性能技俐。若從右向左匹配乘陪,先找到所有的最右節(jié)點(diǎn),對(duì)于每一個(gè)節(jié)點(diǎn)雕擂,向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則啡邑,則結(jié)束這個(gè)分支的遍歷。兩種匹配規(guī)則的性能差別很大捂刺,是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)(葉子節(jié)點(diǎn))谣拣,而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。
而在 CSS 解析完畢后族展,需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree,最終用來進(jìn)行繪圖拔鹰。在建立 Render Tree 時(shí)(WebKit 中的「Attachment」過程)仪缸,瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果(Style Rules)來確定生成怎樣的 Render Tree。

27 在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體列肢?為什么呢恰画?

使用偶數(shù)字體。偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系瓷马。Windows 自帶的點(diǎn)陣宋體(中易宋體)從 Vista 開始只提供 12拴还、14、16 px 這三個(gè)大小的點(diǎn)陣欧聘,而 13片林、15、17 px時(shí)用的是小一號(hào)的點(diǎn)怀骤。(即每個(gè)字占的空間大了 1 px费封,但點(diǎn)陣沒變),于是略顯稀疏蒋伦。

28 margin和padding分別適合什么場(chǎng)景使用弓摘?

何時(shí)使用margin:

需要在border外側(cè)添加空白

空白處不需要背景色

上下相連的兩個(gè)盒子之間的空白,需要相互抵消時(shí)痕届。

何時(shí)使用padding:

需要在border內(nèi)側(cè)添加空白

空白處需要背景顏色

上下相連的兩個(gè)盒子的空白韧献,希望為兩者之和。

兼容性的問題:在IE5 IE6中研叫,為float的盒子指定margin時(shí)锤窑,左側(cè)的margin可能會(huì)變成兩倍的寬度。通過改變padding或者指定盒子的display:inline解決蓝撇。

29 元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎果复?

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí),它是相對(duì)于父容器的寬度計(jì)算的渤昌,但是虽抄,對(duì)于一些表示豎向距離的屬性走搁,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,當(dāng)按百分比設(shè)定它們時(shí)迈窟,依據(jù)的也是父容器的寬度私植,而不是高度。

30 全屏滾動(dòng)的原理是什么车酣?用到了CSS的哪些屬性曲稼?

原理:有點(diǎn)類似于輪播,整體的元素一直排列下去湖员,假設(shè)有5個(gè)需要展示的全屏頁(yè)面贫悄,那么高度是500%,只是展示100%娘摔,剩下的可以通過transform進(jìn)行y軸定位窄坦,也可以通過margin-top實(shí)現(xiàn)

overflow:hidden;transition:all 1000ms ease凳寺;

31 什么是響應(yīng)式設(shè)計(jì)鸭津?響應(yīng)式設(shè)計(jì)的基本原理是什么?如何兼容低版本的IE肠缨?

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端逆趋,而不是為每一個(gè)終端做一個(gè)特定的版本。
基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理晒奕。
頁(yè)面頭部必須有meta聲明的viewport闻书。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

32 視差滾動(dòng)效果?

視差滾動(dòng)(Parallax Scrolling)通過在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候吴汪,控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來創(chuàng)建出令人驚嘆的3D效果惠窄。

CSS3實(shí)現(xiàn)
優(yōu)點(diǎn):開發(fā)時(shí)間短、性能和開發(fā)效率比較好漾橙,缺點(diǎn)是不能兼容到低版本的瀏覽器

jQuery實(shí)現(xiàn)
通過控制不同層滾動(dòng)速度杆融,計(jì)算每一層的時(shí)間,控制滾動(dòng)效果霜运。
優(yōu)點(diǎn):能兼容到各個(gè)版本的脾歇,效果可控性好
缺點(diǎn):開發(fā)起來對(duì)制作者要求高

插件實(shí)現(xiàn)方式
例如:parallax-scrolling,兼容性十分好

33 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別淘捡?解釋一下這2個(gè)偽元素的作用

單冒號(hào)(:)用于CSS3偽類藕各,雙冒號(hào)(::)用于CSS3偽元素。

::before就是以一個(gè)子元素的存在焦除,定義在元素主體內(nèi)容之前的一個(gè)偽元素激况。并不存在于dom之中,只存在在頁(yè)面之中。

:before 和 :after 這兩個(gè)偽元素乌逐,是在CSS2.1里新出現(xiàn)的竭讳。起初,偽元素的前綴使用的是單冒號(hào)語法浙踢,但隨著Web的進(jìn)化绢慢,在CSS3的規(guī)范里,偽元素的語法被修改成使用雙冒號(hào)洛波,成為::before ::after

34 你對(duì)line-height是如何理解的胰舆?

行高是指一行文字的高度,具體說是兩行文字間基線的距離蹬挤。CSS中起高度作用的是height和line-height缚窿,沒有定義height屬性,最終其表現(xiàn)作用一定是line-height焰扳。
單行文本垂直居中:把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中滨攻,其實(shí)也可以把height刪除。

多行文本垂直居中:需要設(shè)置display屬性為inline-block蓝翰。

35 怎么讓Chrome支持小于12px 的文字?

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36 讓頁(yè)面里的字體變清晰女嘲,變細(xì)用CSS怎么做畜份?

-webkit-font-smoothing在window系統(tǒng)下沒有起作用,但是在IOS設(shè)備上起作用-webkit-font-smoothing:antialiased是最佳的欣尼,灰度平滑爆雹。

37 position:fixed;在android下無效怎么處理?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38 如果需要手動(dòng)寫動(dòng)畫愕鼓,你認(rèn)為最小時(shí)間間隔是多久钙态,為什么?

多數(shù)顯示器默認(rèn)頻率是60Hz菇晃,即1秒刷新60次册倒,所以理論上最小間隔為1/60*1000ms = 16.7ms。

39 li與li之間有看不見的空白間隔是什么原因引起的磺送?有什么解決辦法驻子?

行框的排列會(huì)受到中間空白(回車空格)等的影響,因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式估灿,占據(jù)空間崇呵,所以會(huì)有間隔,把字符大小設(shè)為0馅袁,就沒有空格了域慷。
解決方法:

可以將<li>代碼全部寫在一排

浮動(dòng)li中float:left

在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px

40 display:inline-block 什么時(shí)候會(huì)顯示間隙?

有空格時(shí)候會(huì)有間隙 解決:移除空格

margin正值的時(shí)候 解決:margin使用負(fù)值

使用font-size時(shí)候 解決:font-size:0犹褒、letter-spacing抵窒、word-spacing

41 有一個(gè)高度自適應(yīng)的div,里面有兩個(gè)div化漆,一個(gè)高度100px估脆,希望另一個(gè)填滿剩下的高度

外層div使用position:relative;高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

42 png座云、jpg疙赠、gif 這些圖片格式解釋一下,分別什么時(shí)候用朦拖。有沒有了解過webp圃阳?

png是便攜式網(wǎng)絡(luò)圖片(Portable Network Graphics)是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是:壓縮比高,色彩好璧帝。 大多數(shù)地方都可以用捍岳。

jpg是一種針對(duì)相片使用的一種失真壓縮方法,是一種破壞性的壓縮睬隶,在色調(diào)及顏色平滑變化做的不錯(cuò)锣夹。在www上,被用來儲(chǔ)存和傳輸照片的格式苏潜。

gif是一種位圖文件格式银萍,以8位色重現(xiàn)真色彩的圖像⌒糇螅可以實(shí)現(xiàn)動(dòng)畫效果.

webp格式是谷歌在2010年推出的圖片格式贴唇,壓縮率只有jpg的2/3,大小比png小了45%飞袋。缺點(diǎn)是壓縮的時(shí)間更久了戳气,兼容性不好,目前谷歌和opera支持巧鸭。

43 style標(biāo)簽寫在body后與body前有什么區(qū)別瓶您?

頁(yè)面加載自上而下 當(dāng)然是先加載樣式。
寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析蹄皱,當(dāng)解析到寫在尾部的樣式表(外聯(lián)或?qū)懺趕tyle標(biāo)簽)會(huì)導(dǎo)致瀏覽器停止之前的渲染览闰,等待加載且解析樣式表完成之后重新渲染,在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象(即樣式失效導(dǎo)致的頁(yè)面閃爍問題)

44 CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?

參數(shù)是scroll時(shí)候巷折,必會(huì)出現(xiàn)滾動(dòng)條压鉴。
參數(shù)是auto時(shí)候,子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條锻拘。
參數(shù)是visible時(shí)候油吭,溢出的內(nèi)容出現(xiàn)在父元素之外击蹲。
參數(shù)是hidden時(shí)候,溢出隱藏婉宰。

45 闡述一下CSS Sprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去歌豺,然后利用CSS的 background-image,background- repeat心包,background-position 的組合進(jìn)行背景定位类咧。利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求,從而大大的提高頁(yè)面的性能蟹腾;CSS Sprites能減少圖片的字節(jié)痕惋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市娃殖,隨后出現(xiàn)的幾起案子值戳,更是在濱河造成了極大的恐慌,老刑警劉巖炉爆,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堕虹,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡芬首,警方通過查閱死者的電腦和手機(jī)赴捞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來郁稍,“玉大人螟炫,你說我怎么就攤上這事∫涨纾” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵掸屡,是天一觀的道長(zhǎng)封寞。 經(jīng)常有香客問我,道長(zhǎng)仅财,這世上最難降的妖魔是什么狈究? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮盏求,結(jié)果婚禮上抖锥,老公的妹妹穿的比我還像新娘。我一直安慰自己碎罚,他們只是感情好磅废,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荆烈,像睡著了一般拯勉。 火紅的嫁衣襯著肌膚如雪竟趾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天宫峦,我揣著相機(jī)與錄音岔帽,去河邊找鬼。 笑死导绷,一個(gè)胖子當(dāng)著我的面吹牛犀勒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播妥曲,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼贾费,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了逾一?” 一聲冷哼從身側(cè)響起铸本,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遵堵,沒想到半個(gè)月后箱玷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陌宿,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年锡足,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壳坪。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡舶得,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出爽蝴,到底是詐尸還是另有隱情沐批,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布蝎亚,位于F島的核電站九孩,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏发框。R本人自食惡果不足惜躺彬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望梅惯。 院中可真熱鬧宪拥,春花似錦、人聲如沸铣减。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽葫哗。三九已至犁河,卻和暖如春鳖枕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背桨螺。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工宾符, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人灭翔。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓魏烫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親肝箱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子哄褒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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