HTML&amp;css面試題

.Doctype作用？標準模式與兼容模式各有什么區(qū)別

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

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

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

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

首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強調(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標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

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

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(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新標簽的瀏覽器兼容問題？如何區(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)生負面影響的元素：frame，frameset，noframes；

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

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

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

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

在用戶沒有連網(wǎng)時，可以正常訪問站點或應(yīng)用，在用戶與網(wǎng)絡(luò)連接時更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個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進行需求實現(xiàn)。

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

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

11.iframe有那些缺點？

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

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

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

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

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

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

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

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

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

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

17.常見兼容性問題？

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

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

問題：瀏覽器默認的margin和padding不同。

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

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

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

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

問題：Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,

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

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

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

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

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

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

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

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

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

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

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

22.CSS都有哪些選擇器？

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

基本原則：

一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準確，它的優(yōu)先級就越高。
復(fù)雜的計算方法：
用1表示派生選擇器的優(yōu)先級
用10表示類選擇器的優(yōu)先級
用100標示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>標簽內(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)特性：
總是獨占一行，表現(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è)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

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

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

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

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

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

*   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 ;
*   優(yōu)先級就近原則，樣式定義最近者為準;
*   載入樣式以最后載入的定位為準;

優(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.
*  瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
*  IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。 
  浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 
 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
  漸進識別的方式，從總體中逐漸排除局部。 
  首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。 
  接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。

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屬性.
* （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
*  Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

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

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

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

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

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

DOM

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

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

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

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

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

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

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

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

3）查找

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

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

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

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

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

存儲

cookie

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

locationStorage 和 sessionStorage

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

其優(yōu)點有：

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

對WEB標準以及W3C的理解與認識

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

前在項目的過程中遇到了一個問題，某個 div 希望始終顯示在最上面，而在之后的元素都顯示在它之下，當(dāng)時設(shè)置了 z-index 也沒有效果，不知道什么原因，因此找了一下 CSS 相關(guān)資料，解決了這個問題的同時，也學(xué)習(xí)了很多知識，特此和大家分享一下。

屏幕是一個二維平面，然而 HTML 元素卻是排列在三維坐標系中， x 為水平方向， y 為垂直方向， z為屏幕由內(nèi)向外方向，我們在看屏幕的時候是沿著 z 軸方向從外向內(nèi)的。由此，元素在用戶視角就形成了層疊的關(guān)系，某個元素可能覆蓋了其他元素也可能被其他元素覆蓋；

這里有幾個重要的概念：層疊上下文 (堆疊上下文, Stacking Context)、層疊等級 (層疊水平, Stacking Level)、層疊順序 (層疊次序, 堆疊順序, Stacking Order)、z-index、BFC（塊級格式化上下文，Block Formatting Context），這些概念共同決定了你看到元素的位置，下面我們就圍繞著這幾個概念來一起學(xué)習(xí)一下。

聲明：

以下定位元素指的是 position:absolute|fixed|relative|sticky
以下非定位元素指的是 position:initial|static
本文蠻長的，但是如果你可以仔細看完，那對相關(guān)概念的掌握就非常好了 (～o￣▽￣)～

1. 層疊上下文 (Stacking Context)

層疊上下文 (堆疊上下文, Stacking Context)，是 HTML 中一個三維的概念。在 CSS2.1 規(guī)范中，每個元素的位置是三維的，當(dāng)元素發(fā)生層疊，這時它可能覆蓋了其他元素或者被其他元素覆蓋；排在 z 軸越靠上的位置，距離屏幕觀察者越近。

文章 <關(guān)于z-index 那些你不知道的事> 有一個很好的比喻，這里引用一下；

可以想象一張桌子，上面有一堆物品，這張桌子就代表著一個層疊上下文。如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另一個層疊上下文。現(xiàn)在想象在第一張桌子上有四個小方塊，他們都直接放在桌子上。在這四個小方塊之上有一片玻璃，而在玻璃片上有一盤水果。這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中一個不同的層疊層，而這個層疊上下文就是桌子。

每一個網(wǎng)頁都像一個房間，這個房間就是 <html></html>，其他層疊上下文就像這個房間里的桌子，HTML 標簽中的一切都被置于這個房間中。

當(dāng)給一個元素的 position 值賦為 fixed 或 sticky 值時，你就創(chuàng)建了一個新的層疊上下文，其中有著獨立于頁面上其他層疊上下文和層疊層的層疊層，這就相當(dāng)于你把另一張桌子帶到了房間里。

層疊上下文 1 (Stacking Context 1)是由文檔根元素形成的，層疊上下文 2 和 3 (Stacking Context 2, 3) 都是層疊上下文 1 (Stacking Context 1) 上的層疊層。他們各自也都形成了新的層疊上下文，其中包含著新的層疊上下文。

在層疊上下文中，其子元素按照上面解釋的規(guī)則進行層疊。形成層疊上下文的方法有：

根元素 <html></html>；
position 值為 absolute|relative，且 z-index 值不為 auto；
position 值為 fixed|sticky；
z-index 值不為 auto 的 flex 元素，即父元素屬性 display:flex|inline-flex；
opacity 屬性值小于 1 的元素；
transform 屬性值不為 none 的元素；
mix-blend-mode 屬性值不為 normal 的元素；
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path值不為 none 的元素；
perspective 值不為 none 的元素；
isolation 屬性被設(shè)置為 isolate 的元素；
will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
-webkit-overflow-scrolling 屬性設(shè)置為 touch 的元素；

總結(jié):

層疊上下文可以包含在其他層疊上下文中，并且一起組建了一個有層級的層疊上下文；
每個層疊上下文完全獨立于它的兄弟元素，當(dāng)處理層疊時只考慮子元素，類似于 BFC；
每個層疊上下文是自包含的：當(dāng)元素的內(nèi)容發(fā)生層疊后，整個該元素將會在父級疊上下文中按順序進行層疊；

2. 層疊等級 (Stacking Level)

層疊等級 (層疊水平, Stacking Level) 決定了在同一個層疊上下文中，元素在 z 軸上的顯示的順序；

普通元素的層疊等級優(yōu)先由其所在的層疊上下文決定；
層疊等級的比較，只有在同一個層疊上下文元素中才有意義；
在同一個層疊上下文中，層疊等級描述定義的是該層疊上下文中的元素在 z 軸上的上下順序；

對于普通元素的層疊水平探討只局限于在當(dāng)前層疊上下文中：

層疊上下文本身是一個強力的「層疊結(jié)界」，普通的元素水平是無法突破這個結(jié)界和結(jié)界外的元素去較量層疊水平的。
— CSS 世界

另外，層疊等級并不一定由 z-index 決定，只有定位元素的層疊等級才由 z-index 決定，其他類型元素的層疊等級由層疊順序、他們在 HTML 中出現(xiàn)的順序、他們的祖先元素的層疊等級一同決定，詳細的規(guī)則見下面層疊順序的介紹。

3. z-index

在 CSS 2.1 中, 所有的盒模型元素都處于三維坐標系中。除了我們常用的橫坐標和縱坐標，盒模型元素還可以沿著「z 軸」層疊擺放，當(dāng)他們相互覆蓋時，z 軸順序就變得十分重要。
-- CSS 2.1 Section 9.9.1 - Layered presentation

z-index 只適用于定位的元素，對非定位元素?zé)o效，它可以被設(shè)置為正整數(shù)、負整數(shù)、 0、 auto，如果一個定位元素沒有設(shè)置 z-index，那么默認為 auto；

元素的 z-index 值只在同一個層疊上下文中有意義。如果父級層疊上下文的層疊等級低于另一個層疊上下文的，那么它 z-index 設(shè)的再高也沒用。所以如果你遇到 z-index 值設(shè)了很大，但是不起作用的話，就去看看它的父級層疊上下文是否被其他層疊上下文蓋住了。

4. 層疊順序 (Stacking Order)

層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個層疊上下文中的順序規(guī)則（之前的層疊上下文和層疊等級是概念），從層疊的底部開始，共有七種層疊順序：

背景和邊框：形成層疊上下文的元素的背景和邊框。
負 z-index 值：層疊上下文內(nèi)有著負 z-index 值的定位子元素，負的越大層疊等級越低；
塊級盒：文檔流中的塊級、非定位子元素；
浮動盒：非定位浮動元素；
行內(nèi)盒：文檔流中行內(nèi)、非定位子元素；
z-index: 0： z-index 為 0 或 auto 的定位元素，這些元素形成了新的層疊上下文；
正 z-index 值： z-index 為正的定位元素，正的越大層疊等級越高；

第 7 級順序的元素會顯示在之前順序元素的上方，也就是看起來覆蓋了更低級的元素：

除層疊順序優(yōu)先級規(guī)則之外，還有一條后來居上規(guī)則：同一個層疊順序的元素按照在 HTML 里出現(xiàn)的順序依次層疊。這兩個規(guī)則共同決定瀏覽器元素在文檔中是如何層疊的。

5. 文檔流 (Document Flow)

5.1 常規(guī)流 (Normal flow)

在常規(guī)流中，盒一個接著一個排列;
在塊級格式化上下文里面，它們豎著排列；
在行內(nèi)格式化上下文里面，它們橫著排列;
當(dāng) position 為 static 或 relative，并且 float 為 none 時會觸發(fā)常規(guī)流；
對于靜態(tài)定位(static positioning)， position:static，盒的位置是常規(guī)流布局里的位置；
對于相對定位(relative positioning)， position:relative，盒偏移位置由 top、 bottom、 left、 right 屬性定義。即使有偏移，仍然保留原有的位置，其它常規(guī)流不能占用這個位置。

5.2 浮動 (Floats)

左浮動元素盡量靠左、靠上，右浮動同理；
這導(dǎo)致常規(guī)流環(huán)繞在它的周邊，除非設(shè)置 clear 屬性；
浮動元素不會影響塊級元素的布局；
但浮動元素會影響行內(nèi)元素的布局，讓其圍繞在自己周圍，撐大父級元素，從而間接影響塊級元素布局；
最高點不會超過當(dāng)前行的最高點、它前面的浮動元素的最高點；
不超過它的包含塊，除非元素本身已經(jīng)比包含塊更寬；
行內(nèi)元素出現(xiàn)在左浮動元素的右邊和右浮動元素的左邊，左浮動元素的左邊和右浮動元素的右邊是不會擺放浮動元素的；

5.3 絕對定位 (Absolute positioning)

絕對定位方案，盒從常規(guī)流中被移除，不影響常規(guī)流的布局；
它的定位相對于它的包含塊，相關(guān) CSS 屬性： top、 bottom、 left、 right；
如果元素的屬性 position 為 absolute 或 fixed，它是絕對定位元素；
對于 position:absolute，元素定位將相對于上級元素中最近的一個 relative、 fixed、 absolute，如果沒有則相對于 body；

6. BFC （Block Formatting Context）

6.1 什么是 BFC

BFC (Block Formatting Context) 塊級格式化上下文，是用于布局塊級盒子的一塊渲染區(qū)域，相對應(yīng)的還有 IFC（Inline Formatting Context）內(nèi)聯(lián)格式化上下文，不是本文重點，讀者可以自行查閱相關(guān)知識。

BFC 是 Web 頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域。
— MDN - 塊格式化上下文

一個 BFC 的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新 BFC 的子元素的內(nèi)部元素。這從另一方角度說明，一個元素不能同時存在于兩個 BFC 中。因為如果一個元素能夠同時處于兩個 BFC 中，那么就意味著這個元素能與兩個 BFC 中的元素發(fā)生作用，就違反了 BFC 的隔離作用。

觸發(fā) BFC 的方式有：

根元素，即 HTML 標簽;
浮動元素，即 float 值為 left、 right;
overflow 值不為 visible，即值為 auto、 scroll、 hidden；
display 值為 inline-block、 table-cell、 table-caption、 table、 inline-table、 flex、 inline-flex、 grid、 inline-grid；
定位元素： position 值為 absolute、 fixed；
contain 為 layout、 content、 paint 的元素；

注意： display:table 也可以生成 BFC 的原因在于 Table 會默認生成一個匿名的 table-cell，是這個匿名的 table-cell 生成了 BFC。

6.2 用法

1. 阻止相鄰元素的 margin 合并

屬于同一個 BFC 的兩個相鄰塊級子元素的上下 margin 會發(fā)生重疊，(設(shè)置 writing-mode:tb-rl時，水平 margin 會發(fā)生重疊)。所以當(dāng)兩個相鄰塊級子元素分屬于不同的 BFC 時可以阻止 margin 重疊。可以給任一個相鄰塊級盒子的外面包一個 div，通過改變此 div 的屬性使兩個原盒子分屬于兩個不同的 BFC，以此來阻止 margin 重疊。

代碼和預(yù)覽參見：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN

2. 阻止元素被浮動元素覆蓋

一個正常文檔流的塊級元素可能被一個 float 元素覆蓋，擠占正常文檔流，因此可以設(shè)置一個元素的 float、 display、 position 值等方式觸發(fā) BFC，以阻止被浮動盒子覆蓋。

代碼和預(yù)覽參見：Codepen - 使用BFC阻止元素被浮動元素覆蓋：https://codepen.io/SHERlocked93/pen/pazdzB

3. 包含浮動元素

通過改變包含浮動子元素的父盒子的屬性值，觸發(fā) BFC，以此來包含子元素的浮動盒子。

代碼和預(yù)覽參見：Codepen - 使用BFC包含浮動元素：https://codepen.io/SHERlocked93/pen/OQLOqG

7. 實戰(zhàn)

下面一起來看幾個例子實戰(zhàn)一下，幫助理解。

7.1 普通情況

三個 relative 定位的 div 塊中各有 absolute 的不同顏色的 span.red、 span.green、 span.blue，它們都設(shè)置了 position:absolute；

代碼和預(yù)覽參見：Codepen - 普通情況：https://codepen.io/SHERlocked93/pen/aaPord

那么當(dāng)沒有元素包含 z-index 屬性時，這個例子中的元素按照如下順序?qū)盈B（從底到頂順序）：

根元素的背景和邊界；
塊級非定位元素按 HTML 中的出現(xiàn)順序?qū)盈B；
行內(nèi)非定位元素按 HTML 中的出現(xiàn)順序?qū)盈B；
定位元素按 HTML中的出現(xiàn)順序?qū)盈B；

紅綠藍都屬于 z-index 為 auto 的定位元素，因此按照 7 層層疊順序規(guī)則來說同屬于層疊順序第 6 級，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍

7.2 在相同層疊上下文的父元素內(nèi)的情況

紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設(shè)置了 position:absolute， first-box 與 second-box 都設(shè)置了 position:relative；

代碼和預(yù)覽參見：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw

這個例子中，紅藍綠元素的父元素 first-box 與 second-box 都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素，且都是層疊順序第 6 級，所以按 HTML 中的出現(xiàn)順序?qū)盈B：紅->綠->藍

7.3 給子元素增加 z-index

紅綠位于一個 div.first-box 下，藍黃位于 div.second-box 下，紅綠藍都設(shè)置了 position:absolute，如果這時給綠加一個屬性 z-index:1，那么此時 .green 位于最上面；

如果再在 .second-box 下 .green 后加一個絕對定位的 span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍的下面；

代碼和預(yù)覽參見：Codepen - 設(shè)置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK

這個例子中，紅藍綠黃元素的父元素中都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素

紅藍都沒有設(shè)置 z-index，同屬于層疊順序中的第 6 級，按 HTML 中的出現(xiàn)順序?qū)盈B；
綠設(shè)置了正的 z-index，屬于第 7 級；
黃設(shè)置了負的 z-index，屬于第 2 級；

所以這個例子中的從底到高顯示的順序就是：黃->紅->藍->綠

7.4 在不同層疊上下文的父元素內(nèi)的情況

紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設(shè)置了 position:absolute，如果 first-box 的 z-index 設(shè)置的比 second-box 的大，那么此時無論藍的 z-index 設(shè)置的多大 z-index:999，藍都位于紅綠的下面；如果我們只更改紅綠的 z-index 值，由于這兩個元素都在父元素 first-box 產(chǎn)生的層疊上下文中，此時誰的 z-index 值大，誰在上面；

代碼和預(yù)覽參見：Codepen - 不同層疊上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ

這個例子中，紅綠藍都屬于設(shè)置了 z-index 的定位元素，不過他們的父元素創(chuàng)建了新的層疊上下文；

紅綠的父元素 first-box 是設(shè)置了正 z-index 的定位元素，因此創(chuàng)建了一個層疊上下文，屬于層疊順序中的第 7 級；
藍的父元素 second-box 也同樣創(chuàng)建了一個層疊上下文，屬于層疊順序中的第6級；
按照層疊順序， first-box 中所有元素都排在 second-box 上；
紅綠都屬于層疊上下文 first-box 中且設(shè)置了不同的正 z-index，都屬于層疊順序中第 7 級；
藍屬于層疊上下文 second-box，且設(shè)置了一個很大的正 z-index，屬于層疊元素中第 7 級；
雖然藍的 z-index 很大，但是因為 second-box 的層疊等級比 first-box 小，因此位于紅綠之下；

所以這個例子中從低到到顯示的順序：藍->紅->綠

(我遇到的的情況就屬于這個例子類似情形)

7.5 給子元素設(shè)置 opacity

紅綠位于 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設(shè)置了 position:absolute，綠設(shè)置了 z-index:1，那么此時綠位于紅藍的最上面；

如果此時給 first-box 設(shè)置 opacity:.99，這時無論紅綠的 z-index 設(shè)置的多大 z-index:999，藍都位于紅綠的上面；

如果再在 .second-box 下 .green 后加一個 span.gold，設(shè)置 z-index:-1，那么它將位于紅綠藍的下面；

代碼和預(yù)覽參見：Codepen - opacity的影響：https://codepen.io/SHERlocked93/pen/GXPRWB

之前已經(jīng)介紹了，設(shè)置 opacity 也可以形成層疊上下文，因此：

first-box 設(shè)置了 opacity， first-box 成為了一個新的層疊上下文；
second-box 沒有形成新的層疊上下文，因此其中的元素都屬于根層疊上下文；
黃屬于層疊順序中第 2 級，紅綠屬于第 7 級， first-box 屬于第 6 級，藍屬于層疊順序中第6級且按HTML出現(xiàn)順序位于 first-box 之上；

所以這個例子中從低到到顯示的順序：黃->紅->綠->藍

關(guān)注微信公眾號：安徽思恒信息科技有限公司,了解更多技術(shù)內(nèi)容……

lt;div>塊元素基礎(chǔ)屬性講解

<div>元素是個有故事的元素，這個元素很早就出現(xiàn)在html超文本標記語言中，它設(shè)計之初就是為了解決網(wǎng)頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

在我還上初中的時候，智能手機還沒有出現(xiàn)，更沒有平板電腦等移動設(shè)備。上網(wǎng)是通過擺在桌子上的計算機來完成的。

那時，大街小巷上有好多網(wǎng)吧。

那時，馬云剛剛辭去工作準備創(chuàng)業(yè)。

那時，發(fā)送郵件的操作都會出現(xiàn)在計算機課程中。

那時，對頁面還沒有現(xiàn)在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網(wǎng)頁三劍客！

那時，制作網(wǎng)頁可以不用懂的html的寫法！

第一次接觸網(wǎng)頁制作是在大學(xué)的專業(yè)課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網(wǎng)頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。

那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。

因為當(dāng)時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！

也就是說，在移動智能設(shè)備誕生之前，在用戶對頁面還沒有可以適應(yīng)不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業(yè)，讓<div>這個專業(yè)的塊元素閑置了好久。

直到智能手機，平板電腦產(chǎn)生后，由于對頁面的跨平臺顯示的要求的出現(xiàn)（這類適應(yīng)多平臺的頁面布局叫做響應(yīng)式布局），<table>表格制作的頁面在響應(yīng)式布局大行其道的今天，用它布局的頁面開始出現(xiàn)代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數(shù)反感和惱火的插件。

