整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
程序員前端教程-關(guān)于瀏覽器的兼容問題
常見瀏覽器兼容問題：
1.li在IE中底部3像素的BUG。解決方案：在< li>上加float:left；即可解決
2. IE6中奇數(shù)寬高的BUG。解決方案：就是將外部相對(duì)定位的div寬度改成偶數(shù)。高度也是一樣的。
3. IE6文字溢出BUG。引發(fā)這種BUG有以下幾個(gè)條件：
1）是注釋引起的,刪除所有注釋即可。
2）hidden的input直接放在form下。
3）display為none的div也有可能引發(fā)此bug。
4）可以通過外面再包一次DIV解決。
由注釋造成文字溢出，屬于IE6的BUG，溢出文字的字?jǐn)?shù)=注釋的條數(shù)*2-1，這里的字?jǐn)?shù)在中文或英文數(shù)字時(shí)都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動(dòng)以及文字區(qū)塊的固定寬度有必然聯(lián)系。
解決辦法：
1)不放置注釋。最簡單、最快捷的解決方法；
2)注釋不要放置于2個(gè)浮動(dòng)的區(qū)塊之間；
3)將文字區(qū)塊包含在新的< div>< /div>之間，如：<divstyle=”float:right;width:400px”>< div>↓這就是多出來的那只豬< /div>< /div>；
4)去除文字區(qū)塊的固定寬度，與3有相似之處；
5)在后面加一個(gè)< br/>或者空格；（不推薦）
6)使用IE注釋格式，如：<!–[if!IE]>Put your commentary in here…<![endif]–>。
7)給盒子加position:relative;屬性
4. 樣式中文注釋后引發(fā)失效。
滿足下面條件就會(huì)引起 注釋下面的樣式不起作用：
1）css有中文注釋。
2）css為ANSI編碼。
3） html為utf-8編碼。
解決方法：
1） 去掉中文注釋，用英文注釋。
2.）統(tǒng)一css 和 html 的編碼。
建議采用第二種解決方法：ps： css為uft-8，html為ANSI 不會(huì)出現(xiàn)失效的情況。
5. li在IE中底部空行的BUG。
IE6中列表的常見問題出現(xiàn)在當(dāng)某個(gè) li 中的內(nèi)容是一個(gè) display: block 的錨點(diǎn)(anchor)時(shí)。在這種情況下，列表元素之間的空格將不會(huì)被忽略而且通常會(huì)顯示成額外的一行夾在每個(gè) li 之間。一種避免這種豎直方向多余空白的解決方法是賦予這些錨點(diǎn) layout。這樣還有一個(gè)好處就是可以讓整個(gè)錨點(diǎn)的矩形區(qū)域都可以響應(yīng)鼠標(biāo)點(diǎn)擊。
解決方法：
1） 在li a 樣式中加入zoom:1；
2）在li 樣式中加入display:inline ；
3） 將< li>標(biāo)簽寫成一行；
4）在li a 樣式中加入width:100%或者一個(gè)寬度值。
建議采用第4二種解決方法
7. 父級(jí)使用padding后子元素絕對(duì)定位的BUG。
在父層使用position:relative;和padding（當(dāng)然0值除外）后，ie6中層的定位起始坐標(biāo)是從padding后的位置算起，而其他則從層的真實(shí)位置算起，而非被padding改變后的那個(gè)位置。這點(diǎn)造成使用position:absolute進(jìn)行層定位時(shí)ie6與其他瀏覽器的表現(xiàn)不一樣。
解決方法：給外層加寬度或zoom:1。
8. display:none引起的3像素的BUG
解決方案1：將最后一個(gè)div加一個(gè)margin-right:-3px。如：<divstyle=“display: none;”>< /div><divstyle=“background:green; width:10px;float:left; height:300px;margin-right:-3px”>< /div>
解決方案2：將display: none的div換一個(gè)形式隱藏。如：<divstyle="position:absolute;visibility: hidden ">< /div>
9. IE6的圖片3px問題
IE 6 中 ，DIV 使用背景圖片（或直接插入圖片在DIV中）的時(shí)候，在圖片的下端會(huì)出現(xiàn)一條空白間隔，經(jīng)測量，剛好是 3px .
解決：IE6默認(rèn)字號(hào)是12pt，默認(rèn)行高是normal。
1. 給DIV加上：font-size: 0px;
2. 設(shè)置img為“display:block;”；
3. 即設(shè)置圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以解決；
4.設(shè)置圖片的浮動(dòng)屬性，“#sub img {float:left;}”；
5.取消圖片標(biāo)簽和其父對(duì)象的最后一個(gè)結(jié)束標(biāo)簽之間的空格，這種方法適用范圍比較窄，只限于父對(duì)象中只包含一個(gè)圖片對(duì)象，而且和父對(duì)象的結(jié)束標(biāo)簽之間不能有任何空隙。
10. IE6雙倍浮動(dòng)BUG
解決：解決辦法是加上display:inline。
11 .IE6的著名3px BUG（斷頭臺(tái)bug）
兩個(gè)層，一個(gè)浮動(dòng)，一個(gè)不浮動(dòng)，把浮動(dòng)的一個(gè)放在不浮動(dòng)層中，你會(huì)發(fā)現(xiàn)兩個(gè)之間有點(diǎn)間隙，寬度為3px。這個(gè)問題是最讓人頭疼的問題了。
解決方法：
1）所有的層都浮動(dòng) 把右邊那個(gè)層也設(shè)置成浮動(dòng)層就可以消除這可惡的3px間隔。
2）給左邊的層，應(yīng)用margin-right:-3px;，同樣可解決IE 3px bug。
12. Ie6圖片導(dǎo)致行距無效
解決方法：對(duì)和文字相連接的img、input、textarea、select、object等元素加以屬性 margin: (所屬line-height-自身高度)/2px 0）。
13. IE6使用濾鏡使PNG圖片透明后，容器內(nèi)鏈接失效的問題。
解決方法是為鏈接定義一個(gè)相對(duì)定位屬性。position:relative。
存在兼容性問題的css屬性設(shè)置
1）body,div,…{margin:0;padding:0;}；
2）ul，ol，li{list-style-type:none;}；
3）clear{clear:both;height:0;overflow:hidden;}；
4）filter:alpha(opacity=50)；濾鏡設(shè)置透明度；
5）a{text-decoration:none;border:none;} ；
6）有float，有橫向margin時(shí)，ie雙倍間距，設(shè)置display:inline。
家好，我是皮湯。最近業(yè)務(wù)調(diào)整，組內(nèi)開啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對(duì)目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。
目前整個(gè) CSS 工具鏈、工程化領(lǐng)域的主要方案如下：
而我們技術(shù)選型的標(biāo)準(zhǔn)如下：
- 開發(fā)速度快
- 開發(fā)體驗(yàn)友好
- 調(diào)試體驗(yàn)友好
- 可維護(hù)性友好
- 擴(kuò)展性友好
- 可協(xié)作性友好
- 體積小
- 有最佳實(shí)踐指導(dǎo)
目前主要需要對(duì)比的三套方案：
- Less/Sass + PostCSS 的純 CSS c側(cè)方案
- styled-components / emotion 的純 CSS-in-JS 側(cè)方案
- TailwindCSS 的以寫輔助類為主的 HTML 側(cè)方案
## 純 CSS 側(cè)方案
### 介紹與優(yōu)點(diǎn)
> 維護(hù)狀態(tài)：一般
> Star 數(shù)：16.7K
> 支持框架：無框架限制
> 項(xiàng)目地址：https://github.com/less/less.js
Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業(yè)級(jí)項(xiàng)目中使用很廣，如 ant-design 等
它們的主要作用如下：
- 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等
- 引入了模塊化的概念，可以在一個(gè) less 文件中導(dǎo)入另外一個(gè) less 文件進(jìn)行使用
- 兼容標(biāo)準(zhǔn)，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等
這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對(duì)應(yīng)的 loader 如 sass-loader，然后就可以在 React/Vue 項(xiàng)目中建 `.scss` 文件，寫 sass 語法，并導(dǎo)入到 React 組件中生效。
比如我寫一個(gè)組件在響應(yīng)式各個(gè)斷點(diǎn)下的展示情況的 sass 代碼：
```
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
```
或?qū)胍恍┯糜跇?biāo)準(zhǔn)化瀏覽器差異的代碼：
```
@import "normalize.css";
// component 相關(guān)的其他代碼
```
### 不足
這類方案的一個(gè)主要問題就是，只是對(duì) CSS 本身進(jìn)行了增強(qiáng)，但是在幫助開發(fā)者如何寫更好的 CSS、更高效、可維護(hù)的 CSS 方面并沒有提供任何建議。
- 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進(jìn)行組合去描述 HTML 的樣式
- 你依然可能會(huì)寫很多冗余的 Less/Sass 代碼，然后造成項(xiàng)目的負(fù)擔(dān)，在可維護(hù)性方面也有巨大問題
### 優(yōu)化
- 可以引入 CSS 設(shè)計(jì)規(guī)范：BEM 規(guī)范，來輔助用戶在整個(gè)網(wǎng)頁的 HTML 骨架以及對(duì)應(yīng)的類上進(jìn)行設(shè)計(jì)
- 可以引入 CSS Modules，將 CSS 文件進(jìn)行 “作用域” 限制，確保在之后維護(hù)時(shí)，修改一個(gè)內(nèi)容不會(huì)引起全局中其他樣式的效果
#### BEM 規(guī)范
B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。
拿設(shè)計(jì)一個(gè) Button 為例：
```
/* Block */
.btn {}
/* 依賴于 Block 的 Element */
.btn__price {}
/* 修改 Block 風(fēng)格的 Modifier */
.btn--orange {}
.btn--big {}
```
遵循上述規(guī)范的一個(gè)真實(shí)的 Button：
```
<a class="btn btn--big btn--orange" href="#">
<span class="btn__price"></span>
<span class="btn__text">BIG BUTTON</span>
</a>
```
可以獲得如下的效果：
#### CSS Modules
CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。
一個(gè)例子如下：
```
import React from 'react';
import style from './App.css';
export default ()=> {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};
```
```
.title {
composes: className;
color: red;
}
```
上述經(jīng)過編譯會(huì)變成如下 hash 字符串：
```
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
Hello World
</h1>
```
```
._3zyde4l1yATCOkgn-DBWEL {
color: red;
}
```
CSS Modules 可以與普通 CSS、Less、Sass 等結(jié)合使用。
## 純 JS 側(cè)方案
### 介紹與優(yōu)點(diǎn)
> 維護(hù)狀態(tài)：一般
> Star 數(shù)：35.2K
> 支持框架：React ，通過社區(qū)支持 Vue 等框架
> 項(xiàng)目地址：https://github.com/styled-components/styled-components
使用 JS 的模板字符串函數(shù)，在 JS 里面寫 CSS 代碼，這帶來了兩個(gè)認(rèn)知的改變：
- 不是在根據(jù) HTML，然后去寫 CSS，而是站在組件設(shè)計(jì)的角度，為組件寫 CSS，然后應(yīng)用組件的組合思想搭建大應(yīng)用
- 自動(dòng)提供類似 CSS Modules 的體驗(yàn)，不用擔(dān)心樣式的全局污染問題
同時(shí)帶來了很多 JS 側(cè)才有的各種功能特性，可以讓開發(fā)者用開發(fā) JS 的方式開發(fā) CSS，如編輯器自動(dòng)補(bǔ)全、Lint、編譯壓縮等。
比如我寫一個(gè)按鈕：
```
const Button=styled.button`
/* Adapt the colors based on primary prop */
background: ${props=> props.primary ? "palevioletred" : "white"};
color: ${props=> props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
```
可以獲得如下效果：
還可以擴(kuò)展樣式：
```
// The Button from the last section without the interpolations
const Button=styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// A new component based on Button, but with some override styles
const TomatoButton=styled(Button)`
color: tomato;
border-color: tomato;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);
```
可以獲得如下效果：
### 不足
雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應(yīng)用 React 組件等組合思想，將組件與 CSS 進(jìn)行細(xì)粒度綁定，讓 CSS 跟隨著組件一同進(jìn)行組件化開發(fā)，同時(shí)提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復(fù)用 JS 社區(qū)的最佳實(shí)踐等。
但是它仍然有一些不足：
- 仍然是是對(duì) CSS 增強(qiáng)，提供非常大的靈活性，開發(fā)者仍然需要考慮如何去組織自己的 CSS
- 沒有給出一套 “有觀點(diǎn)” 的最佳實(shí)踐做法
- 在上層也缺乏基于 styled-components 進(jìn)行復(fù)用的物料庫可進(jìn)行參考設(shè)計(jì)和使用，導(dǎo)致在初始化使用時(shí)開發(fā)速度較低
- 在 JS 中寫 CSS，勢必帶來一些本屬于 JS 的限制，如 TS 下，需要對(duì) Styled 的組件進(jìn)行類型注釋
- 官方維護(hù)的內(nèi)容只兼容 React 框架，Vue 和其他框架都由社區(qū)提供支持
整體來說不太符合團(tuán)隊(duì)協(xié)作使用，需要人為總結(jié)最佳實(shí)踐和規(guī)范等。
### 優(yōu)化
- 尋求一套寫 CSS 的最佳實(shí)踐和團(tuán)隊(duì)協(xié)作規(guī)范
- 能夠擁有大量的物料庫或輔助類等，提高開發(fā)效率，快速完成應(yīng)用開發(fā)
## 偏向 HTML 側(cè)方案
### 介紹與優(yōu)點(diǎn)
> 維護(hù)狀態(tài)：積極
> Star 數(shù)：48.9K
> 支持框架：React、Vue、Svelte 等主流框架
> 項(xiàng)目地址：https://github.com/tailwindlabs/tailwindcss
典型的是 TailwindCSS，一個(gè)輔助類優(yōu)先的 CSS 框架，提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 這樣實(shí)用的類名，然后基于這些底層的輔助類向上組合構(gòu)建任何網(wǎng)站，而且只需要專注于為 HTML 設(shè)置類名即可。
一個(gè)比較形象的例子可以參考如下代碼：
```
<button class="btn btn--secondary">Decline</button>
<button class="btn btn--primary">Accept</button>
```
上述代碼應(yīng)用 BEM 風(fēng)格的類名設(shè)計(jì)，然后設(shè)計(jì)兩個(gè)按鈕，而這兩個(gè)類名類似主流組件庫里面的 Button 的不同狀態(tài)的設(shè)計(jì)，而這兩個(gè)類又是由更加基礎(chǔ)的 TailwindCSS 輔助類組成：
```
.btn {
@apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
@apply bg-rose-500 text-white;
}
.btn--secondary {
@apply bg-gray-100 text-black;
}
```
上面的輔助類包含以下幾類：
- 設(shè)置文本相關(guān)： `text-base` 、`font-medium` 、`text-white` 、`text-black`
- 設(shè)置背景相關(guān)的：`bg-rose-500` 、`bg-gray-100`
- 設(shè)置間距相關(guān)的：`p-3`
- 設(shè)置邊角相關(guān)的：`rounded-lg`
通過 Tailwind 提供的 `@apply` 方法來對(duì)這些輔助類進(jìn)行組合構(gòu)建更上層的樣式類。
上述的最終效果展示如下：
可以看到 TailwindCSS 將我們開發(fā)網(wǎng)站的過程抽象成為使用 Figma 等設(shè)計(jì)軟件設(shè)計(jì)界面的過程，同時(shí)提供了一套用于設(shè)計(jì)的規(guī)范，相當(dāng)于內(nèi)置最佳實(shí)踐，如顏色、陰影、字體相關(guān)的內(nèi)容，一個(gè)很形象的圖片可以說明這一點(diǎn)：
TailwindCSS 為我們規(guī)劃了一個(gè)元素可以設(shè)置的屬性，并且為每個(gè)屬性給定了一組可以設(shè)置的值，這些屬性+屬性值組合成一個(gè)有機(jī)的設(shè)計(jì)系統(tǒng)，非常便于團(tuán)隊(duì)協(xié)作與共識(shí)，讓我們開發(fā)網(wǎng)站就像做設(shè)計(jì)一樣簡單、快速，但是整體風(fēng)格又能保持一致。
TailwindCSS 同時(shí)也能與主流組件庫如 React、Vue、Svelte 結(jié)合，融入基于組件的 CSS 設(shè)計(jì)思想，但又只需要修改 HTML 上的類名，如我們?cè)O(shè)計(jì)一個(gè)食譜組件：
```
// Recipes.js
import Nav from './Nav.js'
import NavItem from './NavItem.js'
import List from './List.js'
import ListItem from './ListItem.js'
export default function Recipes({ recipes }) {
return (
<div className="divide-y divide-gray-100">
<Nav>
<NavItem href="/featured" isActive>Featured</NavItem>
<NavItem href="/popular">Popular</NavItem>
<NavItem href="/recent">Recent</NavItem>
</Nav>
<List>
{recipes.map((recipe)=> (
<ListItem key={recipe.id} recipe={recipe} />
))}
</List>
</div>
)
}
// Nav.js
export default function Nav({ children }) {
return (
<nav className="p-4">
<ul className="flex space-x-2">
{children}
</ul>
</nav>
)
}
// NavItem.js
export default function NavItem({ href, isActive, children }) {
return (
<li>
<a
href={href}
className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}
>
{children}
</a>
</li>
)
}
// List.js
export default function List({ children }) {
return (
<ul className="divide-y divide-gray-100">
{children}
</ul>
)
}
//ListItem.js
export default function ListItem({ recipe }) {
return (
<article className="p-4 flex space-x-4">
<img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" />
<div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">
<h2 className="text-lg font-semibold text-black mb-0.5">
{recipe.title}
</h2>
<dl className="flex flex-wrap text-sm font-medium whitespace-pre">
<div>
<dt className="sr-only">Time</dt>
<dd>
<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>
</dd>
</div>
<div>
<dt className="sr-only">Difficulty</dt>
<dd> · {recipe.difficulty}</dd>
</div>
<div>
<dt className="sr-only">Servings</dt>
<dd> · {recipe.servings} servings</dd>
</div>
<div className="flex-none w-full mt-0.5 font-normal">
<dt className="inline">By</dt>{' '}
<dd className="inline text-black">{recipe.author}</dd>
</div>
<div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">
<dt className="text-amber-500">
<span className="sr-only">Rating</span>
<svg width="16" height="20" fill="currentColor">
<path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />
</svg>
</dt>
<dd>{recipe.rating}</dd>
</div>
</dl>
</div>
</article>
)
}
```
上述食譜的效果如下：
可以看到我們無需寫一行 CSS，而是在 HTML 里面應(yīng)用各種輔助類，結(jié)合 React 的組件化設(shè)計(jì)，既可以輕松完成一個(gè)非常現(xiàn)代化且好看的食譜組件。
除了上面的特性，TailwindCSS 在響應(yīng)式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優(yōu)秀的支持，除此之外還有基于 TailwindCSS 構(gòu)建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產(chǎn)的物料庫：
因?yàn)樾枰远ǖ?CSS 不多，而需要自定義的 CSS 可以定義為可復(fù)用的輔助類，所以在可維護(hù)性方面也是極好的。
### 不足
- 因?yàn)橐胍粋€(gè)額外的運(yùn)行時(shí)，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會(huì)變大，所以速度會(huì)有影響
- 過于底層，相當(dāng)于給了用于設(shè)計(jì)的最基礎(chǔ)的指標(biāo)，但是如果我們想要快速設(shè)計(jì)網(wǎng)站，那么可能還需要一致的、更加上層的組件庫
- 相當(dāng)于引入了一套框架，具有一定的學(xué)習(xí)成本和使用成本
### 優(yōu)化
- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT")，可以大大提升編譯速度，可以考慮引入
- 基于 TailwindCSS，設(shè)計(jì)一套符合自身風(fēng)格的上層組件庫、物料庫，便于更加快速開發(fā)
- 提前探索、學(xué)習(xí)和總結(jié)一套教程與開發(fā)最佳實(shí)踐
- 探索 styled-components 等結(jié)合 TailwindCSS 的開發(fā)方式
## 參考鏈接
- [CSS 工程化發(fā)展歷程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化發(fā)展歷程")
以上便是本次分享的全部內(nèi)容，希望對(duì)你有所幫助^_^
喜歡的話別忘了 分享、點(diǎn)贊、收藏 三連哦~
歡迎關(guān)注公眾號(hào) 程序員巴士，來自字節(jié)、蝦皮、招銀的三端兄弟，分享編程經(jīng)驗(yàn)、技術(shù)干貨與職業(yè)規(guī)劃，助你少走彎路進(jìn)大廠。
見瀏覽器兼容性問題與解決方案？
參考答案
(1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。
(2)瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>
碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題。
(3)瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。
(4)瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案 ： 在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注 ： 因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時(shí)，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
一般在ie中用的是filter:alpha(opacity=0);這個(gè)屬性來設(shè)置div或者是塊級(jí)元素的透明度，而在firefox中，一般就是直接使用opacity:0,對(duì)于兼容的，一般的做法就是在書寫css樣式的將2個(gè)都寫上就行，就能實(shí)現(xiàn)兼容
列出display的值并說明他們的作用？
參考答案
display： none | inline | block |
list-item | inline-block | table | inline-table |
table-caption | table-cell | table-row | table-row-group | table-column |
table-column-group | table-footer-group | table-header-group | run-in | box |
inline-box | flexbox | inline-flexbox | flex | inline-flex
默認(rèn)值：inline
none： 隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
inline： 指定對(duì)象為內(nèi)聯(lián)元素。
block： 指定對(duì)象為塊元素。
list-item：指定對(duì)象為列表項(xiàng)目。
inline-block： 指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）
table： 指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對(duì)象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對(duì)象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對(duì)象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對(duì)象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對(duì)象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group： 指定對(duì)象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group： 指定對(duì)象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group： 指定對(duì)象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）
box：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
如何居中div, 如何居中一個(gè)浮動(dòng)元素?
參考答案
(1)、非浮動(dòng)元素居中：可以設(shè)置margin:0 auto 令其居中, 定位 ,父級(jí)元素text-algin:center等等
(2)、浮動(dòng)元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)左移動(dòng)-50%。
方法三:position定位等等。
CSS中l(wèi)ink 和@import 的區(qū)別是？
參考答案
(1)、link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2)、頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載;
(3)、import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無兼容問題;
(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.
請(qǐng)列舉幾種清除浮動(dòng)的方法(至少兩種)?
參考答案
(1)、父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
(2)、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法
(3)、父級(jí)div定義
偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)、父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
(5)、父級(jí)div定義 overflow:auto
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。
建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
block，inline和inlinke-block細(xì)節(jié)對(duì)比？
參考答案
?
display:block
a、block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
b、block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
c、block元素可以設(shè)置margin和padding屬性。
? display:inline
a、inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
b、inline元素設(shè)置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left,
margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top,
margin-bottom不會(huì)產(chǎn)生邊距效果。
? display:inline-block
a、簡單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補(bǔ)充說明
a、一般我們會(huì)用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級(jí)別，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對(duì)內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識(shí)別的，但使用display:inline-block在IE下會(huì)觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象。
什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
參考答案
優(yōu)雅降級(jí)： Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效.
漸進(jìn)增強(qiáng)： 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。
說說浮動(dòng)元素會(huì)引起的問題和你的解決辦法
參考答案
問題：
（1）父元素的高度無法被撐開，影響與父元素同級(jí)的元素
（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
（3）若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決問題(2)、(3)，對(duì)于問題(1)，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear:
both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動(dòng)的幾種方法：
(1)、額外標(biāo)簽法，<div
style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)、使用after偽類
content:" ";
height:0;
visibility:hidden;
display:block;
clear:both;
}
(3)、浮動(dòng)外部元素
(4)、設(shè)置overflow為hidden或者auto
你有哪些性能優(yōu)化的方法？
參考答案
回答一：
（1）、減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存
，圖片服務(wù)器。
（2）、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
（3）、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4）、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5）、少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。
（6）、避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。
（7）、圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳。
回答二：
(1)、減少HTTP請(qǐng)求次數(shù)
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內(nèi)容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避免使用CSS表達(dá)式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉(zhuǎn)
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請(qǐng)求
為什么要初始化CSS樣式？
參考答案
因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）
解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧？
參考答案
浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
(1)、使用空標(biāo)簽清除浮動(dòng)。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
(2)、使用overflow。
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after偽對(duì)象清除浮動(dòng)。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；
CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？
參考答案
行內(nèi)樣式表，內(nèi)嵌樣式表，外部樣式表
談?wù)勀銓?duì)CSS中刻度的認(rèn)識(shí)？
參考答案
在CSS中刻度是用于設(shè)置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制。如果不支持負(fù)長度值，那應(yīng)該變換到能夠被支持的最近的一個(gè)長度值。
c、長度單位包括：相對(duì)單位和絕對(duì)單位。
相對(duì)長度單位有： em, ex, ch, rem, vw, vh, vmax,
vmin
絕對(duì)長度單位有： cm, mm, q, in, pt, pc, px
絕對(duì)長度單位：1in=2.54cm=25.4 mm=72pt=6pc=96px
文本相對(duì)長度單位：em
相對(duì)長度單位是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(相對(duì)父元素的字體大小倍數(shù))
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
文本相對(duì)長度單位：rem
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對(duì)于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式，多數(shù)是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。
請(qǐng)你說說em與rem的區(qū)別？
參考答案
rem
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對(duì)于根元素的大小
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡單的說它就是一個(gè)相對(duì)單位。
作用：利用rem可以實(shí)現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對(duì)父元素的字體大小倍數(shù))
em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它與rem之間其實(shí)很相似，區(qū)別在。（相對(duì)是的HTML元素的字體大，默認(rèn)16px）
em與rem的重要區(qū)別： 它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算
請(qǐng)你說說box-sizing屬性的的用法？
參考答案
設(shè)置或檢索對(duì)象的盒模型組成模式
a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即( Element width=width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即( Element width=width ) 此屬性表現(xiàn)為怪異模式下的盒模型。
瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
參考答案
在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對(duì)舊版本瀏覽器設(shè)計(jì)、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會(huì)采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會(huì)采用怪異模式。
強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對(duì) HTML 頁面的影響，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型：在 IE 盒模型中，
box width=content width + padding left + padding right + border left + border
right，
box height=content height + padding top + padding bottom + border top +
border bottom。
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對(duì)齊方式:
對(duì)于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此，在圖片底部會(huì)有幾像素的空間。
（3）<table>元素中的字體:
CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對(duì)于table 元素，字體的某些屬性將不會(huì)從body或其他封閉元素繼承到table中，特別是 font-size屬性。
（4）
內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小，而在IE Quirks Mode 下，定義這些元素的width和height 屬性，能夠影響該元素顯示的大小尺寸。
（5）
元素的百分比高度:
a、CSS 中對(duì)于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負(fù)值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時(shí)使用。
b、當(dāng)一個(gè)元素使用百分比高度時(shí)，在IE Standards Mode 下，高度取決于內(nèi)容的變化，而在Quirks Mode 下，百分比高度則被正確應(yīng)用。
（6）
元素溢出的處理：
在 IE Standard Mode 下，overflow取默認(rèn)值 visible，即溢出可見，這種情況下，溢出內(nèi)容不會(huì)被裁剪，呈現(xiàn)在元素框外。而在Quirks Mode 下，該溢出被當(dāng)做擴(kuò)展box來對(duì)待，即元素的大小由其內(nèi)容決定，溢出不會(huì)被裁剪，元素框自動(dòng)調(diào)整，包含溢出內(nèi)容。
怪異Quirks模式是什么，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別？
參考答案
從IE6開始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對(duì)CSS的支持很差， IE6將對(duì)CSS提供更好的支持，然而這時(shí)的問題就來了，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？
在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫?huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。
盒模型： 在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設(shè)置行內(nèi)元素的高寬： 在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。
設(shè)置百分比的高度： 在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。
（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的，甚至完全不知道。）
說說你對(duì)邊距折疊的理解?
參考答案
外邊距折疊： 相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會(huì)合并成一個(gè)外邊距（margin）
相鄰： 沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計(jì)算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b、參與折疊的margin 都是負(fù)值：取的是其中絕對(duì)值較大的，然后，從0 位置，負(fù)向位移。
c、參與折疊的margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正margin 值中最大的 margin 相加。
內(nèi)聯(lián)與塊級(jí)標(biāo)簽有何區(qū)別？
參考答案
Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級(jí)元素，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素，其實(shí)就是一個(gè)意思。為了很好的布局，必須理解它們間的區(qū)別。
說說隱藏元素的方式有哪些？
參考答案
a、使用CSS的display:none，不會(huì)占有原來的位置
b、使用CSS的visibility:hidden，會(huì)占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會(huì)占有原來的位置
為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式？
參考答案
每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時(shí)，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會(huì)有很多兼容問題。
a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。
c、normalize：也許有些cssreset過于簡單粗暴，有點(diǎn)傷及無辜，normalize是另一個(gè)選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對(duì)HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進(jìn)行了一般化。
天貓 使用的css reset重置瀏覽器默認(rèn)樣式：
@charset
"gb2312";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 "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1,
h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a
{text-decoration: none;cursor:pointer}a:hover
{text-decoration: underline}img {border: 0}button, input, select,
textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear
{clear:both}.fr {float:right}.fl {float:left}.block
{display:block;text-indent:-999em}
談?wù)勀銓?duì)BFC與IFC的理解？(是什么，如何產(chǎn)生，作用)
參考答案
(1)、什么是BFC與IFC
a、BFC（Block Formatting Context）即“塊級(jí)格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文，你可以把BFC想象成一個(gè)大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。
b、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。也可以說BFC就是一個(gè)作用范圍。
c、在普通流中的Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時(shí)屬于這兩者。并且，Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。
(2)、如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個(gè)
d、position的值不為relative和static
CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發(fā)，float也是一種定位方式。
(3)、BFC的作用與特點(diǎn)
a、不和浮動(dòng)元素重疊，清除外部浮動(dòng)，阻止浮動(dòng)元素覆蓋
如果一個(gè)浮動(dòng)元素后面跟著一個(gè)非浮動(dòng)的元素，那么就會(huì)產(chǎn)生一個(gè)重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)，當(dāng)float不為none時(shí)，position為absolute、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流。
說說你對(duì)頁面中使用定位(position)的理解？
參考答案
使用css布局position非常重要，語法如下：
position：static | relative | absolute | fixed |
center | page | sticky
默認(rèn)值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以認(rèn)為靜態(tài)的，默認(rèn)元素都是靜態(tài)的定位，對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用，也就是使用left，right，bottom，top將不會(huì)生效。
(2)、relative
相對(duì)定位，對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。
(3)、absolute
a、絕對(duì)定位，對(duì)象脫離常規(guī)流，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個(gè)條件，第一個(gè)是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對(duì)照對(duì)象。第二個(gè)條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。
(4)、fixed
固定定位，與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。
(5)、center
與absolute一致，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個(gè)absolute模式。（CSS3）
(7)、sticky
對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。（CSS3）
如何解決多個(gè)元素重疊問題？
參考答案
使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto：元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文，除非它是根元素。
整數(shù)： 用整數(shù)值來定義堆疊級(jí)別。可以為負(fù)值。 說明：
檢索或設(shè)置對(duì)象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別，并確定該元素是否創(chuàng)建新的局部層疊上下文。
當(dāng)多個(gè)元素層疊在一起時(shí)，數(shù)字大者將顯示在上面。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
