【萬字長文】史上最強css、html總結~看完漲薪再也不是夢

時間 2020-07-20

標籤萬字長文史上最強 css html 總結看完再也不是欄目 CSS 简体版

原文原文鏈接

HTML

什麼是前端？什麼是H5？

主要工做，作頁面。PC端的網站、移動APP、小遊戲、小程序css

H5是HTML語言的簡稱，是HTML語言的第五個版本html

能不能介紹一下web標準

web標準：結構標準表現標準行爲標準前端

W3C：萬維網聯盟,制定告終構和表現的標準
WHATWG:網頁超文本應用技術工做小組，以推進HTML5標準爲目的而成立的組織,在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。
ECMA:歐洲電腦廠商聯合會制定了行爲標準

什麼是html？

HTML 指的是超文本標記語言 (Hyper Text Markup Language)css3

XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）。「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。web

HTML5指的是HTML的第五次重大修改（第5個版本）canvas

XHTML和HTML的區別？

1.XHTML 元素必須被正確地嵌套。 XHTML是HTML的嚴格模式。小程序

2.XHTML 元素必須被關閉。瀏覽器

3.標籤名必須用小寫字母。緩存

4.XHTML 文檔必須擁有根元素。微信

DOCTYPE有什麼做用？

定義文檔類型，讓瀏覽器解析器知道應該用哪一個規範來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這並非一個 HTML 標籤。

標準模式（Standards mode）以瀏覽器支持的最高標準運行；混雜模式（Quirks mode）中頁面是一種比較寬鬆的向後兼容的方式顯示。

html標籤有哪些類型？

一共有三種類型，分別是：

塊級元素

特色：自上而下排列的，能夠設置寬和高，獨佔一行h1-h六、p、ul、li、ol、dl、dt、dd、form、 table。。。

行內（內聯）元素

特色：橫向排列的，不能設置寬和高，大小是由內容撐開的 span、font、b、strong、em、i、 a。。。

行內（內聯）塊元素

特色：橫向排列的，能夠設置寬和高 img、全部的input、select、textarea。。。

標籤語義化的優勢

HTML結構清晰
代碼可度性好
無障礙閱讀
搜索引擎可根據標籤的語言肯定上下文和權重問題
移動設備能更完美的展現頁面
便於團隊維護開發

h5新增語義化標籤

section：章節、頁眉、欄目。能夠與標題標籤結合使用
article：文章標籤
aside：廣告、側邊欄
header：頭部標籤
footer：頁腳標籤
nav：導航標籤
figure:插圖用的標籤,在figure下嵌套img標籤
video視頻

<video src="video/mov_bbb.mp4" controls="controls"></video> 
source能夠有多個，若是當前瀏覽器不支持此格式的視頻，有其餘的格式作備用 支持的視頻格式：mp四、ogg（ogv）、webm scr表示路徑 controls 播放控件 autoplay自動播放 loop循環播放 poster 視頻封面 muted 靜音  在實際的開發中，須要本身給設定樣式 複製代碼

audio音頻

<audio src="music/金志文 - 夏洛特煩惱.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> 
 屬性跟video差很少... 複製代碼

mark高亮顯示
canvas畫布
datalist數據集

datalist：提供一個事先定義好的列表，經過id與input關聯，當在input內輸入時，用戶將會看到一個下 拉列表供選擇 
<input list="sd"/> <datalist id="sd">  <option value="寶馬">寶馬</option>  <option value="奔馳">奔馳</option> </datalist> 複製代碼

五大瀏覽器內核

Trident(MSHTML)
Gecko
Presto
Webkit
Blink

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

WebSocket SharedWorker

也能夠調用 localstorge、cookies 等本地存儲方式。 localstorge 在另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。

注意：Safari 在無痕模式下設置 localstorge 值時會拋出QuotaExceededError 的異常

CSS

什麼是css?

css就是層疊樣式表，是web標準的表現標準語言，對網頁信息的顯示的控制層疊，對於樣式表來講就是優先級的問題，選擇器是權重大小

css樣式表類型有哪些？

內部樣式表

內部樣式表包含在 style 標籤內，一個 style 標籤就表示一個內部樣式表。

而經過標籤的 style 屬性定義的樣式屬性就不是樣式表。若是一個網頁文檔中包含多個 style 標籤，就表示該文檔包含了多個內部樣式表。

例如：

<style> 
 選擇器{屬性:屬性值;} </style>  複製代碼

外部樣式表

若是 CSS 樣式被放置在網頁文檔外部的文件中，則稱爲外部樣式表，實際上，外部樣式表也就是一個文本文件，擴展名爲.css。而後須要使用的時候，導入html文件便可。

例如：

<link rel="stylesheet" type="text/css" href=""/> 
<style>  @import url(); </style>  複製代碼

兩種引入方式的區別:

link是html的標籤,import是css提供的一種方式
link，頁面與樣式同時加載，而@import必須先加載頁面再加載樣式。
@import可能會有兼容性問題，而link標籤沒有這個問題
使用dom控制樣式時：link能被dom控制，而@import不能被dom控制

內聯樣式表

在標籤內部的style屬性裏面寫

樣式表的優先級

內聯樣式表的優先級最高，內部樣式表和外部樣式表的優先級和書寫的順序有關。後寫的會把前面的相同屬性覆蓋掉，其餘屬性依舊會繼承

css選擇器

標籤選擇器

經過html的標籤名進行選擇，例如：p{}

class選擇器

經過html中標籤的class屬性進行選擇，例如：

html:<div class="div1"></div> 
css: .div1{屬性:屬性值;屬性:屬性值}  class選擇器通常給css使用，id選擇器留給js使用. 標籤的一個class能夠取多個名  <div class="div1 big">這是猴子</div> 複製代碼

id選擇器

經過html中標籤的id屬性進行選擇，例如：

<div id="top"></div>  css: #top{屬性:屬性值;屬性:屬性值}  複製代碼

*通配符

選擇全部的標籤,通常用來清除內外邊距，重置樣式。

/*重置樣式*/ 
*{margin:0;padding:0;} a{text-decoration:none;} li{list-style:none;} 複製代碼

包含選擇器

選擇器之間用空格隔開。修改選擇器1下的全部選擇器2

選擇符1 選擇符2{屬性:屬性值;}

僞類選擇器:

a:link{屬性:屬性值;}超連接初始狀態
a:visited{屬性:屬性值;}超連接訪問後的狀態
a:hover{屬性:屬性值;}鼠標滑動到上面時的狀態
a:active{屬性:屬性值;}超連接被激活時的狀態，即鼠標點下左鍵時的狀態注意:僞類選擇器有瀏覽器緩存問題，點擊超連接a訪問事後，會緩存，須要清除歷史記錄，才能再看到超連接的初始狀態

僞類選擇器使用時須要按照上面的順序書寫，以避免發生錯誤。不要給其餘標籤使用除了hover之外的僞類選擇器

僞對象選擇器

僞對象選擇器有::after、::before、::first-letter、::first-line，僞對象選擇符也稱爲僞元素選擇器----可讓咱們把一個元素當作兩個來使用。

::after與content屬性一塊兒使用，定義在對象後的內容

div::after{content:url(logo.jpg);} 
div::after{content:"文本內容";} 複製代碼

::before與content屬性一塊兒使用，定義在對象前的內容

div::before{content:"放在前面的內容"}
複製代碼

::first-letter定義對象內第一個字符的樣式。（該僞元素只能用於塊級元素）
::first-line定義對象內第一行的樣式。該僞元素只能用於塊級元素。

ie6如下版本不支持僞對象選擇符

羣組選擇器

選擇器以逗號隔開，能夠同時選中多個，例如

//多個選擇器有相一樣式的時候，用羣組選擇器，合併爲一組
div,p,span{color:red;} 複製代碼

介紹一下css的權重

上面已經說過，css是層疊樣式表，有優先級。權重越大的樣式的優先級越高，css權重以四位數表示分別以下：

標籤選擇器的權重爲0001
class選擇器的權重爲0010
id選擇器的權重爲0100
僞類選擇器的權重爲0010
包含選擇器的權重爲包含選擇器的權重之和
內聯樣式的權重爲1000

css3新增選擇器

序列選擇器

1.序列選擇器(同級別)

:first-child 同級別第一個
:last-child 同級別最後一個
:nth-child(n) 同級別的第n個
:nth-last-child(n) 同級別倒數第n個
:only-child 父元素中惟一的一個標籤

2.同類型,能夠被隔開

:first-of-type 選中同級中同類型的第一個
:last-of-type選中同級中同類型的最後一個
:nth-of-type （n）選中同級中同類型的第n個
:nth-last-of-type(n) 選中同級中同類型的倒數第n個
:only-of-type 選中父元素中惟一類型的標籤
:not 否認選擇器同種元素只有自身不起做用，其它的都起做用。
:root 選擇文檔的根元素對根元素起做用

層次選擇器

後代選擇器（E F）最多見的選擇器沒有兼容問題*
子元素選擇器（E>F）選擇某元素的子元素 IE6不支持*
相鄰兄弟選擇器（E+F）緊跟在另外一元素後面的元素。不能被隔開*
通用兄弟選擇器（E~F）指定選擇器後面的全部選擇器選中的標籤。能夠被隔開。

屬性選擇器

E[attr] 只使用屬性名，但沒有肯定任何屬性值

input[name]{ 
 width: 200px;  height: 50px; } input[id]{  border: 1px solid red; } 複製代碼

E[attr="value"] 指定屬性名，並指定了該屬性的屬性值

input[type="text"]{ 
 border: 1px solid red; } input[type="tel"]{  border: 1px solid blue; } 複製代碼

E[attr^="value"] 指定屬性名，而且有屬性值，屬性值是以value開頭的；

a[href^="#"]{ 
 background-color: red; } 複製代碼

E[attr$="value"] 指定屬性名，而且有屬性值，並且屬性值是以value結束的；

a[title$="叫"]{ 
 background-color: orange; } 複製代碼

E[attr*="value"] 指定屬性名，而且有屬性值，並且屬值中包含了value；

a[href*="#"]{ 
 background-color: red; } 複製代碼

浮動

什麼是標準流（文檔流）？

就是網頁的正常排版順序 --- 元素排序方式根據元素類型來的

什麼是浮動流？

一個元素設置了float屬性，就會變成浮動流，不遵循標準流的規則

一個元素若是設置了浮動，再也不遵循標準流中的規則，它看起來就像從標準流中刪除了同樣，原先在標準流的中位置會發生改變

文本環繞現象

浮動的元素對標準流元素原本不佔位了，但文字卻不能到浮動的元素的位置，所以會出現文本環繞現象

浮動注意事項

兩個元素，第一個浮動了，第二個沒有浮動，這個時候，浮動的元素會把沒有浮動的元素給覆蓋
兩個元素，第一個沒有浮動，第二個浮動了，這個時候位置保持不變
兩個元素，都設置了浮動，若是寬度不夠的狀況下，第二個依舊會被擠到第二行去
文本環繞顯示，一個元素若是浮動了，另外一個元素沒有浮動，這個時候它裏面的文本會環繞浮動元素顯示

高度塌陷和元素重疊

高度塌陷就是若是沒有給父元素設置高度而但願父元素高度自適應的時候，若是給子元素設置了浮動，會發生高度塌陷。

在標準流中子元素能夠撐開容器的高度，可是浮動後，脫離了標準流，子元素撐不開容器的高度了，把這種現象叫高度塌陷。

高度塌陷會引發元素重疊。

清楚浮動

清除浮動:清除浮動的負面影響

注意點：並非只要設置了浮動就要必須清除，只有在發生高度塌陷和元素重疊時才須要清除

清除浮動的方法:

一、給父元素設置overflow:hidden

overflow:hidden本來意思是文本溢出隱藏,有清除浮動的功能

二、使用空元素（空盒子）的方法

在浮動的子元素的同級下增長一個空（div）的元素

這個空的元素不能有任何其餘樣式,再給空元素設置clear:both/left/right/none;

三、萬能清除法

定義一個類名,使用僞元素:after,並把類名賦給浮動元素的父級元素

.clear:after{
 display:block;  clear:both;  content:".";  visibility:hidden;  height:0; } .clear{  //兼容ie瀏覽器  zoom:1; } 複製代碼

盒模型

盒模型是css佈局的基石，決定了網頁元素如何顯示以及元素相互之間的關係,盒模型是一種形象的稱呼，在css裏面規定了全部的標籤都有一個盒模型。

盒模型組成：margin（邊界、外邊距）、padding（內邊距、填充、補白）、border（邊框）、 content（內容---width和height）

盒模型有如下兩種:

w3c標準盒模型

盒模型的寬度 = 左右margin + 左右padding + 左右border + width（內容）

IE怪異盒模型

盒模型的寬度 = 左右margin + width（內容）--- 包含了padding和border

區別：

標準盒模型和怪異盒模型的區別在於計算方式的不一樣,怪異盒模型的寬度在計算時包含了padding和border

設置怪異盒模型的方法: 在css3裏面提供了一個屬性，能夠把標準盒模型轉成怪異盒模型使用

box-sizing:border-box(把標準盒模型轉成怪異盒模型)/content-box;(標準盒模型--默認值)

若是但願所有轉成怪異盒模型，在*裏面設置box-sizing:border-box;

單行省略號顯示

省略號顯示:text-overflow:clip/ellipsis 不顯示省略號/顯示省略號標記。

單行省略號顯示的條件：

定義一個寬度width
強制不換行nowrap
文本溢出隱藏
省略號顯示text-overflow:ellipsis;

.test{
 width:200px;  white-space:nowrap;  overflow: hidden;  text-overflow: ellipsis; } 複製代碼

多行省略號顯示

WebKit瀏覽器或移動端的頁面

在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，能夠直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性:

display: -webkit-box; 必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示。
-webkit-box-orient 必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。
text-overflow: ellipsis;，能夠用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本。

例子：

overflow : hidden;
text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 複製代碼

跨瀏覽器兼容的方案

比較靠譜簡單的作法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；

例如：

p {
 position:relative;  line-height:1.4em;  /* 3 times the line-height to show 3 lines */  height:4.2em;  overflow:hidden; } p::after {  content:"...";  font-weight:bold;  position:absolute;  bottom:0;  right:0;  padding:0 20px 1px 45px;  background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y; } 複製代碼

注意：

height高度正好是line-height的3倍
結束的省略好用了半透明的png作了減淡的效果，或者設置背景顏色
IE6-7不顯示content內容，因此要兼容IE6-7能夠是在內容中加入一個標籤，好比用span標籤去模擬
要支持IE8，須要將::after替換成:after

JavaScript 方案

用js也能夠根據上面的思路去模擬，實現也很簡單

定位

position定位介紹

語法：position：static（默認值-靜態定位） /absolute（絕對定位）/relative（相對定位）/fixed（固定定位），其也是爲了解決佈局問題。

所謂的定位其實就是讓元素的位置進行移動，給元素設置了position屬性後，元素就變成了定位流。

定位屬性，必須配合其餘值來使用，left、right、top、bottom。

定位元素有參照物。

相對定位

特色：

相對定位是相對於本身之前在標準流中的位置進行定位的（注意點：相對定位是半脫落狀態）
不脫落文檔流（標準流）的，佔位置（空間）
區分元素類型的（區分是塊級元素、內聯元素、行內塊元素）,元素之前是什麼類型，設置了相對定位後仍是什麼類型
對元素進行微調，主要的做用是配合絕對定位來使用

絕對定位

特色：

脫離文檔流的，不佔位置的
不區分元素類型
絕對定位是相對於父元素進行定位的，若是父元素不是定位流，元素會往上查找有定位流的元素，找到最上級仍是沒有定位流，會相對於body進行定位（相對於祖先元素進行定位的）

固定定位

特色：

脫落文檔流的，不佔空間
不區分元素類型
相對於body進行定位的
不會隨着滾動條的滾動而滾動
能夠相互之間重疊

粘性定位

position: sticky; 粘性定位

粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。

元素垂直居中的方法

定位，父相子絕

父元素相對定位

子元素絕對定位

子元素left,right,top,bottom=0

子元素margin:auto;

利用css3的transform屬性

示例：

html

<div class="transform"><img src="favicon.ico" /></div>
複製代碼

css

.transform {
 width: 300px;  height: 300px;  text-align: center;  line-height: 300px;  background: #90EE90;  margin: 0 auto;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); }  .transform img {  width: 50px;  height: 50px;  vertical-align: middle; } 複製代碼

Flex垂直水平居中

css示例:

.flex{
 font-size: 25px;  height: 200px;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center; } 複製代碼

利用display:table-cell屬性使內容垂直居中

css示例:

.table-cell {
 display: table-cell;  vertical-align: middle;  text-align: center;  width: 120px;  height: 120px;  background: purple; } 複製代碼

什麼是BFC？

BFC全稱Block Formatting Context ，中文直譯爲塊級格式上下文。它是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

特色：

在BFC下，內部的Box會在垂直方向，一個接一個地放置
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器（父元素）的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣），即便存在浮動也是如此
BFC的區域不會與float box重疊。例子：兩個div，一個進行浮動，一個不浮動，這時浮動的元素會覆蓋沒有浮動的元素。給沒有浮動的元素加overflow:hidden。就不會重合
計算BFC的高度時，浮動元素也參與計算

如何觸發BFC: