CSS常見(jiàn)面試題

1 CSS常見(jiàn)面試題

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屬性?
用來(lái)控制元素的盒子模型的解析模式,默認(rèn)為content-boxcontext-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)、類(lèi)選擇器(.myclassname)、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器(ul > li)、后代選擇器(li a)、通配符選擇器(*)、屬性選擇器(a[rel=”external”])、偽類(lèi)選擇器(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新增偽類(lèi)有那些?
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有哪些值?說(shuō)明他們的作用?

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)位置通過(guò) top, bottom, left, right 定位;
absolute(絕對(duì)定位):參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)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
媒體查詢(xún):定義兩套css,當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

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

11.什么是 BFC機(jī)制
BFC(Block Formatting Context),塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。

觸發(fā)條件 (以下任意一條)
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或則releative中的任何一個(gè)

在IE下, Layout,可通過(guò)zoom:1 觸發(fā)BFC布局與普通文檔流布局區(qū)別:

BFC布局規(guī)則:

浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度(父級(jí)元素觸發(fā)了BFC)
非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素的位置(非浮動(dòng)元素觸發(fā)了BFC)
margin不會(huì)傳遞給父級(jí)(父級(jí)觸發(fā)BFC)
屬于同一個(gè)BFC的兩個(gè)相鄰元素上下margin會(huì)重疊
普通文檔流布局: 浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
margin會(huì)傳遞給父級(jí)元素
兩個(gè)相鄰元素上下的margin會(huì)重疊

開(kāi)發(fā)中的應(yīng)用

阻止margin重疊
可以包含浮動(dòng)元素 —— 清除內(nèi)部浮動(dòng)(清除浮動(dòng)的原理是兩個(gè) div都位于同一個(gè) BFC 區(qū)域之中)
自適應(yīng)兩欄布局
可以阻止元素被浮動(dòng)元素覆蓋

12. CSS3中新增的選擇器以及屬性
這里只是列出來(lái), 具體的使用,請(qǐng)查看我的關(guān)于css3新增選擇器與屬性文章

image
image
image
image

13. 居中布局
水平居中

1. 行內(nèi)元素: text-align:center

2. 塊級(jí)元素: margin:0 auto

3. 絕對(duì)定位和移動(dòng): absolute + transform

4. 絕對(duì)定位和負(fù)邊距: absolute + margin

5. flex布局: flex + justify-content:center

垂直居中

1. 子元素為單行文本: line-height:height

2. absolute + transform

3. flex + align-items:center

4. table: display:table-cell; vertical-align: middle

5. 利用position和top和負(fù)margin

水平垂直居中

image

1. 已知元素寬高:絕對(duì)定位+margin:auto:

div{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

2. 已知元素寬高: 絕對(duì)定位+負(fù)margin

 div{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

3. absolute+transform

div{
     width: 200px;
     height: 200px;
     background: green;

     position:absolute;
     left:50%;    /* 定位父級(jí)的50% */
     top:50%;
     transform: translate(-50%,-50%); /*自己的50% */
   }

4.flex + justify-content + align-items

.box{
   height:600px;

   display:flex;
   justify-content:center;  //子元素水平居中
   align-items:center;      //子元素垂直居中
     /* aa只要三句話(huà)就可以實(shí)現(xiàn)不定寬高水平垂直居中。*/
    }
  .box>div{
    background: green;
    width: 200px;
    height: 200px;
  }

14. 清除浮動(dòng)有哪些方法, 各有什么優(yōu)缺點(diǎn)
使用clear屬性的空元素 在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>,并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。亦可使用<br class="clear" />或<hr class="clear" />來(lái)進(jìn)行清理。

優(yōu)點(diǎn): 簡(jiǎn)單, 寫(xiě)少量代碼, 兼容性也好 缺點(diǎn): 添加無(wú)語(yǔ)義html元素, 不利于代碼語(yǔ)義化, 后期維護(hù)成本大

使用css的overflow屬性 給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng),另外在 IE6 中還需要觸發(fā) hasLayout ,例如為父元素設(shè)置容器寬高或設(shè)置zoom:1。在添加overflow屬性后,浮動(dòng)元素又回到了容器層,把容器高度撐起,達(dá)到了清理浮動(dòng)的效果。

優(yōu)點(diǎn): 簡(jiǎn)單, 代碼少, 瀏覽器支持好 缺點(diǎn): 不能和position配合使用, 因?yàn)槌龅某叽鐣?huì)被隱藏overflow:hidden

