作者：櫻桃小丸子兒

鏈接：https://www.jianshu.com/p/abadcc84e2a4

HTML&CSS

img的alt和title的異同？

**alt **是圖片加載失敗時，顯示在網頁上的替代文字；

**title **是鼠標放上面時顯示的文字,title是對圖片的描述與進一步說明;

這些都是表面上的區別，alt是img必要的屬性，而title不是。

對于網站seo優化來說，title與alt還有最重要的一點：

搜索引擎對圖片意思的判斷，主要靠alt屬性。所以在圖片alt屬性中以簡要文字說明，同時包含關鍵詞，也是頁面優化的一部分。條件允許的話，可以在title屬性里，進一步對圖片說明。

簡述一下src與href的區別

href 是指向網絡資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

html5新元素？

HTML5 中一些有趣的新特性：

①用于繪畫的 canvas 元素；

②用于媒介回放的 video 和 audio 元素；

③對本地離線存儲的更好的支持；

④新的特殊內容元素，比如 article、footer、header、nav、section；

⑤新的表單控件，比如 calendar、date、time、email、url、search"

以上是w3c上的原話，簡單說就是更符合標準，提供更多功能支持；更加規范，可讀性更強，性能有提升，實現功能更加簡單方便，就像手機一樣，高版本的功能多一些。

更詳細請看html5新元素

CSS層疊是什么？介紹一下

CSS就是層疊式樣式表(Cascading Style Sheets)的簡稱,CSS中層疊的意思就是在HTML文檔樹結構中的子標記能夠繼承所有父標記定義的樣式，還可以多次定義自己的樣式，全部樣式按照從外到內、由先到后的順序疊加起來，如果不發生沖突，則全部樣式都有效，重復定義沖突時按照內層優先、后定義優先的原則進行覆蓋，即內層子元素覆蓋父元素樣式、后定義的覆蓋先定義的樣式。

CSS實現垂直和水平居中

這是一道經典的問題，實現方法也有很多種，以下是其中一種實現：

具體方案說明：

①使用絕對定位left:50%與margin-left取寬度值一半的復數形式設置水平居中。

②使用絕對定位top:50%與margin-top取高度值一半的復數形式設置垂直居中

HTML結構：

CSS代碼：

.box1 { position: relative; width: 600px; height: 600px; background-color: red; } .content{ background-color:pink; width:200px; height:200px; position: absolute; //父元素相對定位,使子元素相對父元素定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }

什么是CSS Hack?

針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。

詳情請看以下鏈接

CSS hack大全&詳解(什么是CSS hack)

你知道哪些CSS瀏覽器兼容性問題。

CSS 多瀏覽器兼容性問題及解決方案

px和em的區別

px和em都是長度單位，區別是，px的值是固定的，是絕對單位，類似的還有pt(磅，1pt=1/72英寸)、pc(皮卡，1pc=12pt)、mm(毫米)、cm(厘米)、in(英寸)絕對單位指定是多少就是多少，計算比較容易。

em的值不是固定的，它是相對單位，em是指當前默認字號大小(繼承父元素默認字號)的倍數，可根據父元素字號的改變而自動調整。例如2em是當前字號的2倍，若父元素或默認字號為12pt,則2em就是24pt。類似的還有ex,ex是當前字號高度值(通常是字體尺寸一半)的倍數。

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

HTML5離線存儲

localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage 數據在瀏覽器關閉后自動刪除。

說說你對語義化的理解

①去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構；

②有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

③方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁；

④便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

描述一段語義的HTML代碼

(HTML5中新增加的很多標簽(如：、、和等)就是基于語義化設計原則)

< div id="header"> < h1>標題< /h1> < h2>專注Web前端技術< /h2> < /div>

如何居中div？

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

div{width:200px; margin:0 auto; }

列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

①

block 像塊類型元素一樣顯示。

none 缺省值。像行內元素類型一樣顯示。

inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。

**list-item **像塊類型元素一樣顯示，并添加樣式列表標記。

②

absolute

absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位，若父元素都沒有定位則相對于html的根元素(瀏覽器窗口)定位。

fixed

fixed (老IE不支持)生成絕對定位的元素，相對于瀏覽器窗口進行定位。

relative

relative生成相對定位的元素，相對于其原來所在的文檔流中的位置進行定位。

static

static 默認值。沒有定位，元素出現在正常的流中 (忽略 top, bottom, left, right z-index 聲明)

對BFC規范的理解

BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向(和布局方向有關系)的margin會發生折疊。

(W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。)

描述CSS Reset的作用和用途。

Reset重置瀏覽器的css默認屬性瀏覽器的品種不同，樣式不同，然后重置，讓他們統一。

最簡化的CSS Reset

*{outline:0;padding:0;margin:0;border:0;}

CSS定義的權重

CSS有自己的優先級計算公式，而不僅僅是行間>內部>外部樣式；ID>class>元素。

理解選擇器的特殊性很重要，特別是在修復bug的時候，但是要盡量避免使用。

CSS選擇器的權重與優先規則

CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什么?

在CSS中關于定位的內容是：position:relative | absolute | static | fixed

? static 自動定位，自動定位就是元素在頁面普通文檔流中由HTML自動定位，普通文檔里中的元素也稱為流動元素。不能通過z-index進行層次分級。

? relative 相對定位，相對定位不脫離文檔流，參考其在原來文檔流中的位置，通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。

? absolute 絕對定位，絕對定位脫離文檔流，依據最近的已經定位(絕對、相對或固定定位)的父元素，通過 top,bottom,left,right 定位。當父級 position 為 static 時，absolute元素將依據body根元素(瀏覽器窗口)進行定位，可以通過z-index進行層次分級。

? fixed 固定定位，固定定位與父元素無關(無論父元素是否定位)，直接根據瀏覽器窗口定位，且不隨滾動條拖動頁面而滾動，可通過z-index進行層次分級。

CSS中margin和padding的區別

margin是外邊距，屬于元素之外，相鄰元素的margin可以融合。

padding是內邊距，在元素之內，相鄰元素的padding不可融合。

總結

以上是生活随笔為你收集整理的html权重值_史上最全的web前端面试题汇总及答案HtmlCss（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。