從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關(guān)代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復(fù)了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術(shù)的從業(yè)人感到難受。

dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網(wǎng)頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。

這個故事在開始學(xué)習(xí)<div>和css布局之前我都會講給學(xué)生（一群文科生）聽，我只是想告訴大家，學(xué)習(xí)任何計算機技術(shù)，我們可以從簡單易學(xué)的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術(shù)換代中不會被輕易淘汰。

在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數(shù)字娛樂技術(shù)概述》，這門課既不娛樂也不概述，但是通篇都是數(shù)字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學(xué)。

從此我開始學(xué)習(xí)數(shù)學(xué)。因為老師的一句話：從2000年到現(xiàn)在（2014）雖然各種軟件層出不窮，但是計算機圖形學(xué)的核心算法卻幾乎沒什么改變。

向下挖掘雖然很難，但是有必要！與各位共勉！

下面開始今天的內(nèi)容。

首先，我們將之前的"第一個頁面.html"文件復(fù)制一個，叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。

如圖：

下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：

<body><div></div></body>

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>

我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經(jīng)開始接觸CSS的一些內(nèi)容了。具體寫法的講解大家可以看這個教程，這里不再贅述。

示例代碼如下：（通過style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）

<div style = "border-style: solid;">

效果如圖：

因為里面沒有內(nèi)容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。

為了看起來花哨些，加張圖片吧！

示例圖片

示例代碼如下：

<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>

大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作》

效果如下：

其中，我們也是使用了style的方式為<img>設(shè)置的寬度，這個設(shè)置方法在<div>中一樣使用！

代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！

<div style = "border-style: solid; width:50%;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    </div>

效果如圖：

整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

為了方便觀看，我們?nèi)サ鬱iv的width設(shè)置。同時在<div>中繼續(xù)添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    <div>
    <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
</div>

效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？

示例代碼如下：

<div style = "float:right;"><p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p></div>

我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設(shè)置為right（右）。

頁面效果如圖：

大家思考一下如何讓圖片與文字都靠在左邊呢？

是不是為圖片style添加float:left;同時把新<div>的float改為left？

我們試試看！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
</div>

頁面效果：

效果完全不對，圖片和文字跑到外邊來了。

這是div布局中經(jīng)常出現(xiàn)的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設(shè)置為"clear:both"即可修正。

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>

頁面效果如下：

值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設(shè)置為float：left，是沒有問題的，只有把它們放到<div>中才會出現(xiàn)上面的情況。

代碼如下：

<body>
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <p style = "float:left;">學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現(xiàn)上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！

現(xiàn)在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。

疫情期間，請大家少出門，不聚會，沒事在家學(xué)學(xué)網(wǎng)頁制作，即抗擊疫情又提高自己!

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：聊一聊java程序中的換行符，你用對了嗎
下一篇：網(wǎng)頁設(shè)計中全屏視頻背景的優(yōu)點、缺點和技巧

您的項目需求

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

整合營銷服務(wù)商

HTML&amp;amp;css面試題

.Doctype作用？標準模式與兼容模式各有什么區(qū)別

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

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

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

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

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

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

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

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

11.iframe有那些缺點？

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

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

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

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

17.常見兼容性問題？

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

問題：瀏覽器默認的margin和padding不同。

問題：IE6雙邊距bug:塊屬性標簽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 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,

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

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

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

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

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

22.CSS都有哪些選擇器？

基本原則：

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

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

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

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

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

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

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

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

DOM

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

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

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

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

3）查找

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

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

存儲

cookie

locationStorage 和 sessionStorage

其優(yōu)點有：

對WEB標準以及W3C的理解與認識

lt;div>塊元素基礎(chǔ)屬性講解

HTML完整學(xué)習(xí)目錄

您的項目需求

HTML&css面試題

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

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

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