使用CSS的:after偽元素 結(jié)合 :after 偽元素(注意這不是偽類(lèi),而是偽元素,代表一個(gè)元素之后最近的元素)和 IEhack ,可以完美兼容當(dāng)前主流的各大瀏覽器,這里的 IEhack 指的是觸發(fā) hasLayout。給浮動(dòng)元素的容器添加一個(gè) clearfix的class,然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見(jiàn)的塊元素(Block element)清理浮動(dòng)。通過(guò)CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見(jiàn)的空格"020"或點(diǎn)".",并且賦予clear屬性來(lái)清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器,要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。
優(yōu)點(diǎn): 瀏覽器支持好,不容易出現(xiàn)怪問(wèn)題(目前:大型網(wǎng)站都有使用,如:騰迅,網(wǎng)易,新浪等等)
缺點(diǎn): 代碼多,要兩句代碼結(jié)合使用,才能讓主流瀏覽器都支持給父級(jí)元素設(shè)置高度簡(jiǎn)單, 代碼少,好掌握 缺點(diǎn): 只適用于高度固定的布局

15. 用純CSS創(chuàng)建一個(gè)三角形的原理是什么
之前寫(xiě)三角形, 都是直接記住代碼,沒(méi)有探究原因,我也是直到有一次面試時(shí),面試大哥讓我說(shuō)說(shuō)css創(chuàng)建三角形的原理,我就......回來(lái)就趕緊翻資料.接下來(lái)我就將當(dāng)時(shí)我理解的過(guò)程列舉出來(lái):
1. 寫(xiě)一個(gè)我們最熟悉的 border應(yīng)用

.box{
  width:100px;
  height:100px;
  border: 3px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

效果如下:

image

2. 接下來(lái),我們將border值增大

.box{
  width:100px;
  height:100px;
  border: 50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
image

很容易發(fā)現(xiàn), border渲染并不是正方形, 而是梯形的.
3. 在增大border的基礎(chǔ)下, 此時(shí)我們將盒子寬高變成0,會(huì)產(chǎn)生什么效果呢!

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
image

四個(gè)三角形拼合成的矩形呈現(xiàn)在我們眼前,那如如果我們只想要一個(gè)三角形, 我們是不是可以設(shè)想將其他三個(gè)設(shè)為不可見(jiàn);
4. 設(shè)置透明, 隱藏其中三個(gè)三角形

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:transparent transparent transparent #ef4848;
}
image

三角形這樣就出來(lái), 有木有很簡(jiǎn)單, 當(dāng)然我們也可以采用逆向思維來(lái)寫(xiě)這個(gè)效果, 就是先將所有邊框設(shè)為透明, 然后需要哪邊再對(duì)其設(shè)置顏色, 效果是一樣的

.box{
  width:0px;
  height:0px;
  border: 50px solid transparent;
  border-left:50px solid #ef4848;
}

這樣給面試你的人講,講明白應(yīng)該不是問(wèn)題., 重點(diǎn)就是要理解border的應(yīng)用

16. 實(shí)現(xiàn)三欄布局有哪些方法, 分別描述一下
三欄布局,顧名思義就是兩邊固定,中間自適應(yīng)。三欄布局在開(kāi)發(fā)十分常見(jiàn),那么什么是三欄布局?即左右模塊固定寬度,中間模塊隨瀏覽器變化自適應(yīng),想要完成的最終效果如下圖所示:

image

下面列出四種實(shí)現(xiàn)方式, 在開(kāi)發(fā)中可以根據(jù)實(shí)際需求選擇適合自己的方法進(jìn)行編碼:
Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<div class="container">
  <div class="left">1</div>
  <div class="main">2</div>
  <div class="right">3</div>
</div>

簡(jiǎn)單實(shí)用,現(xiàn)在比較流行的方案,但是需要考慮瀏覽器的兼容性。
絕對(duì)定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
  }
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
  }
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
  }
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<div class="container">
  <div class="left">1</div>
  <div class="main">2</div>
  <div class="right">3</div>
</div>

這種方案也簡(jiǎn)單實(shí)用, 并且可以將 <div class="main"></div>元素放到第一位,使得主要內(nèi)容優(yōu)先加載!
雙飛翼布局

<style>
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellow;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}  
</style>
<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

圣杯布局

<style>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: yellow;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}
</style>
<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

圣杯布局和雙飛翼布局解決問(wèn)題的方案在前一半是相同的,也就是三欄全部float浮動(dòng),但左右兩欄加上負(fù)margin讓其跟中間欄div并排,以形成三欄布局。
17. css3實(shí)現(xiàn)0.5px的細(xì)線(xiàn)


<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<div class="line"></div>

18. link 與 @import 的區(qū)別
a.從屬關(guān)系區(qū)別@import是 CSS 提供的語(yǔ)法規(guī)則,只有導(dǎo)入樣式表的作用;link是HTML提供的標(biāo)簽,不僅可以加載 CSS 文件,還可以定義 RSS、rel 連接屬性等
b.加載順序區(qū)別加載頁(yè)面時(shí),link標(biāo)簽引入的 CSS 被同時(shí)加載;@import引入的 CSS 將在頁(yè)面加載完畢后被加載。
c.兼容性區(qū)別@import是 CSS2.1 才有的語(yǔ)法,故只可在 IE5+ 才能識(shí)別;link標(biāo)簽作為 HTML 元素,不存在兼容性問(wèn)題。
d.DOM可控性區(qū)別可以通過(guò) JS 操作 DOM ,插入link標(biāo)簽來(lái)改變樣式;由于DOM方法是基于文檔的,無(wú)法使用@import的方式插入樣式。

19. 開(kāi)發(fā)中為什么要初始化css樣式
因?yàn)闉g覽器的兼容問(wèn)題,不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的,如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
20. CSS優(yōu)化、提高性能的方法有哪些
盡量將樣式寫(xiě)在單獨(dú)的css文件里面,在head元素中引用 將代碼寫(xiě)成單獨(dú)的css文件有幾點(diǎn)好處:

內(nèi)容和樣式分離,易于管理和維護(hù)
減少頁(yè)面體積
css文件可以被緩存、重用,維護(hù)成本降低

不使用@import避免使用復(fù)雜的選擇器,層級(jí)越少越好 建議選擇器的嵌套最好不要超過(guò)三層,
比如:精簡(jiǎn)頁(yè)面的樣式文件,去掉不用的樣式利用CSS繼承減少代碼量避免
!important,可以選擇其他選擇器

21 什么是響應(yīng)式設(shè)計(jì)?響應(yīng)式設(shè)計(jì)的基本原理是什么?如何兼容低版本的IE?
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端,而不是為每一個(gè)終端做一個(gè)特定的版本。基本原理是通過(guò)媒體查詢(xún)檢測(cè)不同的設(shè)備屏幕尺寸做處理。
頁(yè)面頭部必須有meta聲明的viewport。<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

22 視差滾動(dòng)效果?
視差滾動(dòng)(Parallax Scrolling)通過(guò)在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候,控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來(lái)創(chuàng)建出令人驚嘆的3D效果。
CSS3實(shí)現(xiàn)優(yōu)點(diǎn):開(kāi)發(fā)時(shí)間短、性能和開(kāi)發(fā)效率比較好,缺點(diǎn)是不能兼容到低版本的瀏覽器jQuery實(shí)現(xiàn)通過(guò)控制不同層滾動(dòng)速度,計(jì)算每一層的時(shí)間,控制滾動(dòng)效果。
優(yōu)點(diǎn):能兼容到各個(gè)版本的,效果可控性好缺點(diǎn):開(kāi)發(fā)起來(lái)對(duì)制作者要求高插件實(shí)現(xiàn)方式例如:parallax-scrolling,兼容性十分好

23 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別?解釋一下這2個(gè)偽元素的作用
單冒號(hào)(:)用于CSS3偽類(lèi),雙冒號(hào)(::)用于CSS3偽元素。
::before就是以一個(gè)子元素的存在,定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中,只存在在頁(yè)面之中。
:before 和 :after 這兩個(gè)偽元素,是在CSS2.1里新出現(xiàn)的。
起初,偽元素的前綴使用的是單冒號(hào)語(yǔ)法,但隨著Web的進(jìn)化,在CSS3的規(guī)范里,偽元素的語(yǔ)法被修改成使用雙冒號(hào),成為::before ::after

24 你對(duì)line-height是如何理解的?
行高是指一行文字的高度,具體說(shuō)是兩行文字間基線(xiàn)的距離。
CSS中起高度作用的是height和line-height,沒(méi)有定義height屬性,最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中:把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中,其實(shí)也可以把height刪除。多行文本垂直居中:需要設(shè)置display屬性為inline-block。

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

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

26 讓頁(yè)面里的字體變清晰,變細(xì)用CSS怎么做?
-webkit-font-smoothing在window系統(tǒng)下沒(méi)有起作用,但是在IOS設(shè)備上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
27 position:fixed;在android下無(wú)效怎么處理?

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

28 如果需要手動(dòng)寫(xiě)動(dòng)畫(huà),你認(rèn)為最小時(shí)間間隔是多久,為什么?
多數(shù)顯示器默認(rèn)頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。

29 li與li之間有看不見(jiàn)的空白間隔是什么原因引起的?有什么解決辦法?
行框的排列會(huì)受到中間空白(回車(chē)空格)等的影響,因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式,占據(jù)空間,所以會(huì)有間隔,把字符大小設(shè)為0,就沒(méi)有空格了。
解決方法:
可以將<li>代碼全部寫(xiě)在一排浮動(dòng)li中float:left在ul中用font-size:0(谷歌不支持);
可以使用letter-space:-3px

30 display:inline-block 什么時(shí)候會(huì)顯示間隙?
有空格時(shí)候會(huì)有間隙 解決:移除空格margin正值的時(shí)候 解決:margin使用負(fù)值使用font-size時(shí)候
解決:font-size:0、letter-spacing、word-spacing

31 有一個(gè)高度自適應(yīng)的div,里面有兩個(gè)div,一個(gè)高度100px,希望另一個(gè)填滿(mǎn)剩下的高度
外層div使用position:relative;
高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0;
left: 0

32 png、jpg、gif 這些圖片格式解釋一下,分別什么時(shí)候用。有沒(méi)有了解過(guò)webp?
png是便攜式網(wǎng)絡(luò)圖片(Portable Network Graphics)是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式.
優(yōu)點(diǎn)是:壓縮比高,色彩好。大多數(shù)地方都可以用。jpg是一種針對(duì)相片使用的一種失真壓縮方法,是一種破壞性的壓縮,在色調(diào)及顏色平滑變化做的不錯(cuò)。在www上,被用來(lái)儲(chǔ)存和傳輸照片的格式。
gif是一種位圖文件格式,以8位色重現(xiàn)真色彩的圖像。可以實(shí)現(xiàn)動(dòng)畫(huà)效果.
webp格式是谷歌在2010年推出的圖片格式,壓縮率只有jpg的2/3,大小比png小了45%。
缺點(diǎn)是壓縮的時(shí)間更久了,兼容性不好,目前谷歌和opera支持。

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

34 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í)候,溢出隱藏。

35 闡述一下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)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,228評(píng)論 0 8
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,508評(píng)論 0 5
  • 1.盒模型 每一個(gè)盒子有四條邊界:外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容...
    小伙兒_0c3c閱讀 377評(píng)論 0 0
  • 前言:為了滿(mǎn)足互聯(lián)網(wǎng)數(shù)據(jù)分發(fā)的要求,Ulord原鏈引入了主節(jié)點(diǎn)系統(tǒng),將整個(gè)主節(jié)點(diǎn)網(wǎng)絡(luò)構(gòu)造為點(diǎn)對(duì)點(diǎn)的文件分發(fā)網(wǎng)絡(luò),提...
    區(qū)塊鏈投資界閱讀 456評(píng)論 1 10
  • 洛寧的孩子真的傷不起,光娶個(gè)媳婦就需要高額的彩禮,另外如果還要求在城里買(mǎi)套房子,那真的是苦不堪言,現(xiàn)在結(jié)個(gè)婚,都要...
    楊小冰閱讀 1,043評(píng)論 0 0