CSS
介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去;
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 比 內聯優先級高
CSS3新增偽類有那些？
舉例：
p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。
:after 在元素之前添加內容,也可以用來做清除浮動。:before 在元素之后添加內容:enabled :disabled 控制表單控件的禁用狀態。:checked 單選框或復選框被選中。如何居中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;
display有哪些值？說明他們的作用。
block 像塊類型元素一樣顯示。
none 此元素不會被顯示。
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（彈性盒布局模型）,以及適用場景？
.
用純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使其不換行即可
經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用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 {}
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 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
- static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
- absolute: 向上找最近的定位為absolute/relative的元素
- fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？
position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
對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{
}
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
請解釋一下為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式
移動端的布局用過媒體查詢嗎？
使用 CSS 預處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)
CSS優化、提高性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網頁中的應該使用奇數還是偶數的字體？為什么呢？
margin和padding分別適合什么場景使用？
抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對于容器的高度嗎？
全屏滾動的原理是什么？用到了CSS的那些屬性？
什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。
如何修改chrome記住password后自動填充表單的黃色背景 ？
你對line-height是如何理解的？
設置元素浮動后，該元素的display值是多少？（自動變成display:block）
怎么讓Chrome支持小于12px 的文字？
讓頁面里的字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style屬性可以讓它賦值為"oblique" oblique是什么意思？
position:fixed;在android下無效怎么處理？
如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
display:inline-block 什么時候會顯示間隙？(攜程)
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
overflow: scroll時不能平滑滾動的問題怎么處理？
有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）
如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，
所以不如隔離開。
因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。
同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，
提高了webserver的http請求的解析速度。
style標簽寫在body后與body前有什么區別？
什么是CSS 預處理器 / 后處理器？
預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性，
還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。- 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規范處理CSS，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。
附：本文參考于https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers
