1.1 標準盒模型（預設值）
1.2 怪異盒模型（ie瀏覽器預設的盒子模型）
1.3 彈性盒模型（flex布局）2.1 相鄰塊元素垂直外邊距合併
2.2 巢狀塊元素垂直外邊距塌陷和合併
2.3 解決方案：
.div: before瀏覽器核心就是渲染引擎。
主要有兩種引擎：
4.2 常見瀏覽器核心
瀏覽器核心
備註ie
trident
chrome
blink
以前是webkit,現在是blink,blink是webkit的分支，國產瀏覽器新版本是blink核心
firefox
gecko
safari
webkit
webkit的鼻祖是safari
opera
blink
最初是自己的presto核心，後來是webkit，現在跟隨谷歌用bink
4.3 另外其他瀏覽器核心
瀏覽器核心
2345瀏覽器，360瀏覽器，獵豹瀏覽器
ie + chrome雙核心
ie核心
搜狗瀏覽器，遨遊，qq瀏覽器
triend（相容模式） + webkit（高速模式）
特別注意：在form表單中，被display: none; 或 被 visibility: hidden；設定的表單裡面有值依然可以被提交
8.1 占用空間問題
8.2 子元素是否顯示問題
8.3 是否產生回流問題
8.4 是否可以相應事件
8.5 遮擋住其他元素，是否影響其他元素事件觸發瀏覽器的相容性問題，通常是因為不同的瀏覽器對同一段**有不同的解析，造成頁面顯示不統一的情況
9.1 css hack
我們為了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的css樣式，所以我們就把這個針對不同瀏覽器/版本而寫css的過程叫做 css hack。
css hack主要有三種：ie條件注釋法、css屬性字首法、選擇器字首法。
9.2 ie條件注釋法
即在正常**之外新增判別ie瀏覽器或對應版本的條件注釋，符合條件的瀏覽器或者版本號才會執行裡邊的**
<
!-- lt是小於 gt是大於 lte是小於等於 gte是不小於 !是不等於 --
>
給css的屬性新增字首。比如 * 可以被ie6/ie7識別，但 _ 只能被ie6識別，ie6-ie10都可以識別 「\9」，ie6不能識別!important，firefox不能識別 * _ \9。
可以先使用「\9"標記，將ie分離出來，再用」*"分離出ie6/ie7，最後可以用「_」分離出ie6
.type
所以可以按著優先順序就能給特定的版本捎上特定顏色
可以先使用「\9"標記，將ie分離出來，再用」*"分離出ie6/ie7，最後可以用「_」分離出ie6
.type
說明：在標準模式中：
「-″減號是ie6專有的hack
「\9″ ie6/ie7/ie8/ie9/ie10都生效
「\0″ ie8/ie9/ie10都生效，是ie8/9/10的hack
「\9\0″ 只對ie9/ie10生效，是ie9/10的hack
1、最主要也是最常見的，就是瀏覽器對標籤的預設支援不同，所以我們要統一，就要進行css reset . 最簡單的初始化方法是 * 但不推薦，而且它也並不完善。
2、ie6雙邊距bug: 塊屬性標籤新增了浮動float之後，若在浮動方向上也有margin值，則margin值會加倍。其實這種問題主要就是會把某些元素擠到了第二行
①.給float元素新增display：inline 即可正常顯示
②就是hack處理了
3、上下margin重合問題，相鄰的兩個div margin-left margin-right 不會重合，但相鄰的margin-top margin-bottom會重合
4、有些瀏覽器解析img標籤也有不同，img是行內的，一般都會緊接著排放，但是在有些情況下還是會突然出現個間距，解決辦法是給它來個浮動 float 。
6、chrome下缺省會將小於12px的文字強制按照12px來解析。解決辦法是給其新增屬性：
-webkit-text-size-adjust: none;
7、png24位的在ie6下面會出現背景，所以最好還是使用png8格式的。
事件方面：ie：attachevent：火狐是addeventlistener；
滑鼠位置：ie是event.clientx；火狐是event.pagex；
ie使用event.srcelement；firefox使用event.target；
ie中消除list的原點僅需margin:0即可達到最終效果；firefox需要設定margin:0;padding:0以及list-style:none；
css sprites是一種網頁應用處理方式，就是把網頁中一些背景整合到一張檔案中，再利用css的「background-image」，「background- repeat」，「background-position」的組合進行背景定位。
分成：
表示層
行為層
14.1 css選擇器有哪些
14.2 哪些屬性可以繼承
14.3 優先順序演算法如何計算
選擇器許可權
選擇器選擇器權重
繼承 ，* ，子選擇器，相鄰選擇器
0,0,0,0
標籤選擇器，偽元素選擇器
0,0,0,1
類選擇器，偽類選擇器（包括結構偽類），屬性選擇器
0,0,1,0
id選擇器
0,1,0,0
行內樣式選擇器
1,0,0,0
!important 重要的
無窮大14.4css3新增偽類------------------------------------------------html 5 支援本地儲存，在之前版本中是通過 cookie 實現的。html5 本地儲存速度快而且安全。
有兩種不同的物件可用來儲存資料：
屬性描述
absolute
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
relative
生成相對定位的元素，相對於其正常位置進行定位。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
static
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit
規定應該從父元素繼承 position 屬性的值。
1.document.wirte
document.write是直接寫入到頁面的內容流，如果在寫之前沒有呼叫document.open, 瀏覽器會自動呼叫open。每次寫完關閉之後重新呼叫該函式，會導致頁面被重寫。
2.document.innerhtml
innerhtml則是dom頁面元素的乙個屬性，可以用來讀、寫給定元素裡的html內容。你可以精確到某乙個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentelement.innerelement。
3.innertext
獲取從起始位置到終止位置的內容,但它去除html標籤。
火狐瀏覽器不支援該標籤，但所有瀏覽器都支援 innerhtml標籤。
總結：innerhtml是符合w3c標準的屬性，而innertext只適用於ie瀏覽器（現在也適應chrome瀏覽器），因此，盡可能地去使用 innerhtml，而少用innertext，如果要輸出不含html標籤的內容，可以使用innerhtml取得包含html標籤的內容後，再用正規表示式去除html標籤。
write會導致頁面重新繪製，而且效能略低於innerhtml,所有推薦使用innerhtml.
"stylesheet" type="text/css" media="screen and (min-width:700px) and (max-width:800px)" href="style-7-9.css" />前端開發面試題
基礎題 1.談一談你對bootstrap的柵格布局的理解。2.談一談你對mvvm的理解。3.es6的展開運算子有使用過嗎？有什麼用處？4.let和var const的區別是什麼？5.最近有了解前端的發展嗎？有沒有學習什麼最新的前端技術？6.sessionstorage localstorage和co...
前端開發面試題（二）
乙個200 200的div在不同解析度螢幕上下左右居中，用css實現 利用負值來實現居中。可以腦補畫面離左右都是50 剛好可以居中，但是div位置在 距左右外邊框各負50 寬度。body div1寫乙個左右布局沾滿螢幕，其中左 右兩塊定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。ht...
前端面試題 2023年web前端開發面試題
本文章作為2021屆應屆畢業生在實習面試期間所接受的前端面試的面試題。css盒子模型的要素，css中常用偽元素選擇符 position屬性四個值 static fixed absolute和relative的區別和用法 解釋css樣式中display中inline block inline bloc...