史上最全面試題(CSS)
1.CSS 選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算? CSS3新增偽類有那些?
選擇器:1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標籤選擇器(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 ;
優先順序為:
!important > id > class > tag
important 比 內聯優先順序高
優先順序就近原則,同權重情況下樣式定義最近者為準;
載入樣式以最後載入的定位為準;
CSS3新增偽類舉例
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p>元素。
p:last-of-type 選擇屬於其父元素的最後<p> 元素的每個 <p>元素。
p:only-of-type 選擇屬於其父元素唯一的<p> 元素的每個 <p> 元素。
p:only-child
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控制元件的禁用狀態。
:checked 單選框或複選框被選中。
2.如何居中div?
// 給div設定一個寬度,然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
3.前端頁面由哪三層構成,分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
4.清除浮動的幾種方式,各自的優缺點
1.使用空標籤清除浮動
2.使用overflow:auto(使用zoom:1用於相容IE,缺點:內部寬高超過父級div時,會出現滾動條)
3.是用afert偽元素清除浮動(IE8以上和非IE瀏覽器才支援,目前:大型網站都有使用,如:騰迅,網易,新浪等等)
5.如何居中一個浮動元素?
1.確定容器的寬高 寬500 高 300 的層
2.設定層的外邊距
.div {
Width:500px ;
height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
6.列出display的值,說明他們的作用。
block 象塊型別元素一樣顯示。
none 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示,並新增樣式列表標記。
7.position的值, relative和absolute定位原點是?
*absolute:生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。
*fixed:生成絕對定位的元素,相對於瀏覽器視窗進行定位。
*relative:生成相對定位的元素,相對於其正常位置進行定位。
static 預設值。沒有定位,元素出現在正常的流中
(忽略 top, bottom, left, right z-index 宣告)。
inherit 規定從父元素繼承 position 屬性的值。
8.CSS3有哪些新特性?
CSS3實現圓角(border-radius:8px),陰影(box-shadow:10px),
對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
9.absolute的containing block計算方式跟正常流有什麼不同?
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
他們之間優先順序的關係
綜上所述,1、可以把它看作是一個類似優先順序的機制, "position:absolute" 和 "position:fixed" 優先順序最高,有它存在的時候,浮動不起作用,'display' 的值也需要調整; 2、元素的 'float' 特性的值不是 "none" 的時候或者它是根元素的時候,調整 'display' 的值; 3、非根元素,並且非浮動元素,並且非絕對定位的元素,'display' 特性值同設定值。
這從另一個側面說明了一個問題:浮動或絕對定位的元素,只能是塊元素或表格。
10.使用 CSS 前處理器嗎?喜歡那個?
SASS、LESS
11.display:inline-block 什麼時候會顯示間隙?(攜程)
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
12.display:none和visibility:hidden的區別?
display:none 隱藏對應的元素,在文件佈局中不再給它分配空間,它各邊的元素會合攏,
就當他從來不存在。
visibility:hidden 隱藏對應的元素,但是在文件佈局中仍保留原來的空間。
13.CSS中link 和@import的區別是?
A:(1) link屬於HTML標籤,而@import是CSS提供的; (2) 頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入;(3) import只在IE5以上才能識別,而link是HTML標籤,無相容問題; (4) link方式的樣式的權重 高於@import的權重.
14.position的absolute與fixed共同點與不同點
A:共同點:
1.改變行內元素的呈現方式,display被置為block;2.讓元素脫離普通流,不佔據空間;3.預設會覆蓋到非定位元素上
B不同點:
absolute的”根元素“是可以設定的,而fixed的”根元素“固定為瀏覽器視窗。當你滾動網頁,fixed元素與瀏覽器視窗之間的距離是不變的。
15.介紹一下CSS的盒子模型?
1)有兩種, IE 盒子模型、標準 W3C 盒子模型;IE的content部分包含了 border 和 pading;
2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
CSS盒子模型
16.列出display的值,說明他們的作用。position的值, relative和absolute分別是相對於誰進行定位的?
1.block 象塊型別元素一樣顯示。
inline 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示,並新增樣式列表標記。
2.*absolute生成絕對定位的元素,相對於 static 定位以外的第一個祖先元素進行定位。
*fixed (老IE不支援)生成絕對定位的元素,相對於瀏覽器視窗進行定位。
*relative生成相對定位的元素,相對於其在普通流中的位置進行定位。
* static 預設值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 宣告)。
* inherit 規定從父元素繼承 position 屬性的值。
17.CSS3有哪些新特性?
CSS3實現圓角(border-radius),陰影(box-shadow),
對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢,多欄佈局
border-image
18.對BFC規範的理解?
BFC,塊級格式化上下文,一個建立了新的BFC的盒子是獨立佈局的,盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向(和佈局方向有關係)的margin會發生摺疊。
(W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行佈局,以及與其他元素的關係和相互作用。)
19.解釋下 CSS sprites,以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷,因為請求耗時比較長;請求雖然可以併發,但是也有限制,一般瀏覽器都是6個。對於未來而言,就不需要這樣做了,因為有了`http2`。
20.介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什麼不同的?
(1)有兩種, IE 盒子模型、W3C 盒子模型;
(2)盒模型內容(content)、填充(padding)、邊界(margin)、邊框(border);
(3)區 別: IE的content部分把 border 和 pading計算了進去;
21.CSS選擇符有哪些?哪些屬性可以繼承?
* 1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標籤選擇器(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 ;
22.如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
給div設定一個寬度,然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設定層的外邊距
.div {
width:500px ; height:300px;//高度可以不設
margin: -150px 0 0 -250px;
position:relative; //相對定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
讓絕對定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
23.display有哪些值?說明他們的作用。
block 象塊型別元素一樣顯示。
none 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示,並新增樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
24.position的值relative和absolute定位原點是?
absolute
生成絕對定位的元素,相對於值不為 static的第一個父元素進行定位。
fixed (老IE不支援)
生成絕對定位的元素,相對於瀏覽器視窗進行定位。
relative
生成相對定位的元素,相對於其正常位置進行定位。
static
預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index 宣告)。
inherit
規定從父元素繼承 position 屬性的值。
25.CSS3有哪些新特性?
新增各種CSS選擇器 (: not(.input):所有 class 不是“input”的節點)
圓角 (border-radius:8px)
多列布局 (multi-column layout)
陰影和反射 (Shadow\Reflect)
文字特效 (text-shadow、)
文字渲染 (Text-decoration)
線性漸變 (gradient)
旋轉(transform)
增加了旋轉,縮放,定位,傾斜,動畫,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
26.請解釋一下CSS3的Flexbox(彈性盒佈局模型),以及適用場景?
27.用純CSS建立一個三角形的原理是什麼?
把上、左、右三條邊隱藏掉(顏色設為 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
27.一個滿屏品字佈局如何設計?
簡單的方式:
上面的div寬100%,
下面的兩個div分別寬50%,
然後用float或者inline使其不換行即可
28.經常遇到的瀏覽器的相容性有哪些?原因,解決方法是什麼,常用hack的技巧?
* png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.
* 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入 ——display:inline;將其轉化為行內屬性。(這個符號只有ie6會識別)
漸進識別的方式,從總體中逐漸排除區域性。
首先,巧妙的使用“\9”這一標記,將IE遊覽器從所有情況中分離出來。
接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統一通過getAttribute()獲取自定義屬性。
IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性。
解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
27.li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
行框的排列會受到中間空白(回車\空格)等的影響,因為空格也屬於字元,這些空白也會被應用樣式,佔據空間,所以會有間隔,把字元大小設為0,就沒有空格了。
28.為什麼要初始化CSS樣式。
因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
最簡單的初始化方法: * {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, \5b8b\4f53; }
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; }
29.absolute的containing block(容器塊)計算方式跟正常流有什麼不同?
無論屬於哪種,都要先找到其祖先元素中最近的 position 值不為 static 的元素,然後再判斷:
1、若此元素為 inline 元素,則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形;
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到,則為 initial containing block。
補充:
1. static(預設的)/relative:簡單說就是它的父元素的內容框(即去掉padding的部分)
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body),根元素也是initial containing block
30.CSS裡的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
31.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
32.對BFC規範(塊級格式化上下文:block formatting context)的理解?
(W3C CSS 2.1 規範中的一個概念,它是一個獨立容器,決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。)
一個頁面是由很多個 Box 組成的,元素的型別和 display 屬性,決定了這個 Box 的型別。
不同型別的 Box,會參與不同的 Formatting Context(決定如何渲染文件的容器),因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
css定義的權重
以下是權重的規則:標籤的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值:
/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}
如果權重相同,則最後定義的樣式會起作用,但是應該避免這種情況出現
請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
移動端的佈局用過媒體查詢嗎?
33.使用 CSS 前處理器嗎?喜歡那個?
SASS (SASS、LESS沒有本質區別,只因為團隊前端都是用的SASS)
34.如何修改chrome記住密碼後自動填充表單的黃色背景?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
35.設定元素浮動後,該元素的display值是多少?(自動變成display:block)
怎麼讓Chrome支援小於12px 的文字?
用圖片:如果是內容固定不變情況下,使用將小於12px文字內容切出做圖片,這樣不影響相容也不影響美觀
使用12px及12px以上字型大小:為了相容各大主流瀏覽器,建議設計美工圖時候設定大於或等於12px的字型大小,如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不相容等事宜
繼續使用小於12px字型大小樣式設定:如果不考慮chrome可以不用考慮相容,同時在設定小於12px物件設定-webkit-text-size-adjust:none,做到最大相容考慮
使用12px以上字型:為了相容、為了程式碼更簡單 從新考慮權重下相容性。
36.font-style屬性可以讓它賦值為“oblique” oblique是什麼意思?(傾斜的字型樣式)
37.position:fixed;在android下無效怎麼處理?
fixed的元素是相對整個頁面固定位置的,你在螢幕上滑動只是在移動這個所謂的viewport,原來的網頁還好好的在那,fixed的內容也沒有變過位置,
所以說並不是iOS不支援fixed,只是fixed的元素不是相對手機螢幕固定的
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
38.png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
如果靜態檔案都放在主域名下,那靜態檔案請求的時候都帶有的cookie的資料提交給server的,非常浪費流量,所以不如隔離開。
因為cookie有域的限制,因此不能跨域提交請求,故使用非主要域名的時候,請求頭中就不會帶有cookie資料,這樣可以降低請求頭的大小,降低請求時間,從而達到降低整體請求延時的目的
同時這種方式不會將cookie傳入Web Server,也減少了Web Server對cookie的處理分析環節,提高了webserver的http請求的解析速度。
39.Style標籤寫在body後與body前有什麼區別?
40.什麼是CSS 前處理器 / 後處理器?
前處理器例如:LESS、Sass、Stylus,用來預編譯