手把手教你利用CSS控制文本溢出截?cái)嗍÷越鉀Q方案合集

載鏈接：https://segmentfault.com/a/1190000020920000

前言

在我們的日常開發(fā)工作中，文本溢出截?cái)嗍÷允呛艹Ｒ姷囊环N需考慮的業(yè)務(wù)場景細(xì)節(jié)。看上去 “稀松平常” ，但在實(shí)現(xiàn)上卻有不同的區(qū)分，是單行截?cái)噙€是多行截?cái)啵慷嘈械慕財(cái)嗯袛嗍腔谛袛?shù)還是基于高度？這些問題之下，都有哪些實(shí)現(xiàn)方案？他們之間的差異性和場景適應(yīng)性又是如何？凡事就怕較真，較真必有成長。本文試圖通過編碼實(shí)踐，給出一些答案。

先來點(diǎn)基礎(chǔ)的，單行文本溢出省略

核心 CSS 語句

overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內(nèi)容）
white-space: nowrap；（設(shè)置文字在一行顯示，不能換行）
text-overflow: ellipsis；（規(guī)定當(dāng)文本溢出時，顯示省略符號來代表被修剪的文本）

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好

短板

只支持單行文本截?cái)?/li>

適用場景

適用于單行文本溢出顯示省略號的情況

Demo

<style>
    .demo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
    <div class="demo">這是一段很長的文本</div>
</body>

示例圖片

進(jìn)階一下，多行文本溢出省略（按行數(shù)）

○ 純 CSS 實(shí)現(xiàn)方案

核心 CSS 語句

-webkit-line-clamp: 2；（用來限制在一個塊元素顯示的文本的行數(shù)，2 表示最多顯示 2 行。為了實(shí)現(xiàn)該效果，它需要組合其他的 WebKit 屬性）
display: -webkit-box；（和1結(jié)合使用，將對象作為彈性伸縮盒子模型顯示）
-webkit-box-orient: vertical；（和 1 結(jié)合使用，設(shè)置或檢索伸縮盒對象的子元素的排列方式）
overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）
text-overflow: ellipsis；（多行文本的情況下，用省略號“…”隱藏溢出范圍的文本)

優(yōu)點(diǎn)

響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號，否則不顯示省略號
省略號顯示位置剛好

短板

兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內(nèi)核的瀏覽器才支持

適用場景

多適用于移動端頁面，因?yàn)橐苿釉O(shè)備瀏覽器更多是基于 WebKit 內(nèi)核

Demo

<style>
    .demo {
          display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>

<body>
    <div class='demo'>這是一段很長的文本</div>
</body>

示例圖片

○ 基于 JavaScript 的實(shí)現(xiàn)方案

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號，否則不顯示省略號

短板

需要 JS 實(shí)現(xiàn)，背離展示和行為相分離原則
文本為中英文混合時，省略號顯示位置略有偏差

適用場景

適用于響應(yīng)式截?cái)啵嘈形谋疽绯鍪÷缘那闆r

Demo

當(dāng)前僅適用于文本為中文，若文本中有英文，可自行修改

<script type="text/javascript">
    const text = '這是一段很長的文本';
    const totalTextLen = text.length;
    const formatStr = () => {
        const ele = document.getElementsByClassName('demo')[0];
        const lineNum = 2;
        const baseWidth = window.getComputedStyle(ele).width;
        const baseFontSize = window.getComputedStyle(ele).fontSize;
        const lineWidth = +baseWidth.slice(0, -2);

        // 所計(jì)算的strNum為元素內(nèi)部一行可容納的字?jǐn)?shù)(不區(qū)分中英文)
        const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

        let content = '';
        
          // 多行可容納總字?jǐn)?shù)
        const totalStrNum = Math.floor(strNum * lineNum);

        const lastIndex = totalStrNum - totalTextLen;

        if (totalTextLen > totalStrNum) {
            content = text.slice(0, lastIndex - 3).concat('...');
        } else {
            content = text;
        }
        ele.innerHTML = content;
    }
    
    formatStr();
    
        window.onresize = () => {
        formatStr();
    };
</script>

<body>
    <div class='demo'></div>
</body>

示例圖片

再進(jìn)階一步，多行文本溢出省略（按高度）

○ 多行文本溢出不顯示省略號

核心 CSS 語句

overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）
line-height: 20px；（結(jié)合元素高度，高度固定的情況下，設(shè)定行高，控制顯示行數(shù)）
max-height: 40px；（設(shè)定當(dāng)前元素最大高度）

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>

短板

單純截?cái)辔淖? 不展示省略號，觀感上較為生硬

適用場景

適用于文本溢出不需要顯示省略號的情況

Demo

<style>
    .demo {
        overflow: hidden;
        max-height: 40px;
        line-height: 20px;
    }
</style>

<body>
    <div class='demo'>這是一段很長的文本</div>
</body>

示例圖片

○ 偽元素 + 定位實(shí)現(xiàn)多行省略

核心 CSS 語句

position: relative; （為偽元素絕對定位）
overflow: hidden; （文本溢出限定的寬度就隱藏內(nèi)容）
position: absolute;（給省略號絕對定位）
line-height: 20px; （結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）
height: 40px; （設(shè)定當(dāng)前元素高度）
::after {} （設(shè)置省略號樣式）

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>

短板

無法識別文字的長短，無論文本是否溢出范圍, 一直顯示省略號
省略號顯示可能不會剛剛好，有時會遮住一半文字

適用場景

適用于對省略效果要求較低，文本一定會溢出元素的情況

Demo

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>這是一段很長的文本</div>
</body>

示例圖片

○ 利用 Float 特性，純 CSS 實(shí)現(xiàn)多行省略

核心 CSS 語句

line-height: 20px；（結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）
overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）
float: right/left；（利用元素浮動的特性實(shí)現(xiàn)）
position: relative；（根據(jù)自身位置移動省略號位置, 實(shí)現(xiàn)文本溢出顯示省略號效果）
word-break: break-all；（使一個單詞能夠在換行時進(jìn)行拆分）

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號，否則不顯示省略號

短板

省略號顯示可能不會剛剛好，有時會遮住一半文字

適用場景

適用于對省略效果要求較低，多行文本響應(yīng)式截?cái)嗟那闆r

Demo

<style>
    .demo {
        background: #099;
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .demo::before{
        float: left;
        content:'';
        width: 20px;
        height: 40px;
    }

    .demo .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .demo::after{
        float:right;
        content:'...';
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

<body>
    <div class='demo'>這是一段很長的文本</div>
</body>

示例圖片

原理講解

有 A、B、C 三個盒子，A 左浮動，B、C 右浮動。設(shè)置 A 盒子的高度與 B 盒子高度（或最大高度）要保持一致

當(dāng)?shù)?B 盒子高度低于 A 盒子，C 盒子仍會處于 B 盒子右下方。
如果 B 盒子文本過多，高度超過了 A 盒子，則 C 盒子不會停留在右下方，而是掉到了 A 盒子下。
接下來對 C 盒子進(jìn)行相對定位，將 C 盒子位置向右側(cè)移動 100%，并向左上方向拉回一個 C 盒子的寬高（不然會看不到喲）。這樣在文本未溢出時不會看到 C 盒子，在文本溢出時，顯示 C 盒子。

收，大道歸簡，能力封裝

凡重復(fù)的，讓它單一；凡復(fù)雜的，讓它簡單。

每次都要搞一坨代碼，太麻煩。這時候你需要考慮將文本截?cái)嗟哪芰Γ庋b成一個可隨時調(diào)用的自定義容器組件。市面上很多 UI 組件庫，都提供了同類組件的封裝，如基于 Vue 的 ViewUI Pro，或面向小程序提供組件化解決能力的 MinUI。

轉(zhuǎn)載鏈接：https://segmentfault.com/a/1190000020920000

.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別

<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

2.HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；
而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。**

3.行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：

<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？
link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;

5.介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

6.常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;

移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

支持HTML5新標(biāo)簽：IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim;
如何區(qū)分HTML5： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素
H5新特性
表單畫布音視頻地理定位媒體查詢 css新特性離線緩存本地存儲拖拽

8.簡述一下你對HTML語義化的理解？

用正確的標(biāo)簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

9.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有連網(wǎng)時，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與網(wǎng)絡(luò)連接時更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線狀態(tài)時，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。

10.瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

11.iframe有那些缺點(diǎn)？

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript
動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。

12.Label的作用是什么？是怎么用的？

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

13.如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?

WebSocket、也可以調(diào)用localstorge、cookies等本地存儲方式，還可以使用頁面的路有參數(shù)傳遞
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；
14.如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域？
map+area或者svg
border-radius
純js實(shí)現(xiàn) 需要求一個點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

15.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：會重讀，而是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；

16.data-屬性的作用是什么？

h5新增的屬性
可以通過ele.dataset獲取到標(biāo)簽上的data-x的屬性
返回一個對象

17.常見兼容性問題？

問題：png24位的圖片在iE6瀏覽器上出現(xiàn)背景，

解決：解決方案是做成PNG8.

問題：瀏覽器默認(rèn)的margin和padding不同。

解決：方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

問題：IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離**

解決：解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
漸進(jìn)識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。
css

.bb{ 
   background-color:#f1ee18;/*所有識別*/ 
  .background-color:#00deff\9; /*IE6、7、8識別*/ 
  +background-color:#a200ff;/*IE6、7識別*/ 
  _background-color:#1e0bd1;/*IE6識別*/ 
  }

問題：IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，F(xiàn)irefox下,只能使用getAttribute()獲取自定義屬性.

解決：解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

問題：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性，F(xiàn)irefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

問題：Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,

解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

問題：超鏈接訪問過后hover樣式就不出現(xiàn)了被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了

解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

18.你知道多少種Doctype文檔類型？

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

19.HTML與XHTML——二者有什么區(qū)別？

1）所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記
2）所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3）所有的XML標(biāo)記都必須合理嵌套
4）所有的屬性必須用引號""括起來
5）把所有<和&特殊符號用編碼表示
6）給所有屬性賦一個值
7）不要在注釋內(nèi)容中使“--”
8）圖片必須有說明文字

20.<img>的title和alt有什么區(qū)別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點(diǎn)分析。

21.div+css的布局較table布局有什么優(yōu)點(diǎn)？

改版的時候更方便只要改css文件。
頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

22.CSS都有哪些選擇器？

派生選擇器（用HTML標(biāo)簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優(yōu)先級是怎么樣定義的？

基本原則：

一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級就越高。
復(fù)雜的計(jì)算方法：
用1表示派生選擇器的優(yōu)先級
用10表示類選擇器的優(yōu)先級
用100標(biāo)示ID選擇器的優(yōu)先級
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
xxx li 優(yōu)先級 100 +1
那么問題來了，看下列代碼，<p>標(biāo)簽內(nèi)的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關(guān)，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關(guān)系無關(guān)。

23.行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

塊級元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

24.什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse。
在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計(jì)算規(guī)則：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。

25.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會繼承透明效果！）

26.CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？ CSS3新增偽類有那些？

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標(biāo)簽選擇器（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 ;
*   優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);
*   載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級為:

   !important >  id > class > tag  
   important 比 內(nèi)聯(lián)優(yōu)先級高

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> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。

27.如何居中div,如何居中一個浮動元素?

給div設(shè)置一個寬度，然后添加margin:0 auto屬性

div{

width:200px;
margin:0 auto;

}

居中一個浮動元素

  確定容器的寬高 寬500 高 300 的層
  設(shè)置層的外邊距

.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

28.瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？

*  IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
*  png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
*  瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
*  IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。 
  浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 
 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
  漸進(jìn)識別的方式，從總體中逐漸排除局部。 
  首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 
  接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。

css

  .bb{
   background-color:#f1ee18;/*所有識別*/
  .background-color:#00deff\9; /*IE6、7、8識別*/
  +background-color:#a200ff;/*IE6、7識別*/
  _background-color:#1e0bd1;/*IE6識別*/
  }


*  IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
*  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
*  Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

29.css優(yōu)先級算法如何計(jì)算？

!important > id > class > 標(biāo)簽
!important 比內(nèi)聯(lián)優(yōu)先級高

優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);
以最后載入的樣式為準(zhǔn);

30.哪些css屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;
不可繼承：border padding margin width height ;

DOM

講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴(kuò)展的標(biāo)記語言，所謂可擴(kuò)展就是它可以描述任何結(jié)構(gòu)化的數(shù)據(jù)，它是一棵樹！

1.documen.write和 innerHTML的區(qū)別

document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分

2.DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?

1）創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點(diǎn)

2）添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個新的子節(jié)點(diǎn)

3）查找

getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強(qiáng)，會得到一個數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性

3.attribute和property的區(qū)別是什么？

attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性；
property就是dom元素在js中作為對象擁有的屬性。
所以：
對于html的標(biāo)準(zhǔn)屬性來說，attribute和property是同步的，是會自動更新的，
但是對于自定義的屬性來說，他們是不同步的，

4.src和href的區(qū)別

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src ="js.js"></script>瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執(zhí)行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引入資源之間建立聯(lián)系。

存儲

cookie

cookie 本身不是用來做服務(wù)器端存儲的（計(jì)算機(jī)領(lǐng)域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設(shè)計(jì)用來在服務(wù)器和客戶端進(jìn)行信息傳遞的，因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力（例如記住用戶名和密碼），因此就被開發(fā)者用上了。
使用起來也非常簡單，document.cookie = ....即可。
但是 cookie 有它致命的缺點(diǎn)：
存儲量太小，只有 4KB
所有 HTTP 請求都帶著，會影響獲取資源的效率
API 簡單，需要封裝才能用

locationStorage 和 sessionStorage

后來，HTML5 標(biāo)準(zhǔn)就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設(shè)計(jì)的。

其優(yōu)點(diǎn)有：

存儲量增大到 5MB
不會帶到 HTTP 請求中
API 適用于數(shù)據(jù)存儲 localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區(qū)別就在于它是根據(jù) session 過去時間而實(shí)現(xiàn)，而localStorage會永久有效，應(yīng)用場景不同。例如，一些需要及時失效的重要信息放在sessionStorage中，一些不重要但是不經(jīng)常設(shè)置的信息，放在localStorage中。

對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；

.普通流(normal flow)

這個單詞很多人翻譯為文檔流，字面翻譯普通流或者標(biāo)準(zhǔn)流都可以。

CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位。

普通流實(shí)際上就是一個網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨(dú)占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。

2.浮動(float)

元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)標(biāo)準(zhǔn)流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}

屬性值可選如下：

left：元素向左浮動
right：元素向右浮動
none：元素不浮動（默認(rèn)值）

浮動脫離標(biāo)準(zhǔn)流，俗稱脫標(biāo)，不占位置，會影響標(biāo)準(zhǔn)流，導(dǎo)致塌陷問題。浮動只有左右浮動。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: blue;            float: left;        }        .dv2 {            width: 120px;            height: 120px;            background-color: red;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

浮動首先創(chuàng)建包含塊的概念（包裹）。就是說，浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 150px;            height: 150px;            background-color: blue;        }        .dv2 {            width: 100px;            height: 100px;            background-color: red;            float: right;        }</style></head><body>    <div class="dv1">        <div class="dv2"></div>    </div></body></html>

一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 250px;            height: 250px;            background-color: blue;        }        .dv2 {            width: 100px;            height: 100px;            background-color: red;            float: left;        }        .dv3 {            width: 100px;            height: 100px;            background-color: pink;            float: left;        }</style></head><body>    <div class="dv1">        <div class="dv2"></div>        <div class="dv3"></div>    </div></body></html>

總結(jié)：元素添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少，浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。浮動的目的就是為了讓多個塊級元素同一行上顯示。

3.清除浮動

由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時就需要在該元素中清除浮動。

準(zhǔn)確地說，并不是清除浮動，而是清除浮動后造成的影響。

1）clear清除

在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

屬性值可選參數(shù)：

left：不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
right：不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
both：同時清除左右兩側(cè)浮動的影響

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: red;        }        .dv2 {            width: 100px;            height: 100px;            background-color: blue;            float: left;        }        .dv3 {            width: 100px;            height: 100px;            background-color: pink;            clear: both;        }        .dv4 {            width: 100px;            height: 100px;            background-color: green;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div>    <div class="dv3"></div>    <div class="dv4"></div></body></html>

2）額外標(biāo)簽法

優(yōu)點(diǎn)：通俗易懂，書寫方便

缺點(diǎn)：添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: red;            float: left;        }        .dv2 {            width: 100px;            height: 100px;            background-color: blue;        }</style></head><body>    <div class="dv1"></div>    <div style="clear: both"></div>    <div class="dv2"></div></body></html>

3）父級添加overflow屬性方法

可以給父級添加：overflow為 hidden|auto|scroll  都可以實(shí)現(xiàn)。

優(yōu)點(diǎn)：代碼簡潔

缺點(diǎn)：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent1 {            width: 100px;            background-color: blue;            overflow: hidden;        }        .parent2 {            width: 100px;            height: 100px;            background-color: red;        }        .child {            width: 50px;            height: 50px;            background-color: pink;            float: left;        }</style></head><body>    <div class="parent1">        <div class="child"></div>    </div>    <div class="parent2"></div></body></html>

4）使用after偽元素清除浮動

:after 方式為空元素的升級版，好處是不用單獨(dú)加標(biāo)簽了

優(yōu)點(diǎn)：符合閉合浮動思想結(jié)構(gòu)語義化正確

缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent1 {            width: 100px;            background-color: blue;        }        .parent2 {            width: 100px;            height: 100px;            background-color: red;        }        .child {            width: 50px;            height: 50px;            background-color: pink;            float: left;        }        .clearfix:after {            content: "";            display: block;            clear: both;            visibility: hidden;        }        .clearfix {            *zoom: 1;        }</style></head><body>    <div class="parent1 clearfix">        <div class="child"></div>    </div>    <div class="parent2"></div></body></html>

在線咨詢

上一篇：html頁面強(qiáng)制所有鏈接新窗口打開的方法
下一篇：編寫自己的代碼庫

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

手把手教你利用CSS控制文本溢出截?cái)嗍÷越鉀Q方案合集

前言

先來點(diǎn)基礎(chǔ)的，單行文本溢出省略

進(jìn)階一下，多行文本溢出省略（按行數(shù)）

○ 純 CSS 實(shí)現(xiàn)方案

○ 基于 JavaScript 的實(shí)現(xiàn)方案

再進(jìn)階一步，多行文本溢出省略（按高度）

○ 多行文本溢出不顯示省略號

○ 偽元素 + 定位實(shí)現(xiàn)多行省略

○ 利用 Float 特性，純 CSS 實(shí)現(xiàn)多行省略

收，大道歸簡，能力封裝

.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別

2.HTML5 為什么只需要寫 <!DOCTYPE HTML>？

3.行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

5.介紹一下你對瀏覽器內(nèi)核的理解？

6.常見的瀏覽器內(nèi)核有哪些？

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

8.簡述一下你對HTML語義化的理解？

9.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

10.瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？

11.iframe有那些缺點(diǎn)？

12.Label的作用是什么？是怎么用的？

13.如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信?

15.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

16.data-屬性的作用是什么？

17.常見兼容性問題？

問題：png24位的圖片在iE6瀏覽器上出現(xiàn)背景，

問題：瀏覽器默認(rèn)的margin和padding不同。

問題：IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產(chǎn)生20px的距離**

問題：IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，F(xiàn)irefox下,只能使用getAttribute()獲取自定義屬性.

問題：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性，F(xiàn)irefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

問題：Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,

問題：超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了

18.你知道多少種Doctype文檔類型？

19.HTML與XHTML——二者有什么區(qū)別？

20.<img>的title和alt有什么區(qū)別？

21.div+css的布局較table布局有什么優(yōu)點(diǎn)？

22.CSS都有哪些選擇器？

基本原則：

23.行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

24.什么是外邊距重疊？重疊的結(jié)果是什么？

25.rgba()和opacity的透明效果有什么不同？

26.CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？ CSS3新增偽類有那些？

27.如何居中div,如何居中一個浮動元素?

28.瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

29.css優(yōu)先級算法如何計(jì)算？

30.哪些css屬性可以繼承？

DOM

1.documen.write和 innerHTML的區(qū)別

2.DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?

1）創(chuàng)建新節(jié)點(diǎn)

2）添加、移除、替換、插入

3）查找

3.attribute和property的區(qū)別是什么？

4.src和href的區(qū)別

存儲

cookie

locationStorage 和 sessionStorage

其優(yōu)點(diǎn)有：

對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識

.普通流(normal flow)

2.浮動(float)

3.清除浮動

1）clear清除

2）額外標(biāo)簽法

3）父級添加overflow屬性方法

4）使用after偽元素清除浮動

您的項(xiàng)目需求

3.行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？

問題：超鏈接訪問過后hover樣式就不出現(xiàn)了被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了

28.瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？