前端學習筆記--html+css

HTML

window經常使用屬性與方法

window對象的經常使用屬性

• innerWidth/innerHeight:返回窗口的文檔顯示區的寬度/高度(無單位)
• outerWidth/outHeight:加上工具條和滾動條的寬度/高度
• self:返回當前窗口的引用
• top:返回最頂層的父窗口
• parent:返回父窗口
• location對象（包含當前url的信息）

//https://juejin.im/editor/drafts/5d54066b51882557c143c8af
location.host;  //juejin.im 主機名+端口號
location.hostname; //juejin.im 主機名
location.port;  //'' 端口號
location.pathname; //請求的路徑 /editor/drafts/5d54066b51882557c143c8af
location.href; //完整的URL //https://juejin.im/editor/drafts/5d54066b51882557c143c8af
location.protocol;//https: URL協議
location.search; //'' 返回URL的查詢部分 
複製代碼

• localStorage:建立一個本地存儲的鍵值對，沒有過時時間，除非手動刪除
• sessionStorage:建立一個本地存儲的鍵值對，保存當前會話/窗口的數據，關閉窗口以後會刪除數據

//localStorage
localStorage.setItem('name','kk');//存儲
localStorage.getItem('name'); //獲取

//sessionStorage
sessionStorage.setItem('lastname','smith');
sessionStorage.getItem('lastname');
複製代碼

window的經常使用方法

• window.alert()
• window.confirm() 彈出一個確認框
• window.close()
• window.open(uri, [name], [features]) 打開一個瀏覽器窗口，顯示指定的網頁。name 屬性值能夠是「_blank」、「_self」、「_parent」、「_top」、任意指定的一個窗口名。
• window.blur() 使當前窗口失去焦點
• window.focus() 使當前窗口得到焦點 windowd的屬性和方法

document經常使用屬性和方法

document經常使用的屬性

• document.body 獲取當前文檔的元素
• document.cookie 設置或返回與當前文檔有關的索引cookie
• document.title 返回當前文檔的標題

經常使用方法

• document.write() 向網頁寫入內容
• document.createElement(tag)
• document.body.appendChild(tag) 向HTML的body插入子標籤

src與href的區別

src：指向的是外部資源的位置，在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載編譯完（這就是爲何js腳本要放在底部而不是頭部）

href指向的是網絡資源所在位置，創建和當前文檔之間的聯繫，當瀏覽器解析到該元素時，會並行下載資源而且不會暫停對當前文檔的處理。這就是爲何建議用<link href='xx.css'>來加載css文件

src是引入插入，src的內容是頁面必不可少的部分

href是引用，是與該頁面有關聯

link標籤中的type、rel、href屬性

• href：指定引入文件的地址
• type：定義引入文件的類型，讓瀏覽器能使用合適的解析方式解析文件
• rel：定義連接的文件和HTML文檔的關係，stylesheet的意思就是樣式調用

css引入的兩種方式：<link>和@import

從屬關係的區別：

• @import是css的語法，只有導入樣式表的做用
• link是html提供的標籤，不只能夠加載css文件還能夠定義rss、rel鏈接屬性

加載順序的區別：

• @import引入的css會等到頁面加載完畢後再加載
• 加載頁面時，link引入的css會被同步加載

權重區別：

• link引入的樣式權重大於@import引入的樣式。

html中alt與title的區別

<img src='#' alt='無圖片' title='美圖' />
複製代碼

當顯示不出圖片時，會顯示alt信息，放上去會出現title信息。

當圖片正常顯示時，不會出現alt信息，鼠標放上去會出現title信息。

repaint與reflow

repaint是重繪，reflow是迴流

repaint是對某個元素進行重繪，reflow是對整個頁面進行重排，也就是頁面全部DOM元素從新渲染。

迴流必定會致使重繪，反過來不必定

從性能優化方面，reflow比repaint性能消耗大

---

觸發repaint：

• color的修改

觸發reflow（改變頁面佈局和幾何信息）

• 頁面開始渲染的時候
• width/height/border/padding/margin的修改
• 動畫，:hover等僞類引發的元素改動
• display：none/block
• background的修改
• resize頁面
• scroll頁面
• 讀取元素的屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))

瀏覽器渲染過程當中的迴流重繪

瀏覽器渲染過程：

• 解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
• 將DOM樹和CSSOM樹結合，生成渲染樹render tree
  • 遍歷DOM樹的每一個節點
  • 對於可見節點（display:none爲不可見節點，利用visibility和opacity隱藏的節點仍是會顯示在render樹上；不會渲染輸出的節點：script、meta、link），
  • 找到CSSOM樹中對應的樣式，組合生成render樹。
