html+css 核心知識總結

時間 2019-12-06

標籤 html+css html css 核心知識總結欄目 CSS 简体版

原文原文鏈接

Html

1.解釋

2.語義化的理解

**what?**
    根據內容的結構（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
**why?**
    爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
    用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
    有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
    方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
    便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
**how?**
    儘量少的使用無語義的標籤div和span；
    在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
    不要使用純樣式標籤，如：b、font、u等，改用css設置。
    須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
    使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
    表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
    每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

3.Iframe的優缺點，如何用

iframe的優勢：
 iframe可以原封不動的把嵌入的網頁展示出來。
 若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的更改，方便快捷。
 網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長代碼的可重用。
 若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。
 重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁(減小了數據的傳輸，增長了網頁下載速度)html

iframe的缺點
 一、頁面樣式調試麻煩，出現多個滾動條；
 二、瀏覽器的後退按鈕失效；
 三、過多會增長服務器的HTTP請求；
 四、小型的移動設備沒法徹底顯示框架；
 五、產生多個頁面，不易管理；
 六、不容易打印；
 七、代碼複雜，沒法被一些搜索引擎解讀。
 八、iframe會阻塞主頁面的Onload事件；前端

4.談談對Label的理解

 功能：表示Label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。
 用法：<label for="InputBox">姓名</label><input id="InputBox" type="text">html5

CSS

5.談談對css選擇符的理解

選擇符有9種web

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 ;算法

優先級
相同的樣式優先級就近原則，樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級算法是權重計算法，id=100，class=10 ,標籤是1
通常而言chrome

!important >  id > class > tag  
   important 比 內聯優先級高

6.對css元素的理解

種類
塊元素:block：p,ul,li ,dl,ol,dt,h1~h6,hr,div,pre,table. form , fieldset
內聯元素:inline： a、span、img、input、label、select、strong、textarea br, code, sup, sub；
知名的空元素：
bootstrap

<img> <input> <link> <meta>
區別
塊元素：能容納塊和內聯等其餘元素，不能與其餘元素同行，對於寬高起做用.（即能設寬高，獨佔一行）
內聯元素：只能容納文本和內聯元素，允許其餘內聯元素與其同行，寬高對其不起做用。 inline不響應垂直margin,和padding（有但請避免）, width, height, max/min width/height 等屬性聲明。
空元素，主要講下input 可算內聯元素，由於可與其餘元素同行，且寬高對其起做用。

提示：對內聯元素寬高起做用，請使用display:inline-block後端

7.談談對定位的理解

absolute 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。 
fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對於其正常位置進行定位。
static  默認值。沒有定位，元素出如今正常的流中  （忽略 top, bottom, left, right z-index 聲明）

談談對盒模型的理解

盒模型是有兩種標準的，一個是標準模型w3c，一個是IE模型。

標準盒子的寬等於 width+margin +padding+border；width就是內容的寬高
IE的盒模型：width=內容(content)+填充(padding)+邊框(border)的總寬高）瀏覽器

css如何設置兩種模型：box-sizing:content-box; border-box;
注意事項：input、button元素默認border-box ，仍是基於傳統的ie 盒子模型。但文檔類型是標準模式，則全部元素都是w3c盒模型

9.邊距重疊與BFC：

邊距重疊的問題：
父元素沒有設置margin-top，而子元素設置了margin-top：20px;能夠看出，父元素也一塊兒有了邊距
相鄰的上下元素margin-top和margin-bottom也會重疊

邊距重疊/外邊距合併的注意事項：
外邊距合併只出如今塊級元素上；
　浮動元素不會和相鄰的元素產生外邊距合併；
　絕對定位元素不會和相鄰的元素產生外邊距合併；
　內聯塊級元素間不會產生外邊距合併；
　根元素間不會不會產生外邊距合併（如html與body間）；
　設置了屬性overflow且值不爲visible的塊級元素不會與它的子元素髮生外邊距合併

邊距重疊的解決方案（BFC）

float屬性不爲none（脫離文檔流）
position爲absolute或fixed
display爲inline-block,table-cell,table-caption,flex,inine-flex
overflow不爲visible
根元素

BFC的適用場景
 自適應兩欄佈局
 清除內部浮動
 防止垂直margin重疊

10.對浮動的理解

工做原理：
 對塊元素設置浮動屬性後，它就脫離了當前的文檔流佈局的方式，漂浮到他的父級元素的左邊或者右邊。若是想讓多個塊顯示在同一行中，能夠將這些塊都設置成浮動，而且浮動方向相同。

爲何要清除浮動
浮動的缺點：
1.當元素有默認屬性，且每一個瀏覽器默認屬性值不一樣，而編寫者不清楚具體是多少及多大事，會對父元素（如對父元素的background屬性，margin屬性有影響）和後面元素產生影響，形成佈局錯亂。
2.浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示。
故需對父元素使用Clear，進行清除浮動

清除浮動的3種辦法：
1.添加一個附加層，：#haa{display：block;clear:both;height:20px;}
2.給父元素添加overflow：hidden;屬性。可是IE6不支持，還需給父元素添加zoom:1屬性。
3.利用僞類after的方法
例： .cf:after{content:" "；height:0； display:block； clear:both；line-height:0; Visibility:hidden；} .cf{zoom:1} /IE6不支持經過clear:both和行高爲0的方式清除浮動，需增長zoom:1/
注意：使用時：浮動佈局的時候，在ie6環境中會出現雙倍邊距的bug（即元素浮動方向和邊距方向一致的時候邊距會是原來的兩倍。）解決的辦法是給元素添加display:inline;屬性。

11.爲什麼初始化css樣式表

 方法1、reset.css可以重置瀏覽器的默認屬性。不一樣的瀏覽器具備不一樣的樣式，重置可以使其統一。好比說ie瀏覽器和FF瀏覽器下button顯示不一樣，經過reset可以統同樣式，顯示相同的效果。可是不少reset是不必的，多寫了會增長瀏覽器在渲染頁面的負擔。
 方法2、 normalize.css是一個能夠定製的css文件，它讓不一樣的瀏覽器在渲染元素時形式更統一。

12.CSS sprite vs 字體圖標

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

13.實現水平和垂直居中的方式

實現div的水平居中和垂直居中
1.適用: 寬高已定
設置position: absolute(父元素記得設置: relative), 而後top和left設置50%, 50%, 再設置margin-left=寬/2, margin-top:寬/2
2.只適用: 固定寬高; 若是寬高隨意,想靠內部撐開的話, 會佔滿整個父div
依然是利用position：子div的上下左右都設置成0，而後margin設置auto。關鍵是要設置position：子absolute，父relative。
3.適用: 不管是否固定寬高均可用. 問題在於兼容性. ie9及如下不支持
設置父級flex屬性: display:flex; justify-content:center; align-items: center;
4.適用: 要設寬度, 不然會使得寬度爲父級div的寬度
父級元素設置display:table-cell ，而後vertical-align：middle。這種方法能夠設置垂直居中. 這時候只要在子元素裏設置margin:auto便可實現水平居中
可是這種方法好像會使父元素的居中無效。
5.適用: 可不指定寬高
使用transform居中. 設置父級position:relative; 子級position:absolute. 而後top: 50%; left:50%; transform:translate(-50%,-50%)
6.適用: 指定寬高百分比
保證left和right的百分數同樣就能夠實現水平居中，保證top和bottom的百分數同樣就能夠實現垂直居中。可是這種方法不能由內部元素自動調節div的寬高，而是經過父元素大小控制的
7.使用display:inline-block加僞元素
box 容器經過 after或者before 生成一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對於「備胎」垂直居中，在視覺上表現出來也就是相對於容器垂直居中了
8.多元素水平居中

1) 把子級div設置成display:inline-block; 而後父級div設置text-align:center;
2) 更方便靈活的作法仍是使用flex-box, 設置水平居中 justify-content: center

9.使用柵格化佈局
10.使用flex

14.CSS3新特性：

 新增各類CSS選擇器 (: not(.input): 全部class不是「input」的節點）
 圓角border-radiuis
 多列布局：multi-column layout
 陰影和反射： multi-column layout
 文字特效：text-shadow
 線性漸變： gradient
 旋轉：transform
 縮放，定位，傾斜，動畫，多背景：transform: scale(0.85,0.90) translate(0px, -30px) skew(-9deg, 0deg) Animation

15.對css的優化有哪些（壓縮合併圖片規範）

 題目中好像已經寫了答案了。詳情參考後面的前端優化

16.常見問題與解決方法

1.如何清除圖片下方出現幾像素的空白間隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：.test{font-size:0;line-height:0;}
.test爲img的父元素

2.如何使頁面文本行距始終保持爲n倍字體大小的基調？
方法：body{line-height:n;}

3.如何容器透明，內容不透明？
方法1：容器層與內容層並級，容器層設置透明度，內容層經過負margin或者position絕對定位等方式覆蓋到容器層上
方法2 :正常的子父容器法，對附容器用background:rgba(0,0,0,0.3);

ps:透明度的問題：filter:alpha(opacity=20) opacity:0.2

4.如何使文本溢出邊界顯示爲省略號？
.test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

5.如何使連續的長字符串自動換行？
.test{width:150px;word-wrap:break-word;}

6.使文本溢出邊界不換行強制在一行內顯示？
.test{width:150px;white-space:nowrap;}

7.去掉chrome 登陸頁中記住密碼後，輸入框的黃色背景
回答: input:-webkit-autofill{ background-color:#fff !important; -webkit-box-shadow:0 0 0 40px #fff inset; }

8.分頁不能正常跳轉至對應的頁面：
回答: form表單中增長 return false

9.對錶格table的td明明設置了width，爲什麼不起做用？
方法: 可能你的表格被設置了：table-layout:fixed; 去掉此屬性便可

10.audio標籤在chrome下支持ogg mp3 wav的模式，但在ie11下僅支持mp3格式；但有的ie11 啥都不行，不知道爲什麼。。。

高階

1.對less 和sass的理解

定義：Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。
優勢：
寫的更快，變量和函數的功能：方便製做主題，利於維護，便於擴充。（換膚）
區別？

2.實現一個柵格系統

Bootstrap響應式佈局是利用其柵格系統，對於不一樣的屏幕採用不一樣的類屬性

1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便爲其賦予合適的排列（aligment）和內補（padding）。
2.經過行（row）在水平方向建立一組列（column）。
3.本身內容應當放置於列（column）內，而且，只有列能夠做爲行（row）的直接子元素。
4.相似.row和.col-xs-4這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap源碼中定義的mixin也能夠用來建立語義化佈局。
5.經過爲列設置padding屬性，從而建立列與列之間的間隔（gutter）。經過爲.row元素設置負值margin從而抵消爲.container元素設置的padding，也就間接爲行（row）所包含的列（column）抵消掉了padding。
6.柵格系統的列是經過指定1到12的值來表示其跨越範圍。例如三個等寬的列可使用三個.col-xs-4來建立。
7.若是一行（row）中包含了的列（column）大於12，多餘的列所在的元素將做爲一個總體另起一行排列。
8.柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕覆蓋柵格類。
以下圖所示爲柵格系統在多種屏幕上的應用說明。

詳情請見 bootstrap官網：https://v3.bootcss.com/css/#grid

3.談下flex

Flex 佈局教程：語法篇阮一峯
http://www.ruanyifeng.com/blo...^%$

4.px em rem pt vw vh的區別

px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。 IE沒法調整那些使用px做爲單位的字體大小；
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。 em會繼承父級元素的字體大小。
rem 是相對單位，相對的是html根元素是字體的單位
pt ：印刷業上常使用的單位，磅的意思，通常用於頁面打印排版。
關係：任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。pt=px3/4
用法：對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可。
vw相對於視口的寬度。視口被均分爲100單位的vw 算比例的時候，不用去算父元素而後一級一級的百分比下來
vh相對於視口的高度。視口被均分爲100單位的vh
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。

5.漸進加強和優雅降級

漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

FOUC（無樣式內容閃爍）

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。

7.瀏覽器的渲染過程

渲染引擎處理網頁，一般分紅四個階段。

解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

1.解析代碼：HTML代碼解析爲DOM，CSS代碼解析爲CSSOM（CSS Object Model）
2.對象合成：將DOM和CSSOM合成一棵渲染樹（render tree）
3.佈局：計算出渲染樹的佈局（layout），以計算每一個節點的幾何信息
4.繪製：將各個節點繪製到屏幕上。（即遍歷render樹，並使用UI後端層繪製每一個節點。）

值得注意的是，這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

![圖片上傳中...]

前端必讀：瀏覽器內部工做原理
*正常的網頁加載流程是這樣的。

網頁，一邊開始解析
解析過程當中，發現<script>標籤
暫停解析，網頁渲染的控制權轉交給JavaScript引擎
若是<script>標籤引用了外部腳本，就下載該腳本，不然就直接執行
執行完畢，控制權交還渲染引擎，恢復往下解析HTML網頁

CSS 不會阻塞 HTML 的解析，但會阻塞渲染，
CSS 的解析會阻塞腳本的執行，
腳本也會阻塞 HTML 的解析。

8.重構、迴流

瀏覽器的重構 又名重繪重構。指的是改變每一個元素外觀時所觸發的瀏覽器行爲，好比顏色，背景等樣式發生了改變而進行的從新構造新外觀的過程。重構不會引起頁面的從新佈局，不必定伴隨着迴流。
迴流是mozilla 的Geoko渲染引擎中的術語 ,在webkit中稱爲‘佈局’.都是對元素定位。
又名重棑指的是瀏覽器爲了從新渲染頁面的須要而進行的從新計算元素的幾何大小和位置的，他的開銷是很是大的，迴流能夠理解爲渲染樹須要從新進行計算，通常最好觸發元素的重構，避免元素的迴流；好比經過經過添加類來添加css樣式，而不是直接在DOM上設置，當須要操做某一塊元素時候，最好使其脫離文檔流，這樣就不會引發迴流了，好比設置position：absolute或者fixed，或者display：none，等操做結束後在顯示。