CSS3有哪些新特性？
- RGBA和透明度;
-
background-imagebackground-origin(content-box/padding-box/border-box)background-sizebackground-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ì)采用不同的屬性;
請(qǐng)解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場(chǎng)景？
該布局模型的目的是提供一種更加高效的方式來(lái)對(duì)容器中的條目進(jìn)行布局、對(duì)齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來(lái)排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。
試用場(chǎng)景：彈性布局適合于移動(dòng)前端開發(fā)，在Android和ios上也完美支持。
用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
利用邊框樣式設(shè)計(jì)的;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
一個(gè)滿屏品字布局如何設(shè)計(jì)?
第一種真正的品字：
- 三塊高寬是確定的；
- 上面那塊用margin: 0 auto;居中；
- 下面兩塊用float或者inline-block不換行；
- 用margin調(diào)整位置使他們居中。
第二種全屏的品字布局:
上面的div設(shè)置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。
上下margin重合的問題
在重合元素外包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。
例子 :
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代碼-->
.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，以此來(lái)阻止margin重疊*/
overflow: hidden; //此時(shí)已經(jīng)觸發(fā)了BFC屬性。
}
設(shè)置元素浮動(dòng)后，該元素的display值是多少？
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的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樣式/}
CSS優(yōu)化、提高性能的方法有哪些？
- 避免過度約束;
- 避免后代選擇符;
- 避免鏈?zhǔn)竭x擇符;
- 使用緊湊的語(yǔ)法;
- 避免不必要的命名空間;
- 避免不必要的重復(fù);
- 最好使用表示語(yǔ)義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么;
- 避免！important，可以選擇其他選擇器;
- 盡可能的精簡(jiǎn)規(guī)則，可以合并不同類里的重復(fù)規(guī)則;
全屏滾動(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；
讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？
-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
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í)高 ;
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í)最低。
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ù)選框被選中。