• 迴流：計算render樹的節點在頁面的位置和大小
• 重繪：將渲染樹上的每一個節點轉換爲屏幕上的實際像素。

減小回流和重繪

因爲瀏覽器有優化機制，瀏覽器會維護一個隊列，將引發迴流重繪的操做都放入這個隊列，等達到必定數量再清空隊列，進行一個批處理。這樣就會讓屢次的迴流、重繪變成一次迴流重繪。

可是獲取佈局信息時，會強制隊列刷新觸發迴流重繪來返回正確的值，好比訪問如下屬性：

offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollTop、scrollLfet、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect()
複製代碼

一、批量修改DOM

• 使元素脫離文檔流
  • 設置display：none
  • 將元素移動到文檔碎片documentFragment
  • 將元素拷貝到一個脫離文檔的節點
• 對其進行屢次樣式修改，cssText
• 將元素從新添加到文檔中

因爲有瀏覽器優化機制，因此上面的操做效果不受很明顯
複製代碼

二、避免觸發同步佈局事件

當咱們訪問元素的一些屬性時，會強制隊列刷新，進行強制同步佈局。好比：

function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}
複製代碼

在每次循環的時候，都讀取了box的一個offsetWidth屬性值。這就致使了每一次循環的時候，瀏覽器都必須先使上一次循環中的樣式更新操做生效，才能響應本次循環的樣式讀取操做。每一次循環都會強制瀏覽器刷新隊列。

能夠優化爲：

const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}
複製代碼

三、避開回流重繪，使用CSS3硬件加速

使用css3來硬件加速的原理是：新建合成層。

• 使用css3硬件加速，可讓transform、opacity、filters這些動畫不會引發迴流重繪
• 對於動畫的其它屬性，好比background-color這些，仍是會引發迴流重繪的，不過它仍是能夠提高這些動畫的性能。

html第一行的<!DOCTYPE>的做用

做用：定義文檔類型，告知瀏覽器解析器有什麼文檔標準解析這個文檔。

<!DOCTYPE>位於html文檔的第一行，處於全部標籤以前。

<!DOCTYPE>不屬於HTML標籤

<!DOCTYPE>不區分大小寫，沒有結束標籤

HTML5須要寫爲<!DOCTYPE html>。

當DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

行內元素 塊級元素 空元素

• 行內元素：a b span img input select(下拉列表) strong(強調的語氣)
• 塊級元素：h1-h4 p div ul ol li dl dt dd
• 空元素(即沒有內容的html元素)：img input hr br meta link(定義文檔與外部資源的關係，經常使用於連接樣式表文件)

meta標籤

meta標籤可分爲兩大部分，http-equiv和name

• http-equiv至關於http的文件頭做用，向瀏覽器傳送一些有用的消息，幫助瀏覽器正確顯示文件

<meta http-equiv='content-Type' content='text/html' charset='UTF-8'>

• name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

標註網頁的做者：<meta name='author' content='jack'>

頁面關鍵詞，用於被搜索引擎收錄 <meta name='description' content='新聞中心,包含有時政新聞、國內新聞、國際新聞'

meta標籤

base標籤

<base>爲頁面上全部相對連接規定默認URL或默認目標

• <base>必須定義在<head>內
• 必須有href和target屬性
• <base>沒有結束標籤
• <base>能夠排在<head>元素中第一個元素的位置，這樣head區域中其餘元素就可使用 元素中的信息了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<base href="//www.runoob.com//images/" target="_blank">
</head>
<body>

<p><img src="logo.png" > - 注意這裏咱們設置了圖片的相對地址。能正常顯示是由於咱們在
head 部分設置了 base 標籤，該標籤指定了頁面上全部連接的默認 URL，
因此該圖片的訪問地址爲 "http://www.runoob.com/images/logo.png"</p>

<p><a href="//www.runoob.com/">runoob.com</a> - 注意這個連接會在新窗口打開，即使它沒有 target="_blank" 屬性。
由於在 base 標籤裏咱們已經設置了 target 屬性的值爲 "_blank"。</p>

</body>
</html>
複製代碼

如下哪一個元素不具備有效的target屬性？

A、 area

B、 form

C、 base

D、 iframe

答案：D

html標籤

html5有哪些新特性？如何處理html5標籤的瀏覽器兼容問題？

html5主要是關於圖像、位置、存儲、多任務等功能的增長。

新特性：

• 繪畫 canvas (<canvas>標籤只是一個圖形容器，具體圖像需用js繪製)
• 媒體元素 <video> <audio>
• 表單控件類型 color date time email search url
• 存儲localStorage、sessionStorage
• 語義化更好的內容元素：如<article> <session> <header> <footer> <nav>
• 新的技術 webworker, websocket, Geolocation;

移除的元素：

• 純表現的元素：basefont，big，center，font, s，strike，tt，u;
• 對可用性產生負面影響的元素：frame，frameset，noframes；

如何支持html5新標籤

• IE6-8支持經過document.createElement方法產生標籤，能夠利用這一特性讓這些瀏覽器支持html5新標籤，但還需添加標籤默認的樣式

HTML的離線緩存

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。

原理：

HTML5的一個新特性：離線存儲，經過將須要離線存儲在本地的文件列在一個manifest配置文件中。

怎麼用？

在HTML文件的頭部加上manifest屬性，屬性值爲建立的.appcache文件

<!DOCTYPE HTML>
<html manifest='cache.manifest'> ... </html>
複製代碼

cache.manifest文件的書寫方式，就像下面這樣：

CACHE MANIFEST
#v0.11 //版本號，用於區分更新後的.manifest文件

CACHE:  
##在這下面寫須要離線緩存的資源文件，因爲包含manifest文件的頁面將自動離線存儲，因此不須要列出來
js/app.js
css/style.css

NETWORK:    
##在這下面列出只有在線狀況才能訪問的資源，他們不會被離線存儲。
##但若是在CACHE和NETWORK都有相同的資源，那這個資源仍是會被離線存儲，CACHE的優先級更高
resourse/logo.png

FALLBACK: 
##FALLBACK表示若是訪問第一個資源失敗，那就使用第二個資源來替換
/  /offline.html 
##這句的意思是當訪問根目錄下任何一個資源失敗了，那麼就去訪問offline.html。
複製代碼

瀏覽器怎麼解析manifest文件呢？

分兩種狀況

• 在線的狀況下，瀏覽器發現HTML頭部有manifest文件，就會請求manifest文件。此時若是是第一次訪問則沒有緩存過，那就會根據manifest文件的內容下載對應的資源並離線緩存。

  若是不是第一次訪問，且資源已經離線存儲，瀏覽器會先使用離線存儲的資源顯示頁面，而後瀏覽器再去比對新的manifest文件，若是文件沒有發生變化，則不作任何操做。若是發生變化，則會從新下載新的資源並存儲下來，等到下一次打開頁面才生效。

• 若是是離線狀況，瀏覽器就直接根據離線存儲的資源顯示頁面。
  資料

cookie、localStorage、sessionStorage的區別

cookie

• 由於HTTP是無狀態的，對事務沒有記憶能力。cookie是網站用來標識用戶身份的(好比存儲用戶信息)，存儲在本地的數據。
• 在第一次請求服務端時，服務端在響應報文頭添加set-cookie屬性，屬性值便是用戶的cookie值。瀏覽器在下次請求時會自動在請求報文頭加上Cookie屬性，屬性值即由服務端產生。
• cookie數據始終在同源的HTTP請求中攜帶(即便不須要)，在瀏覽器和服務端之間來回傳輸

storage

• sessionStorage和localStorage都是在本地保存，不會發送給服務端

共同點：

• 都是保存在客戶端，且同源的。

數據有效時間不一樣

• localStorage是永久性保存，除非手動刪除
• sessionStorage保存的數據在當前窗口關閉後自動刪除
• cookie數據在cookie設置的過時時間前一直有效，即便關閉窗口或瀏覽器

做用域不一樣：

• sessionStorage在不一樣的瀏覽器窗口不共享
• cookie和localStorage在全部同源窗口共享

iframe內嵌框架的缺點？

iframe通常用來包含別的網站的內容

• iframe會阻塞主頁面的onload事件
• 搜索引擎的檢索程序沒法解讀這種頁面
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載

label的做用

label標籤是用來定義表單控制間的關係，當點擊label標籤時，會自動將焦點轉到和標籤相關的表單控件(<input>)

##第一種寫法
<label>
    userName:<input type="text" name='userName'/>
</label>

##第二種寫法，使用for屬性來創建於表單的聯繫
<label for='name'>userName</label>
<input id='name' type="text" name='userName'/>
複製代碼

HTML5<input>的autocomplete屬性

有兩個屬性值，on和off。

autocomplete屬性規定表單輸入的字段是否開啓自動完成功能。 若開啓，當用戶在輸入時，瀏覽器會根據以前輸入過的值顯示出來。

autocomplete屬性適用於如下的<input>類型：text、search、url、tel、email、password、range、color、datepickers

event.target和event.currentTarget

• event.target返回觸發事件的元素

• event.currentTarget返回綁定事件的元素

事件委託

事件委託：將事件綁定在父元素上，利用事件的冒泡，從而父元素可以處理子元素的事件響應

好處：

• 減小事件的註冊，提升性能
• 經過事件委託添加的事件，對後來添加的子元素仍有效

mouseover和mouseenter的區別

• mouseover：會觸發事件冒泡，即不管鼠標指針穿過被選元素或子元素都會觸發，對應的事件是mouseout
• mouseenter：不會觸發事件冒泡，即只有當鼠標指針穿過被選元素纔會觸發，對應的事件是mouseleave

<button onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>click Me one</button>

<button onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>click Me two</button>
複製代碼

當被選元素沒有子元素時，兩個事件沒有區別

touch事件

• touchstart：當按下鼠標時（一次操做只會觸發一次）
• touchmove：當按下鼠標移動時不斷觸發（觸發屢次）
• touchend：當放開鼠標時觸發（觸發一次）
• touchcancel：當一些更高級別的事件發生時（好比電話接入或彈出信息）會取消當前的touch操做，通常會在ontouchcancel時暫停遊戲、存檔等操做。

哪些事件會觸發冒泡

• blur、load、unload、focus、mouseenter、mouseleave：不會

• click、focusin、focusout、input、keydown、keyup、mousedown、mouseup、mouseout、mouseover、scroll、wheel、select

WebSocket

因爲HTTP協議是一個請求-響應協議，因此就算HTTP協議是創建在TCP協議（全雙工）之上，這種請求-應答機制會限制了全雙工通訊。

因此html5新增了WebSocket協議—— 在單個TCP鏈接上進行全雙工通訊的協議，目的是在瀏覽器和服務器之間創建一個不受限的雙向通訊的通道--全雙工通訊，客戶端和服務端均可以主動向對方發送消息。

如何發起WebSocket鏈接

一、客戶端首先向服務器發送一個HTTP請求，幷包含一些附加頭信息：Connection：upgrade；Upgrade：WebSocket。代表這是一個申請協議升級的HTTP請求。

二、服務端解析這些附加頭信息以後產生應答信息返回給客戶端，而後WebSocket鏈接就創建起來了。

三、鏈接創建以後，雙方就能夠基於TCP鏈接互相交換數據，無需瀏覽器發送請求後，服務端響應後才返回數據。這個鏈接會持續到某一方主動關閉鏈接。

WebSocket的特色

一、沒有同源限制，客戶端能夠與任何服務器通訊。

二、數據格式輕量，性能開銷小，通訊高效。

三、創建在TCP協議之上

四、能夠發送文本、二進制文件

五、一次握手，創建全雙工通訊

如何實現瀏覽器內多個標籤頁之間的通訊？

一、WebSocket

二、localStorage

localStorage是多個同源標籤頁共享的存儲空間（sessionStorage是會話級的存儲空間，每一個標籤頁之間都是獨立的）

• 如何實現？

  當localStorage在另外一個頁面被添加、修改、刪除時會觸發storage事件，因此能夠在當前頁面監聽事件。

三、SharedWorker

被多個window共同使用，但必須保證這些標籤頁都是同源的(相同的協議，主機和端口號)
let worker = new SharedWorker('worker.js')
複製代碼

i和em、strong和b標籤的區別

• i表示斜體，em表示強調的文本（呈現的也是斜體）
• b是加粗，strong有增強語氣的含義（使用閱讀設備閱讀時，strong會重讀）

innerHTML,innertext,textContent區別：

let p=document.querySelector(".p");
console.log(p.innerHTML);	//我是p<span>我是span</span>
console.log(p.innerText);	//我是p
console.log(p.textContent);	//我是p我是span
複製代碼

innerHTML：返回調用元素的全部子節點（包括註釋、元素、文本節點）

innerText：返回調用元素的全部文本內容，包括子節點的文本，受樣式影響

textContent：返回調用元素的全部文本內容，忽略樣式，即便設爲不可見仍能獲取到

瀏覽器渲染的流程

• 解析html文件，生成DOM Tree，解析CSS文件，生成CSSOM Tree
• 將DOM Tree與CSSOM Tree結合，生成Render Tree
• 根據Render Tree渲染繪製，將像素渲染到屏幕上

