CSS題目及答案整理
原文連接在這裏css
CSS
介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
（1）有兩種， IE 盒子模型（至關於
box-sizing: border-box;）、W3C 盒子模型（box-sizing: content-box;）；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去;html
對BFC規範(塊級格式化上下文：block formatting context)的理解？
1. FC（Formatting Context）
想要理解BFC與IFC，首先要理解FC，即 formatting context，它是W3C CSS2.1規範中的一個概念，定義的是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。前端
常見的Formatting Context 有：Block Formatting Context（BFC | 塊級格式化上下文） 和 Inline Formatting Context（IFC |行內格式化上下文）。node
一個頁面是由不少個 Box 組成的，元素的類型和 display 屬性決定了這個 Box 的類型。不一樣類型的 Box，會參與不一樣的 Formatting Context。jquery
Block level的box會參與造成BFC，好比display值爲block，list-item，table的元素。css3
Inline level的box會參與造成IFC，好比display值爲inline，inline-table，inline-block的元素。git
參考：github
2. IFC佈局規則：
在行內格式化上下文中，框(boxes)一個接一個地水平排列，起點是包含塊的頂部。水平方向上的
margin，border和padding在框之間獲得保留。框在垂直方向上能夠以不一樣的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊。包含那些框的長方形區域，會造成一行，叫作行框。
3. BFC佈局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由
margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊每一個元素的左外邊緣（
margin-left)， 與包含塊的左邊（border-left）相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。除非這個元素本身造成了一個新的BFC。BFC的區域不會與
float box重疊。BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
4. 怎樣造成一個BFC？
塊級格式化上下文由如下之一建立：
根元素或其它包含它的元素
浮動 (元素的
float不是none)絕對定位的元素 (元素具備
position爲absolute或fixed)元素具備
display: inline-block，table-cell, table-caption, flex, inline-flex塊元素具備
overflow，且值不是visible
整理到這兒，對於上面第4條產生了一個small small的疑問：爲何display: inline-block;的元素是inline level 的元素，參與造成IFC，卻能建立BFC？
本身認爲答案是這樣的：inline-block的元素的內部是一個BFC，可是它自己能夠和其它inline元素一塊兒造成IFC。
5. BFC用處
1. 清除浮動
<div class="wrap"> <section>1</section> <section>2</section> </div>
.wrap {
border: 2px solid yellow;
width: 250px;
}
section {
background-color: pink;
float: left;
width: 100px;
height: 100px;
}
能夠看到，因爲子元素都是浮動的，受浮動影響，邊框爲黃色的父元素的高度塌陷了。
解決方案：爲 .wrap 加上 overflow: hidden;使其造成BFC，根據BFC規則第六條，計算高度時就會計算float的元素的高度，達到清除浮動影響的效果。
2. 佈局：自適應兩欄佈局
<div> <aside></aside> <main>我是好多好多文字會換行的那種蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤</main> </div>
div {width: 200px;}
aside {
background-color: yellow;
float: left;
width: 100px;
height: 50px;
}
main {
background-color: pink;
}
能夠看到右側元素的一部分跑到了左側元素下方。
解決方案：爲main設置 overflow: hidden; 觸發main元素的BFC，根據規則第四、5條，BFC的區域是獨立的，不會與頁面其餘元素相互影響，且不會與float元素重疊，所以就能夠造成兩列自適應佈局
3. 防止垂直margin合併
<section class="top">1</section> <section class="bottom">2</section>
section {
background-color: pink;
margin-bottom: 100px;
width: 100px;
height: 100px;
}
.bottom {
margin-top: 100px;
}
能夠看到，明明.top和.bottom中間加起來有200px的margin值，可是咱們只能看到100px。這是由於他們的外邊距相遇發生了合併。
怎樣解決：爲其中一個元素的外面包裹一層元素。併爲這個外層元素設置 overflow: hidden;，使其造成BFC。由於BFC內部是一個獨立的容器，因此不會與外部相互影響，能夠防止margin合併。
<section class="top">1</section> <div class="wrap"> <section class="bottom">2</section> </div>
.wrap {
overflow: hidden;
}
CSS裏有哪幾個經常使用的單位？說出他們之間的關係。
px， em， rem
1em = 當前元素父元素的font-size
1rem = html元素的font-size
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;
CSS優先級算法如何計算？
* 優先級就近原則，同權重狀況下樣式定義最近者爲準;
* 載入樣式以最後載入的定位爲準;
優先級爲:
同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
!important > id > class > tag
important 比 內聯優先級高
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{
}
若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現
CSS3新增僞類有那些？
舉例： p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。 p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。 p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。 p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。 p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。 :after 在元素以後添加內容,也能夠用來作清除浮動。 :before 在元素以前添加內容 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或複選框被選中。
如何居中div？
* 水平居中：給div設置一個寬度，而後添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
* 讓絕對定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中一
肯定容器的寬高 寬500 高 300 的層
設置層的外邊距
div {
position: relative; /* 相對定位或絕對定位都可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距爲自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中二
未知容器的寬高，利用 `transform` 屬性
div {
position: absolute; /* 相對定位或絕對定位都可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中三
利用 flex 佈局
實際使用時應考慮兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
display有哪些值？說明他們的做用。
block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。 none 缺省值。象行內元素類型同樣顯示。 inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。 inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。 list-item 象塊類型元素同樣顯示，並添加樣式列表標記。 table 此元素會做爲塊級表格來顯示。 inherit 規定應該從父元素繼承 display 屬性的值。
position的值relative和absolute定位原點是？
absolute
生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative
生成相對定位的元素，相對於其正常位置進行定位。
static
默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit
規定從父元素繼承 position 屬性的值。
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:
請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
一個用於頁面佈局的全新CSS3功能，Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。 較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。 採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。 它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。 常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。 在佈局上有了比之前更加靈活的空間。 具體：http://www.w3cplus.com/css3/flexbox-basics.html
用純CSS建立一個三角形的原理是什麼？
**把上、左、右三條邊隱藏掉（顏色設爲 transparent）**
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一個滿屏 品 字佈局 如何設計?
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
而後用float或者inline-block使其不換行便可
css多列等高如何實現？
利用padding-bottom|margin-bottom正負值相抵； 設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度， 當它裏面的任一列高度增長了，則父容器的高度被撐到裏面最高那列的高度， 其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。
常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用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和IE七、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:red;/*全部識別*/
background-color:#00deff\9; /*IE六、七、8識別*/
+background-color:#a200ff;/*IE六、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 {}
li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。
爲何要初始化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; }
absolute的containing block(包含塊)計算方式跟正常流有什麼不一樣？
不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷： 一、若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形； 二、不然,則由這個祖先元素的 padding box 構成。 若是都找不到，則爲 initial containing block。 補充： 1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分） 2. absolute: 向上找最近的定位爲absolute/relative的元素 3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block
CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？
對於普通元素visibility:collapse;會將元素徹底隱藏,不佔據頁面佈局空間,與display:none;表現相同. 若是目標元素爲table,visibility:collapse;將table隱藏,可是會佔據頁面佈局空間. 僅在Firefox下起做用,IE會顯示元素,Chrome會將元素隱藏,可是佔據空間.
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
若是元素的display爲none,那麼元素不被渲染,position,float不起做用,若是元素擁有position:absolute;或者position:fixed;屬性那麼元素將爲絕對定位,float不起做用.若是元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其餘元素margin摺疊.
請解釋一下爲何須要清除浮動？清除浮動的方式
清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示。
一、父級div定義height；
二、父級div 也一塊兒浮動；
三、常規的使用一個class；
.clearfix:before, .clearfix:after {
content: " ";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
四、SASS編譯的時候，浮動元素的父級div定義僞類:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;
4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:".",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:"" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。
什麼是外邊距合併？
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。 w3school介紹網址： http://www.w3school.com.cn/css/css_margin_collapsing.asp
zoom:1的清除浮動原理?
清除浮動，觸發hasLayout； Zoom屬性是IE瀏覽器的專有屬性，它能夠設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。 譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。 前因後果大概以下： 當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。 Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom如今已經被逐步標準化，出如今 CSS 3.0 規範草案中。 目前非ie因爲不支持這個屬性，它們又是經過什麼屬性來實現元素的縮放呢？ 能夠經過css3裏面的動畫屬性scale進行縮放。
移動端的佈局用過媒體查詢嗎？
假設你如今正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，
而顯示設備、屏幕投影和打印等這些媒介都有本身的特色，CSS就是爲文檔提供在不一樣媒介上展現的適配方法
<!-- link元素中的CSS媒體查詢 -->
當媒體查詢爲真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。
當媒體查詢返回假， <link> 標籤上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 樣式表中的CSS媒體查詢 -->
包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。
CSS3加入的媒體查詢使得無需修改內容即可以使樣式應用於某些特定的設備範圍。
<style>
@media (min-width: 700px) and (orientation: landscape){
.sidebar {
display: none;
}
}
</style>
使用 CSS 預處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)
什麼是CSS 預處理器 / 後處理器？
- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性， 還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。 - 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。
CSS優化、提升性能的方法有哪些？
關鍵選擇器（key selector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）； 若是規則擁有 ID 選擇器做爲其關鍵選擇器，則不要爲規則增長標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）； 提取項目的通用公有樣式，加強可複用性，按模塊編寫組件；加強項目的協同開發性、可維護性和可擴展性; 使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；
瀏覽器是怎樣解析CSS選擇器的？
樣式系統從關鍵選擇器開始匹配， 而後左移查找它的祖先元素。 只要選擇器的子樹一直在工做， 樣式系統就會持續左移， 直到和規則匹配， 或者是由於不匹配而放棄該規則。
在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
偶數字號相對更容易和 web 設計的其餘部分構成比例關係。好比：當我用了 14 px 的正文字號，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另外一些地方用 14 × 1.5 = 21 px 的標題字號。
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 十二、1四、16 px 這三個大小的點陣，而 1三、1五、17 px 時用的是小一號的點陣（即每一個字佔的空間大了 1 px，但點陣沒變），因而略顯稀疏。
margin和padding分別適合什麼場景使用？
margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。 margin用於佈局分開元素使元素與元素互不相干； padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段距離
元素豎向的百分比設定是相對於容器的高度嗎？
不是，是容器寬度。
抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅]
先看視覺稿，把可複用的組件找出來。而後把命名和結構肯定下來。
https://github.com/jayli/jayl...
::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成） 雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器須要同時支持舊的已經存在的僞元素寫法， 好比:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的僞元素則不容許再支持舊的單冒號的寫法。 想讓插入的內容出如今其它內容前，使用::before，否者，使用::after； 在代碼順序上，::after生成的內容也比::before生成的內容靠後。 若是按堆棧視角，::after生成的內容會在::before生成的內容之上
如何修改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);
}
你對line-height是如何理解的？
line-height定義行高，設置行間的距離。應用方式是：用line-height減去font-size，獲得的差（稱爲行間距）除2，分別添加到文本的頂部和底部。能夠包含這些內容的最小框就是行框。
設置元素浮動後，該元素的display值是多少？
自動變成了 display:block 用 window.getComputedStyle(element).display 看了一下確實是 block
怎麼讓Chrome支持小於12px 的文字？
一、用圖片：若是是內容固定不變狀況下，使用將小於12px文字內容切出作圖片，這樣不影響兼容也不影響美觀。 二、使用12px及12px以上字體大小：爲了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，若是是接單的這個時候就須要給客戶講解小於12px瀏覽器不兼容等事宜。 三、繼續使用小於12px字體大小樣式設置：若是不考慮chrome能夠不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，作到最大兼容考慮。 四、使用css3裏的一個屬性：transform：scale（）
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例
讓頁面裏的字體變清晰，變細用CSS怎麼作？
-webkit-font-smoothing: antialiased;
font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
傾斜的字體樣式 與italic的區別：italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果。也就是說：Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜。
若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60*1000ms ＝ 16.7ms
什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）
若是靜態文件都放在主域名下，那靜態文件請求的時候都是帶着cookie數據提交給server的，很是浪費流量，因此不如隔離開。 由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據， 這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。 同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，提升了webserver的http請求的解析速度。
有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
（1）height：calc（100%-100px）
（2）absolute positioning：外層position：relative；
百分百自適應元素 position: absolute; top: 100px; bottom: 0; left: 0
（3）flex 父元素display:flex; flex-direction: column; 下面的子元素的設置flex: 1;
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
（1）響應式網站設計(Responsive Web design)的理念是：集中建立頁面的圖片排版大小，能夠智
能地根據用戶行爲以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的佈局。
（2）基本原理: 媒體查詢 @media
（3）兼容IE可使用JS輔助一下來解決
position:fixed;在iOS下無效怎麼處理？
未打開的鎖#
軟鍵盤喚起後，頁面的 fixed 元素將失效（即沒法浮動，也能夠理解爲變成了 absolute 定位），因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。 既然在 iOS 下因爲軟鍵盤喚出後，頁面 fixed 元素會失效，致使跟隨頁面一塊兒滾動，那麼假如——頁面不會過長出現滾動，那麼即使 fixed 元素失效，也沒法跟隨頁面滾動，也就不會出現上面的問題了。按照這個思路，若是使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變。
main {
/* main絕對定位，進行內部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之能夠滾動 */
overflow-y: scroll;
}
在原始輸入法下， fixed 元素能夠定位在頁面的正確位置。滾動頁面時，因爲滾動的是 main 內部的 div，所以 footer 沒有跟隨頁面滾動。
上面貌似解決了問題，可是若是在手機上實際測試一下，會發現 main 元素內的滾動很是不流暢，滑動的手指鬆開後，滾動馬上中止，失去了本來的流暢滾動特性。百度一下彈性滾動的問題，發如今 webkit 中，下面的屬性能夠恢復彈性滾動。
-webkit-overflow-scrolling: touch;
在 main 元素上加上該屬性，嗯，絲般順滑的感受又回來了！
參考： http://efe.baidu.com/blog/mob...
overflow: scroll時不能平滑滾動的問題怎麼處理？
答案一：-webkit-overflow-scrolling: touch;
答案二：
（1）高度尺寸不肯定的時候，使用：overflow-y：scroll;
（2）高度尺寸肯定的，要麼沒有滾動條，要麼直接出現，不會出現跳動。
（3）css3計算calc和vw單位巧妙實現滾動條出現頁面不跳動：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定寬主體的父級，若是沒有，建立一個
而後，calc是css3的計算
100vw是瀏覽器的內部寬度，而100%是可用寬度，不含滾動條
calc（100vw-100%）是瀏覽器的滾動條的寬度
style標籤寫在body後與body前有什麼區別？
寫在head標籤中利於瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具體渲染過程請參考
http://blog.csdn.net/wozaixia...寫在body標籤後因爲瀏覽器以逐行方式對html文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標籤）會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後從新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效致使的頁面閃爍問題）
基礎知識——瀏覽器的渲染過程：
Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼後，在生成DOM的最開始階段（應該是 Bytes → characters 後），並行發起css、圖片、js的請求，不管他們是否在HEAD裏。
注意：發起 js 文件的下載 request 並不須要 DOM 處理到那個 script 節點，好比：簡單的正則匹配就能作到這一點，雖然實際上並不必定是經過正則：）。這是不少人在理解渲染機制的時候存在的誤區。Create/Update Render CSSOM：CSS文件下載完成，開始構建CSSOM
Create/Update Render Tree：全部CSS文件下載完成，CSSOM構建結束後，和 DOM 一塊兒生成 Render Tree。
Layout：有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操做稱之爲Layout，顧名思義就是計算出每一個節點在屏幕中的位置。
Painting：Layout後，瀏覽器已經知道了哪些節點要顯示（which nodes are visible）、每一個節點的CSS屬性是什麼（their computed styles）、每一個節點在屏幕中的位置是哪裏（geometry）。就進入了最後一步：Painting，按照算出來的規則，經過顯卡，把內容畫到屏幕上。
補充：
Repaint（重繪）：屏幕的一部分要重畫。
Reflow（迴流）：元件的幾何尺寸變化了。要從新驗證並計算Render Tree
聯想——<script>標籤放到<body>尾部是有必要的嗎？
若是放到<body>開始位置，假如js文件很大，解析到js文件所在的script標籤的時候，js文件尚未下載完成，這時會阻塞並中止解析後面的HTML代碼。當js文件下載完成並執行完以後纔會繼續後面的解析。因此是有必要的。
display:inline-block 何時會顯示間隙？(攜程)
（1）有空格時候會有間隙。 解決：移除空格
（2）margin正值的時候。 解決：margin使用負值
png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？
（1）png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式，
優勢是：壓縮比高，色彩好。 大多數地方均可以用。能夠設置透明背景。
（2）jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的
不錯。在www上，被用來儲存和傳輸照片的格式。不能設置透明背景。但同等效果下圖片大小最小。
（3）gif是一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果時候
webp格式
是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%，缺點是壓縮的時間更久了
。兼容性很差，目前谷歌和opera支持。
全屏滾動的原理是什麼？用到了CSS的那些屬性？
（1）原理：方法一是總體的元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度是500%
，只是展現100%，剩下的能夠經過transform進行y軸定位，也能夠經過margin-top實現
（2）overflow：hidden；
transition：all 1000ms ease；
視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）
視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術經過在網頁向下滾動的時候，控 制背景的移動速度比前景的移動速度慢來建立出使人驚歎的3D效果。原理：（1）CSS3實現優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器（2）jquery實現經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。優勢：能兼容到各個版本的，效果可控性好缺點：開發起來對製做者要求高（3）插件實現方式例如：parallax-scrolling，兼容性十分好
- 1. JS題目及答案整理
- 2. vue面試題及答案整理
- 3. Java面試題及答案整理
- 4. Redis面試題及答案整理
- 5. 前端面試題及整理答案
- 6. SpringBoot面試題及答案整理
- 7. 週考題目及答案
- 8. 面試題目及答案
- 9. 前端面試題及答案 - CSS篇
- 10. OCP2018最新題庫，052新題庫及答案整理-25題
- 更多相關文章...
- • Markdown 標題 - Markdown 教程
- • jQuery Mobile 主題 - jQuery Mobile 教程
- • ☆技術問答集錦（13）Java Instrument原理
- • PHP Ajax 跨域問題最佳解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
- 1. JS題目及答案整理
- 2. vue面試題及答案整理
- 3. Java面試題及答案整理
- 4. Redis面試題及答案整理
- 5. 前端面試題及整理答案
- 6. SpringBoot面試題及答案整理
- 7. 週考題目及答案
- 8. 面試題目及答案
- 9. 前端面試題及答案 - CSS篇
- 10. OCP2018最新題庫，052新題庫及答案整理-25題