問題描述

CSS

介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了 border 和 pading;（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？

* 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標(biāo)簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul < li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a: hover, li: nth - child）* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;* 不可繼承的樣式：border padding margin width height ;* 優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);* 載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級(jí)為:

!important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

CSS3新增偽類舉例：

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

如何居中div？如何居中一個(gè)浮動(dòng)元素？

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

div{ width:200px; margin:0 auto; }

居中一個(gè)浮動(dòng)元素

確定容器的寬高 寬500 高 300 的層 設(shè)置層的外邊距 .div { Width:500px ; height:300px;//高度可以不設(shè) Margin: -150px 0 0 -250px; position:relative;相對(duì)定位 background-color:pink;//方便看效果 left:50%; top:50%;}

列出display的值，說明他們的作用。position的值， relative和absolute定位原點(diǎn)是？

1. block 象塊類型元素一樣顯示。 none 缺省值。象行內(nèi)元素類型一樣顯示。 inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。 2. *absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。 *fixed （老IE不支持）生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 *relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。 * static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中 *（忽略 top, bottom, left, right z-index 聲明）。 * inherit 規(guī)定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

CSS3實(shí)現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px）， 對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜 增加了更多的CSS選擇器 多背景 rgba

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

經(jīng)常遇到的CSS的兼容性有哪些？原因，解決方法是什么？

為什么要初始化CSS樣式。

- 因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。- 當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。*最簡(jiǎn)單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）淘寶的樣式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

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

position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？

對(duì)BFC規(guī)范的理解？

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān) 系和相互作用。）

css定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：/*權(quán)重為1*/div{}/*權(quán)重為10*/.class1{}/*權(quán)重為100*/#id1{}/*權(quán)重為100+1=101*/#id1 div{}/*權(quán)重為10+1=11*/.class1 div{}/*權(quán)重為10+10+1=21*/.class1 .class2 div{} 如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧

用過媒體查詢，針對(duì)移動(dòng)端的布局嗎？

使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？

SASS

問題解答

面試不怕不怕啦