綜上：

• DOM解析與CSS解析是並行的過程，所以CSS加載不會阻塞DOM樹的解析
• 因爲DOM的渲染是靠Render TREE，而Render Tree依賴於CSS Tree，因此CSS Tree會阻塞DOM樹的渲染
• 在CSS後的js會被CSS阻塞，CSS加載會阻塞後面js語句的執行

CSS

line-height不加單位

• 當使用font連寫時，必須寫font：font-size font-family
• line-height不加單位時，真實高度=font-size*數值，能夠寫成font:12px/1.5 Arial，表示line-height:1.5*12

line-height是能夠繼承的

visibility：hidden和display：none的區別

visibility：hidden 雖不可見但仍佔據空間。初次渲染頁面時會被渲染。

display：none 不可見也不佔據空間。不會被渲染。

盒子模型

CSS盒子模型具備內容（content）、填充（padding）、邊框（border）、邊界（margin）

一般咱們說的width、height指的是內容（content）的寬高，除了IE.

一個盒子模型的寬=width+padding寬+border寬

一個盒子模型的高=height+padding高+border高

對於IE:

width指的是：border+padding+內容的寬

一個盒子的寬度=width+左右margin

---

CSS中哪些屬性能夠繼承自父類

字體：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust

文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；

box-sizing經常使用的屬性，做用分別是什麼

經常使用的屬性：border-box、content-box、inherit

做用：

content-box（默認）：設定的寬高度分別是內容（content）區域的寬高，在內容區域外繪製padding和border

border-box：padding和border在已設定的寬高內進行繪製，內容（content）的寬高度等於寬高度減去padding和border的寬高

background-clip

定義背景從哪裏開始繪製

• background-clip：border-box（默認） 從border開始繪製
• background-clip：padding-box
• background-clip：content-box 從內容開始繪製

!important的優先級

• 比內聯樣式級別高

<style type="text/css">
.testClass{ 
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        測試Css中的Important    //顯示藍色
    </div>
</body>
複製代碼

• 設置兩個color，一個有!important，一個沒有

.testClass{ 
    color:blue !important;
    color:red;
}
#ie6下會顯示爲紅色
#其餘瀏覽器都顯示爲藍色
複製代碼

改爲如下形式則都顯示爲藍色

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}
複製代碼

• 父類設置!important，子類也設置了一樣的樣式，子類仍顯示爲子類的樣式

#parent{
    color: blue !important;
    color: red;
        }
.son{
    color: green;   //子類的字體顯示綠色
}
複製代碼

常見兼容性問題

• Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決
• IE下 event 對象有 event.x，event.y 屬性，而 Firefox 下沒有。Firefox 下有 event.pageX，event.PageY 屬性，而 IE 下沒有。 解決辦法：var mx = event.x?event.x:event.pageX;
• 瀏覽器默認的 margin 和 padding 不一樣。解決方案是加一個全局的 *{margin: 0; padding: 0;} 來統一
• 超連接訪問事後 hover 樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了，解決方法是改變 CSS 屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

flex佈局

採用flex佈局的元素稱爲flex容器，flex容器默認有兩根軸，分別是水平方向的主軸和垂直方向的交叉軸。子元素默認沿着主軸方向排列。

設置在容器上的屬性有：

• flex-direction：設置主軸的方向
• flex-wrap：設置子元素若是在一條軸線上排布不下是否換行
• justify-content：設置子元素在主軸上的對齊方式
• align-items：設置子元素在交叉軸上的對齊方式

設置在子元素上的屬性有：

• flex-grow：設置子元素的放大比例，在剩餘空間能分配到的比例
• flex-shink：設置子元素的縮曉比例
• flex-basic：表示在分配剩餘空間前，子元素在主軸上佔據的空間大小，默認是auto
• flex：是flex-grow flex-shink flex-basic的縮寫
• order：子元素的排列順序

何時須要清除浮動？有什麼方法？

一個塊級元素若是沒有設置高度height，那麼其高度就是由裏面的子元素撐起。若是子元素浮動，就會脫離標準文檔流，致使父元素沒有高度。若是不清除浮動，父元素會出現沒有高度，設置border和background都不能解析，並且後面的非浮動元素會被浮動元素所遮擋。

方法：

• 父元素div定義一個僞元素::after，父元素添加zoom：1屬性（兼容IE8如下不支持：after僞類）-- 推薦方法

  • 優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
  • 缺點：代碼量多

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動代碼*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} //是visibility不是display
   .clearfloat{zoom:1}
   
   </style> 
   
<div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">
   div2
</div>

複製代碼

• 在父元素的結尾處添加一個空div標籤，並清除浮動

  • 優勢：代碼量少，瀏覽器兼容性好
  • 缺點：若是頁面浮動的佈局多，就要添加不少空div

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動代碼*/
   .clearfloat{clear:both}
   
   </style> 
   
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
</div>
複製代碼

• 經過觸發BFC的方式，能夠實現清除浮動效果 (BFC)。能夠給父級添加： overflow爲 hidden|auto|scroll（則overflow不爲visible）。必須設置寬度或zoom：1，不能定義height

  • 優勢：簡單，代碼量少，瀏覽器支持好
  • 缺點：不能和position配合使用，由於超出的尺寸的會被隱藏

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
   
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>
複製代碼

• 父元素div定義高度

  • 缺點：只適合高度固定的佈局

• 父元素也一塊兒浮動

  • 缺點：會產生新的浮動問題

如何實現子元素在父元素裏水平/垂直/水平垂直居中

1、水平居中

1）行內元素：把行內元素包裹在一個屬性display：block的父層元素中，而且在父層元素添加以下屬性：

.parent{
    text-align:center;
}
複製代碼

2）塊級元素：

.item{
    margin: 10px auto;  //垂直方向能夠隨意設置
}
複製代碼

3）多個塊狀元素：使用flex佈局

.parent {
    display: flex;
    justify-content: center;
}
複製代碼

2、垂直居中

1）單行的行內元素：設置子元素的height和line-height和父元素同樣的高度

.parent {
    background: #222;
    height: 200px;
}

/* 如下代碼中，將 a 元素的 height 和 line-height 設置的和父元素同樣高度便可實現垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}
複製代碼

2）多行行內元素：在父容器設置display: table-cell 和 vertical-align: middle

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 如下屬性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}
複製代碼

3）已知高度的塊狀元素

.item{
    position:absolute;
    height:100px;
    top:50%;
    margin-top:-50px;   /*爲自身高度的一半*/
}
複製代碼

4）未知高度的塊狀元素

.item{
    position:absolute; /*子絕父相*/
    top:50%;
    transform:translateY(-50%);   /*爲自身高度的一半*/
}
複製代碼

3、水平垂直居中

1）flex佈局方案1

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意這裏須要設置高度來查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}
複製代碼

flex佈局方案2

.parent{
    background: #DD4A68;
    width: 200px;
    height: 200px;
    display: flex;
}
.son{
    width: 50px;
    height: 50px;
    background: #4b67af;
    margin: auto;
}
複製代碼

2）已知寬高度的解決方案1（不需計算）

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto; /*會根據父子盒子寬高度去計算*/
}
複製代碼

3）已知寬高度的解決方案2（需計算）

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;    /*相對父盒子的高度的50%*/
    left:50%;
    margin-top:-50px; /*自己高度的一半*/
    margin-left:-50px;
    
}
複製代碼

4）未知寬高度：使用CSS3的transform屬性

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.son{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*相對自己已有寬高度的50%移動*/
}
複製代碼

5）使用display：table-cell

.parent{
    width:300px;
    height:300px;
    position:table-cell;    //相似td/th
    text-align:center;      //水平居中
    vertical-align:middle;  //垂直居中
}
.son{
    width:100px;
    height:100px;
    display:incline-block;  //行內塊級
}
複製代碼

relative和absolute的區別

• relative屬於正常的文檔流，absolute脫離文檔流

• 定位原點relative是相對自己在文檔流中的位置偏移，本來佔據的空間仍然保留。

  absolute是相對最近的定位流父元素（除了static）的位置進行偏移

canvas和svg的區別

svg

• svg是一種使用xml描述2D圖形的語言
• svg可伸縮矢量圖形是基於可擴展標記xml，用xml格式定義圖形，所以是一種與圖像分辨率無關的矢量圖形格式。
• svg圖像在放大和縮小尺寸不會影響圖像的質量
• svg基於xml，意味着svg繪製出來的每一個圖形的元素都是獨立的DOM節點，能夠爲某個元素綁定事件
• svg是萬維網聯盟的標準
• 最適合帶有大型渲染區域的應用程序（好比谷歌地圖），不適合遊戲應用

<svg width="100%" height="100%"  >

        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />

    </svg>
複製代碼

canvas

• canvas經過JavaScript語言來繪製2D圖形，輸出標量畫布，就像一張圖片同樣，放大會失真
• 不支持事件處理器
• 可以以.jpg或.png格式保存結果圖像
• canvas是逐像素進行渲染的，依賴分辨率
• 在canvas中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那整個場景都須要從新繪製。

資料

px、em、rem的區別？

• px（像素）是相對長度單位。是相對顯示器屏幕分辨率而言
• em是相對長度單位。相對當前對象內文本的字體尺寸。（如當前對行內文本的字體尺寸未被人爲設置且父元素也沒有設置，則相對於瀏覽器的默認字體尺寸。）
• rem是相對根元素字體大小。

定義CSS的方式

一、外聯樣式/外部樣式表

二、內部樣式表（在head標籤裏定義style標籤）

三、行內樣式/內聯樣式（在html元素定義style屬性）

四、使用@import引入其餘css文件

使用CSS Sprite精靈圖/雪碧圖

• 利用CSS Sprite將多張圖片合成一張，能減小網頁的http請求，從而大大提供頁面的性能

僞類和僞元素的區別

• 僞類：用於選擇DOM樹以外的信息—— 包含那些匹配指定狀態的元素：visited，：hover，：active，：link。或是不能用簡單選擇器進行表示的信息，須要邏輯計算的—— ：first-child，：first-of-type，：target

• 僞元素：DOM樹上沒有定義的虛擬元素，不一樣於其餘選擇器，它不以元素爲最小選擇單元，它選擇的是元素指定內容—— ::before，::after，::selection（表示選擇元素被選中的內容）

注意

p：first-child表示選擇的元素既是p元素，又是其父元素的第一個子元素。

p:first-of-type表示選擇的元素既是p元素，也是其父元素的第一個子元素

新增僞類

CSS選擇器

一、id選擇器

二、類選擇器

三、標籤選擇器

四、兄弟選擇器（h1+p）

五、子選擇器（ul>li）

六、後代選擇器

七、通配符選擇器（*）

八、屬性選擇器

九、僞類、僞元素選擇器

優先級：!important>id>class>tag，!important優先級比內聯樣式高

CSS3新增選擇器

E: nth-child(n)：n必須是>0的數才能匹配到元素E，可是n是從0開始計算。n也能夠是關鍵詞odd（奇數）、even（偶數）

E：first-child, ：last-child

E：only-child：匹配父元素中只有這一個子元素E，即惟一子元素

E：empty：選擇沒有任何內容的元素E

##讓沒有任何內容的p隱藏
p:empty {
  display: none;
}
複製代碼

E：not(selection)：選擇除了selection以外的元素E

input:not[type='submit']{
     border:1px solid red;
     ##給表單中除submit按鈕以外的input加邊框
}
複製代碼

E[attr^='val']：選擇匹配元素E，屬性attr以val開頭

E[attr$='val']：以val結尾

E[attr*='val']：含義val

E：target：URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)，當點擊url後，被連接元素就會出現樣式

E:enabled，E:disabled：有些表單元素可用/不可用

E:checked：單選和複選按鈕都有選中和未選中狀態，checked表示選中狀態

E:read-only，E:read-write：指定可讀狀態的元素/非只可讀

E::before，E::after：生成的元素只存在於頁面中，不存在dom之中

:root：等同於根元素

可被繼承的屬性

color、font-size、font-family、ul、li、dl、dd、dt

flexbox 彈性盒佈局模型

flex-grow：是利用剩餘空間（若是有的話）進行計算分配

flex-shrink：若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。負值無效

flex-basic：屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

注意: 設爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效

用CSS建立一個三角形

只要邊框足夠大，並且盒子沒有寬高度，四個頂點就會很靠近—— 四角板，而後將其餘三條邊框的顏色設爲透明

四角板：

三角形：在上面的基礎上設置其中三條邊框的顏色透明

BFC

• Formatting Context：一個決定如何渲染文檔的容器，對於不一樣類型的box（類型由元素的類型和display決定），會參與不一樣的類型的Formatting Context

• Formatting Context可分爲：Block Formatting Context（BFC）、inline Formatting Context（IFC）

• BFC常常用於清除浮動、解決垂直方向margin重疊的問題

box的類型：

• block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；
• inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；
• run-in box: css3 中才有， 這兒先不講了。

BFC：塊級格式化上下文，是一個獨立的渲染區域/容器，只有block-level box參與。它規定了內部的block-level box如何佈局，而且不會影響外部的元素。

BFC佈局規則：

一、內部的box會以垂直方向分佈，由於是block-level box

二、內部box之間在垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰盒子的margin會發生重疊（則垂直方向的margin）

三、每一個子元素margin box的左邊與包含塊border box的左邊想接觸，即便存在浮動子元素，非浮動的元素就算處於浮動元素後面，也會貼緊包含塊的左邊。

四、BFC的區域不會與外部的float box重疊（可用來清除浮動）

五、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

六、計算BFC高度時，浮動子元素的高度也會參與計算

哪些元素會生成BFC：

• 根元素
• position：absolute或fixed
• float的值不爲none
• overflow不爲visible
• display爲inline-block, table-cell, table-caption, flex, inline-flex

BFC的應用

一、非浮動元素被浮動元素覆蓋

二、內部盒子浮動，父盒子高度塌陷的問題（脫離文檔的定位流元素也會致使父盒子高度塌陷，但不能經過BFC解決）

三、垂直方向上，相鄰盒子margin重疊的問題

有一個 div，裏面有兩個 div，一個高度 100px，如何讓另外一個填滿剩下的高度 ？

一、flex佈局

二、子絕父相，設置自適應的div爲絕對定位，top：100px；bottom：0；left：0，（父盒子須要設置高度）

三、使用calc()計算高度：height:calc(100%-100px)，計算父盒子剩下的高度

div標籤的特色

div標籤能自動填滿父元素的寬度，高度就只能由本身的子元素撐起

用 css 實現左側寬度自適應，右側固定寬度 ？

一、固定盒子右浮動，自適應盒子 overflow: hidden;建立一個BFC（切記浮動的元素要寫在非浮動元素的前面，這樣纔會在一行）

二、父容器width：100%；display：table；子容器都爲display：table-cell；給固定寬度的盒子設定width

三、固定寬度的盒子右浮動，自適應盒子設置margin-right=固定盒子的寬度，可是浮動元素的標籤必須寫在另外一個非浮動的前面（必須使用div標籤，由於div會自動填滿父標籤的寬度）

四、固定盒子右浮動，自適應盒子使用calc計算寬度，width：calc（100%-固定盒子寬度）

水平兩欄靠在一塊兒，實現左邊一欄的高度自適應右邊一欄的高度

• 兩欄都向一個方向浮動
• 給兩欄加一個包圍盒，並使之造成BFC
• 右邊的一欄的高度設爲想要的高度（若是沒有高度要求能夠不設，若是是div元素高度自動由內部元素撐起）
• 左邊自適應一欄設置padding-bottom:9999px; margin-bottom: -9999px;
• 寬度根據須要設置

.parent{
            overflow: hidden;   /*造成BFC，BFC的高度會計算浮動元素的高度*/
        }
        .son1{
            float: left;    /*兩欄都向左浮動，才能緊貼在一塊兒*/
            height: 100%;
            width: 200px;
            padding-bottom: 9999px; /*左邊一欄會變長*/
            margin-bottom: -9999px; /*將超過包圍盒container的長度剪掉*/
            background: #4b67af;
        }
        .son2{
            float: left;
            width: 100px;
            height: auto;   /*右邊一欄設置高度auto*/
            background: #DD4A68;
        }
        
<div class="parent">
    <div class="son1">鵝鵝鵝曲項向天歌</div>
    <div class="son2">牀前明月光，疑是地上霜，舉頭望明月，低頭思故鄉</div>
</div>        
複製代碼

文字超出長度時，如何實現用省略號代替？

設置width、overflow：hidden，white-space：nowrap（不換行），text-overflow：ellipsis

什麼是響應式設計？12個柵格是怎麼實現的？

響應式設計：一個網頁能兼容多個終端，而不是爲每一個終端都作一個特定的版本。

原理：經過媒體查詢檢測不一樣的設備屏幕尺寸作處理

頁面頭部必須有 meta 聲明的 viewport。

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
複製代碼

viewport：頁面的可視區域，手機瀏覽器一般把頁面放在一個虛擬的窗口viewport，這個虛擬的窗口通常比屏幕寬。上面即設置了頁面的可視區域和設備屏幕寬度同樣寬，初始縮放比例爲100%。 viewport

響應式佈局與自適應佈局的區別是什麼

• 響應式佈局：是根據屏幕的分辨率在客戶端對代碼進行處理，實現一個網站兼容不一樣終端
• 自適應佈局：是根據屏幕的分辨率到服務端請求不一樣的頁面，須要開發多套頁面

怎麼讓chrome支持小於12px的文字？

##若是想實現10px的字體
p{
    font-size:10px;
    transform:scale(0.8);   //縮放比例0.8
}
複製代碼

CSS Grid 網格佈局

5分鐘掌握