css經(jīng)典面試題
- 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
- box-sizing屬性？
- 請(qǐng)列舉一下你所知道的css 隱藏元素的方法？
- CSS 常見的偽類和偽元素有哪些，他們的區(qū)別？
- CSS選擇器有哪些？哪些屬性可以繼承？CSS優(yōu)先級(jí)算法如何計(jì)算？
- 如何居中div？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的div居中？如何居中一個(gè)img（position定位）
- display 有哪些值？說明他們的作用?
- position 的值？
- CSS3有哪些新特性？
- 用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
- 為什么要初始化 CSS 樣式
- position 跟 display、overflow、float 這些特性相互疊加后會(huì)怎么樣？
- 為什么會(huì)出現(xiàn)浮動(dòng)? 什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)有哪些方式？
- 設(shè)置元素浮動(dòng)后，該元素的 display 值是多少？
- 移動(dòng)端的布局用過媒體查詢嗎？
- 什么是CSS 預(yù)處理器 / 后處理器？大家為什么要使用他們？
- CSS優(yōu)化、提高性能的方法有哪些？
- 在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
- margin 和 padding 分別適合什么場(chǎng)景使用？
- 元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？
- 什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？
- 怎么讓Chrome支持小于12px 的文字？
- 讓頁面里的字體變清晰，變細(xì)用CSS怎么做？
- 有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度
- CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?
- 有哪項(xiàng)方式可以對(duì)一個(gè) DOM 設(shè)置它的CSS樣式？
- CSS 中可以通過哪些屬性定義，使得一個(gè) DOM 元素不顯示在瀏覽器可視范圍內(nèi)？
- 行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？行內(nèi)元素的 padding 和 margin 可設(shè)置嗎？
- px、em、rem的區(qū)別
- 前端頁面有哪三層構(gòu)成，分別是什么?
- CSS引入的方式有哪些？使用Link和@import有什么區(qū)別？
- 介紹一下你對(duì)瀏覽器內(nèi)核的理解
- 如何水平并且垂直居中一張背景圖
- 強(qiáng)制換行的css是什么？
css面試題解析
介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
盒子模型就是 元素在網(wǎng)頁中的實(shí)際占位，有兩種：標(biāo)準(zhǔn)盒子模型和IE盒子模型
- 標(biāo)準(zhǔn)(W3C)盒子模型：內(nèi)容content+填充padding+邊框border+邊界margin
寬高指的是 content 的寬高- 低版本IE盒子模型：內(nèi)容（content+padding+border）+ 邊界margin，
寬高指的是 content+padding+border 部分的寬高
問題的拓展：
CSS 如何設(shè)置這兩種模型？
box-sizing : content-box box-sizing : border-box
JS 如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高？
dom.style.width/height;//設(shè)置獲取的是內(nèi)聯(lián)樣式dom.currentStyle.width/height;//只有IE支持window.getComputedStyle(dom).width/height;//兼容性好dom.getBoundingClientRect().width/height;//適用場(chǎng)所：計(jì)算一個(gè)元素的絕對(duì)位置
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 屬性指的是 content + border + padding 部分的高/寬
請(qǐng)列舉一下你所知道的css 隱藏元素的方法？
- display：none 不顯示對(duì)應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）
- visibility：hidden 隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）
CSS 常見的偽類和偽元素有哪些，他們的區(qū)別？
- 偽元素主要是用來創(chuàng)建一些不存在原有dom結(jié)構(gòu)樹種的元素
- 偽類表示已存在的某個(gè)元素處于某種狀態(tài)，但是通過dom樹又無法表示這種狀態(tài)，就可以通過偽類來為其添加樣式
- 偽元素的操作對(duì)象是新生成的dom元素，而不是原來dom結(jié)構(gòu)里就存在的；而偽類恰好相反，偽類的操作對(duì)象是原來的dom結(jié)構(gòu)里就存在的元素。
偽元素與偽類的根本區(qū)別在于：操作的對(duì)象元素是否存在于原來的dom結(jié)構(gòu)里- 常見的偽類：
:link 應(yīng)用于未被訪問過的鏈接
:visited 應(yīng)用于被訪問過的鏈接
:hover 應(yīng)用于鼠標(biāo)懸停到的元素
:first-child 選擇某元素第一個(gè)子元素
:last-child 選擇最后一個(gè)。。。。。
:disabled 表單元素禁用
:enabled 匹配沒有被禁用的元素- 常見的偽元素：
::first-letter 選擇元素文本的第一個(gè)字
::first-line 選擇元素文本的第一行
::before 在元素內(nèi)容的最前面添加新內(nèi)容。
::after 在元素內(nèi)容的最后面添加新內(nèi)容。
CSS選擇器有哪些？哪些屬性可以繼承？CSS優(yōu)先級(jí)算法如何計(jì)算？
- 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，ul，li，dl，dt，dd；
不可繼承的樣式：border, padding, margin, width, height
優(yōu)先級(jí)（就近原則）：!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級(jí)高
- 優(yōu)先級(jí)算法計(jì)算
優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)
!important>id >class>tag
important比內(nèi)聯(lián)優(yōu)先級(jí)高
元素選擇符的權(quán)值：元素標(biāo)簽（派生選擇器）：1，class選擇符：10，id選擇符：100，內(nèi)聯(lián)樣式權(quán)值最大，為1000
!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算。
如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低。
如何居中div？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的div居中？如何居中一個(gè)img（position定位）
- 水平居中div：
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
- 水平垂直居中一個(gè)浮動(dòng)元素（position定位）
第一種：未知元素寬高
<div class="outer">
<span>我想居中顯示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
第二種：已知元素寬高的
<div class="outer">
<span>我想居中顯示</span>
</div>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>
- 絕對(duì)定位的div水平垂直居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top:0;
bottom:0;
- 如何垂直居中一個(gè)img（display : table-cell 或者 position定位）
<div class="outer">
<img src="nz.jpg" alt="">
</div>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>
display 有哪些值？說明他們的作用?
- inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
- block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
- none 此元素不會(huì)被顯示（隱藏）。
- inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）
- list-item 此元素會(huì)作為列表顯示。
- table 此元素會(huì)作為塊級(jí)表格來顯示（類似table），表格前后帶有換行符
position 的值？
- absolute
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。- fixed
生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。（老IE不支持）
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。- relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位，不脫離文檔流。
因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。- static
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的文檔流中（忽略 top, bottom, left, right 或者 z-index 聲明）。- inherit: 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
CSS3有哪些新特性？
- 新增各種 CSS 選擇器 :not(p) 選擇每個(gè)非p的元素； p:empty 選擇每個(gè)沒有任何子級(jí)的p元素（包括文本節(jié)點(diǎn)）
- border-radius //用于設(shè)置圓角
- 背景 background-clip（規(guī)定背景圖的繪制區(qū)域），background-origin，background-size
- 線性漸變 （Linear Gradients） 向下/向上/向左/向右/對(duì)角方向
- 文本效果 陰影text-shadow，textwrap，word-break，word-wrap；
- 2D 轉(zhuǎn)換 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate()
- 3D轉(zhuǎn)換 perspective()；transform是向元素應(yīng)用 2D 或者 3D 轉(zhuǎn)換；
- 過渡 transition
- 動(dòng)畫
- 多列布局 （multi-column layout）
- 盒模型
- flex 布局
- 多媒體查詢 定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性
用純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;
為什么要初始化 CSS 樣式
因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
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定位的元素，只能是塊元素或表格。
為什么會(huì)出現(xiàn)浮動(dòng)? 什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)有哪些方式？
- 出現(xiàn)浮動(dòng)的原因：
浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。在CSS規(guī)范中，浮動(dòng)定位不屬于正常的頁面流，而是獨(dú)立定位的，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。- 關(guān)于css的定位機(jī)制：普通流，浮動(dòng)，絕對(duì)定位（position：fixed是position：absolute的一個(gè)子類）。浮動(dòng)的框可以左右移動(dòng)，直到它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣，所以才說浮動(dòng)定位不屬于正常的頁面流。文檔中的普通流就會(huì)表現(xiàn)得和浮動(dòng)框不存在一樣，當(dāng)浮動(dòng)框高度超出包含框的時(shí)候，就會(huì)出現(xiàn)包含框不會(huì)自動(dòng)伸縮高度類筆盒浮動(dòng)元素。所以，只含有浮動(dòng)元素的父容器在顯示時(shí)不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。
- 浮動(dòng)帶來的問題：
父元素的高度無法被撐開，影響與父元素同級(jí)的元素
與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)。- 清除浮動(dòng)的方式：
1.父級(jí)div定義height
2.最后一個(gè)浮動(dòng)元素后加空 div 標(biāo)簽 并添加樣式 clear:both。（理論上能清除任何標(biāo)簽，增加無意義的標(biāo)簽）
3.包含浮動(dòng)元素的父標(biāo)簽添加樣式 overflow 為 hidden 或 auto。
設(shè)置元素浮動(dòng)后，該元素的 display 值是多少？
自動(dòng)變成display:block
移動(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樣式/}
什么是CSS 預(yù)處理器 / 后處理器？大家為什么要使用他們？
預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性，還有層級(jí)、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。
后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。
CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。
其它 CSS 預(yù)處理器語言：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
為什么要使用它們？
- 結(jié)構(gòu)清晰，便于擴(kuò)展。
- 可以方便地屏蔽瀏覽器私有語法差異。這個(gè)不用多說，封裝對(duì)瀏覽器語法差異的重復(fù)處理，減少無意義的機(jī)械勞動(dòng)。
- 可以輕松實(shí)現(xiàn)多重繼承。
- 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中。LESS 只是在 CSS 語法上做了擴(kuò)展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
CSS優(yōu)化、提高性能的方法有哪些？
避免過度約束
避免后代選擇符
避免鏈?zhǔn)竭x擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重復(fù)
最好使用表示語義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么
避免！important，可以選擇其他選擇器
盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類里的重復(fù)規(guī)則
修復(fù)解析錯(cuò)誤
避免使用多類選擇符
移除空的css規(guī)則
正確使用display的屬性：由于display的作用，某些樣式組合會(huì)無效，徒增樣式體積的同時(shí)也影響解析性能。
display:inline后不應(yīng)該再使用width、height、margin、padding以及float。
display:inline-block后不應(yīng)該再使用float。
display:block后不應(yīng)該再使用vertical-align。
display:table-*后不應(yīng)該再使用margin或者float。不濫用浮動(dòng)：雖然浮動(dòng)不可避免，但不可否認(rèn)很多css bug是由于浮動(dòng)而引起。
不濫用web字體
對(duì)于中文網(wǎng)站來說Web Fonts可能很陌生，國(guó)外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時(shí)會(huì)阻塞頁面渲染損傷性能。不聲明過多的font-size：這是設(shè)計(jì)層面的問題，設(shè)計(jì)精良的頁面不會(huì)有過多的font-size聲明。
不在選擇符中使用ID標(biāo)識(shí)符，主要考慮到樣式重用性以及與頁面的耦合性。
不給h1~h6元素定義過多的樣式
全站統(tǒng)一定義一遍heading元素即可，若需額外定制樣式，可使用其他選擇符作為代替。
不重復(fù)定義h1~h6元素
值為0時(shí)不需要任何單位
標(biāo)準(zhǔn)化各種瀏覽器前綴：通常將瀏覽器前綴置于前面，將標(biāo)準(zhǔn)樣式屬性置于最后，類似：
.foo{
-moz-border-radius: 5px;
border-radius: 5px;
}
- 使用CSS漸變等高級(jí)特性，需指定所有瀏覽器的前綴
- 避免讓選擇符看起來像正則表達(dá)式
- CSS3添加了一些類似~=等復(fù)雜屬性，也不是所有瀏覽器都支持，需謹(jǐn)慎使用。
- 遵守盒模型規(guī)則（Beware of broken box models）
在網(wǎng)頁中的應(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)陣沒變），于是略顯稀疏。
margin 和 padding 分別適合什么場(chǎng)景使用？
◆何時(shí)應(yīng)當(dāng)使用margin
需要在border外側(cè)添加空白時(shí)。
空白處不需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px+20px的margin，將得到20px的空白。◆何時(shí)應(yīng)當(dāng)時(shí)用padding
需要在border內(nèi)測(cè)添加空白時(shí)。
空白處需要背景（色）時(shí)。
上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px+20px的padding，將得到35px的空白。◆瀏覽器兼容性問題
在IE5.x、IE6中，為float的盒子指定margin時(shí)，左側(cè)margin可能會(huì)變成兩倍的寬度。通過改用padding或指定盒子為display:inline可以解決。
元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？
當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的，但是，對(duì)于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。
什么是響應(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è)備屏幕尺寸做處理。
- 頁面頭部必須有meta聲明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
怎么讓Chrome支持小于12px 的文字？
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是縮放比例
}
讓頁面里的字體變清晰，變細(xì)用CSS怎么做？
-webkit-font-smoothing 在 window 系統(tǒng)下沒有起作用，但是在 IOS 設(shè)備上起作用
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度
外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0
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í)候，溢出隱藏。
有哪項(xiàng)方式可以對(duì)一個(gè) DOM 設(shè)置它的CSS樣式？
外部樣式表，引入一個(gè)外部css文件
內(nèi)部樣式表，將css代碼放在 <head> 標(biāo)簽內(nèi)部
內(nèi)聯(lián)樣式，將css樣式直接定義在 HTML 元素內(nèi)部
CSS 中可以通過哪些屬性定義，使得一個(gè) DOM 元素不顯示在瀏覽器可視范圍內(nèi)？
最基本的：設(shè)置 display 屬性為 none，或者設(shè)置 visibility 屬性為 hidden
技巧性：設(shè)置寬高為 0，設(shè)置透明度為 0，設(shè)置 z-index 位置在 -1000
行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？行內(nèi)元素的 padding 和 margin 可設(shè)置嗎？
塊級(jí)元素( block )特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示；
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制；內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的）。
px、em、rem的區(qū)別
px 像素 固定單位 它的大小是固定的
em 相對(duì)單位 em的值并不是固定的 em會(huì)繼承父元素的字體大小 會(huì)根據(jù)父
元素字體大小的變化而變化 一般1em等于16px
rem 他的值也是不固定的 他會(huì)根據(jù)根元素的大小而變化
前端頁面有哪三層構(gòu)成，分別是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
CSS引入的方式有哪些？使用Link和@import有什么區(qū)別？
內(nèi)聯(lián)，內(nèi)嵌，外鏈，導(dǎo)入
- link 屬于 XHTML 標(biāo)簽，除了加載 CSS 外，還能用于定義RSS，定義 rel 連接屬性等作用，無兼容性，支持使用javascript改變樣式；而@import是CSS提供的，只能用于加載CSS，不支持使用 javascript 改變樣式；
- 頁面被加載的時(shí)，link 會(huì)被同時(shí)加載，而@import 引用的CSS會(huì)等到頁面加載完再加載；
- import是CSS2.1 提出的，CSS2.1以下瀏覽器不支持，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無兼容問題。
介紹一下你對(duì)瀏覽器內(nèi)核的理解
主要分成兩部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。
- 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶以及其他它所需要編輯、顯示網(wǎng)絡(luò)的應(yīng)用程序都需要內(nèi)核。
- JS引擎則：解析和執(zhí)行JavaScript 來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果；
最開始渲染引擎和 JS 并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只渲染引擎。
如何水平并且垂直居中一張背景圖
設(shè)置 background-position:center;
強(qiáng)制換行的css是什么？
Word-break:break-all;
持續(xù)更新中......
