(1) 特性檢測
是檢測browser是否支持某種html5的特性
Modernizer檢測CSS3/HTML5功能支持情況
(2) 優雅降級和漸進增強
(3) DOCTYPE & 怪異&標準模式
(4) CSS selector
常見的是有哪些選擇器
class 和 id 之間的區別
選擇器的優先級: (考的次數多)
！important> id（100） > class （10）> tag（1）
(5) reset.css VS normalize.css
因爲瀏覽器對相同的tag有不同的處理方式
eg: h1標籤在FF和Chrome的表現是不同的
reset.css：
是將所有的標籤統一, 毫無個性, 都是一個樣
eg:<h1><h2>的大小是不一樣的
但是reset.css之後, 全部變爲一樣的大小
normalize.css：
沒有重置所有的樣式，也不會像reset.css一樣, 讓所有的標籤全部的都一個樣。
提供合理的樣式, 讓衆多瀏覽器達到一致和合理, 同時修復了一些bug
(6) css預處理器
LESS SASS 優缺點 爲什麼使用
使用sublime text3對你可能會有幫助
(7) z-index的使用
[1] 設置z-index和沒有定位比較
z-index大
[2] 同級設定
z-index數大的
[3] 父同級一樣
子無論誰大， 都是遵守後面覆蓋前面
[4] 父大, 子大
(8) 盒模型
對盒模型的理解, 機會是必考的
IE&W3C的不同
box-sizing來改變(border-box content-box)
但是會有缺點 兼容性不足 使用受限
(9) display
你知道的display所有值
display:inline
block
inline-block
flex
table
table-cell
list-item
..........
inline& block & inline-block區別是什麼
inline& block不同
block:
佔用一行 可以使用width height margin padding
inline:
不會佔用一行, 一個挨着一個擺放
不可以使用width, height margin和padding的top,bottom
但是可以使用margin和padding的left和right
inline-block是什麼
像行內元素一樣表現
但是裏面卻是可以應用block的特性
inline元素有哪些
span input button textarea em b i label img
block元素有哪些
p
div
h1~5
ul ol li
dl dd dt
nav
article aside
header footer
section
......
空元素有哪些 自閉和標籤
input
br
hr
link
img
meta
inline-block天生有哪些
input
img
button
textarea
label
他們本身是inline 但是長度和寬度都可以設定
清除inline/inline-block之間的空隙
(1) letter-spacing:-5px;
word-spacing
(2) margin 負值
margin-right:-5px;
(10) CSS sprite
如果有六張pic的話 http request要請求6次
css sprite的目的是將 很多照片 拼成一張
請求的時候, 也只請求一回, 使用background-position來分開個個圖片
優點：
http request請求少 加快速度
減少圖片命名問題
缺點：
圖片合併問題
分解 開發問題
維護問題
(10) CSS hack
針對不同的IE版本
IE 6 : _
IE 7: +
IE 8: \0
IE 6-10 : \9
(11) position
relative
相對路徑, 根據前一個位置(static)的元素
在文檔流中
eg:
<p></p>
<div></div>
div是根據p元素的位置來覺得位置的
absolute
絕對路徑
完全脫離文檔流(不同於float)
第一個父元素定位
<div class="wrapper">
<article>article1</article>
<div class="div">
<p>article2</p>
</div>
</div>.wrapper{
margin:0 auto;
width: 800px;
height: 500px;
border:1px solid #333;
}
article{
position: relative;
width:100px;
height:100px;
background: red;
}
.div{
position: relative;
width: 500px;
height:300px;
left: 100px;
top:50px;
background: orange;
}
p{
position: absolute;
width:200px;
height:200px;
background: green;
top:200px;
left:100px;
}
static
正常的文檔流順序
fixed
絕對定位, 脫離文本
相對瀏覽器定位的
(12) img 中的title alt
title是當鼠標懸浮的時候 顯示文字的內容
alt 是當圖片顯示不出來(可能是路徑不對等問題) 用文字代替圖片, 用戶看不到圖片, 不至於顯示的是空白
(13) strong em
<strong> =<b> = font-weight:bold
<em>=<i>=font-style:italic
(14) href src 區別
href:
href 是hypertext reference 資源是外部 弄得是一個連接 並行下載資源
<link href="a.css">
src :
src 是source 下載到文檔中，如果遇到src的話 會先下載到文檔中， 下載完畢後， 才能進行接下來的步驟
<img src>
<script src>
(15) display:none & visibility：hidden & opacity:0
display:none
內容真的不見了， 原來的位置都不見了, 像是沒了一樣
visibility：hidde
內容只是看不見了 隱藏了 但是原來的位置還是佔有的
opacity:0
顏色透明瞭, 還是佔用原來的位置的
(16) opacity vs rgba()
(17) 外邊距重疊問題
margin top 和bottom 之間的問題
if 都是正數
取最大值
if 都是負數
取絕對值最大值
if 一正一負
加和
div{
width: 200px;
height: 200px;
}
.wrapper{
background:orange;
margin-bottom: 30px;
}
.wrapper1{
background:red;
margin-top: 60px;
}
解決方法： BFC塊解決
