網頁知識點

時間 2019-12-02

標籤網頁知識欄目 HTML 简体版

原文原文鏈接

HTMLcss

1、每一個HTML文件裏開頭都有個很重要的東西：Doctype,知道這是幹什麼的嗎？html

<!DOCTYPE>位於HTML第一行，在<html>標籤以前，用來告訴瀏覽器用什麼文檔標準解析這個文檔，標準模式仍是兼容模式，該標籤不存在或不正確都會致使文檔按兼容模式解析html5

標準模式：排版樣式和js運行模式都是按該瀏覽器支持的最高標準運行。web

兼容模式：頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器，防止站點沒法工做。算法

2、HTML4 和 HTML5 有哪些不一樣, 新增的有哪些? 移除了哪些元素？chrome

不一樣：HTML4是基於SGML的子集，須要在DOCTYPE裏設置DTD，而HTML5不是SGML的子集，只須要寫<!DOCTYPE>編程

新增：語義化元素: article、section、nav、header、footer、figure等bootstrap

其餘元素：video、audio、canvascanvas

本地存儲：localStorage、sessionStorag瀏覽器

表單空間：time、email、search、number等

新技術：webworker、websocket、geolocation地理定位

移除：純表現的元素：basefont、big、center、font、s、strike、tt、u

對可用性產生負面影響：frame、frameset、noframe

3、如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5?

要支持HTML5標籤，IE9如下在script裏寫 document.createElement(「header」) 同時css設置 header{display:block}，也能夠直接用框架，如html5shim

區分HTML和HTML5：DOCTYPE聲明、新增的結構元素和功能元素

4、SGML和DTD

SGML —通用標準置標語言，是定義電子文檔結構和描述其內容的國際標準語言

DTD — 文檔類型定義，可定義合法的標準通用標記語言，可擴展標記語言文檔構建模塊

5、HTML5 如何讓一個div 旋轉?

Transform：rotate（30deg）

6、你作的頁面在哪些瀏覽器試過？這些瀏覽器的內核分別是什麼？

Trident：IE、搜狗、360等

Gecko:Firefox

Presto：opera7以上

Webkit：Safari和chorme

Blink：chorme

7、行內元素有哪些？塊級元素有哪些？說下行內元素和塊級元素的區別？

行內元素：a、b、span、i、em、strong、input等

塊級元素：div、ul、ol 、li、p、form、h1-h6等

空元素：br、hr、meta、img等

8、從輸入網址到顯示網頁的過程發生了什麼？

簡化版：

1.瀏覽器開啓一個線程處理這個請求，將請求的URL交給域名解析系統DNS，找到對應的IP，像服務器發起請求。

2.服務器交給後臺處理，完成後發揮數據，瀏覽器接收文件(html,js,css,img等)

3.瀏覽器對拿到資源進行語法解析，創建對應的內部數據結構，如DOM熟

4.載入解析到的資源文件，渲染頁面，完成

9、語義化標籤是什麼？爲何要使用語義化標籤？

1.語義化標籤：如header、nav、footer、section等，標籤的意思就表明着頁面的結構

2.爲何要使用語義化標籤：

a.可讓頁面的內容結構化，結構更清晰，方便瀏覽器和搜索引擎解析

b.即便在沒有css樣式的狀況下，也以一種文檔格式顯示，容易閱讀,方便維護

c.便於搜索引擎爬蟲抓取

d.對盲人設備友好

10、書寫CSS和HTML要注意什麼？

1.減小無心義標籤使用，儘可能使用語義化標籤，

2.css選擇器命名要儘可能使用英文名，且用駝峯或「_」鏈接，要語義化

3.設置高度的時候，看狀況是否寫死

4.html代碼的結構要考慮數據渲染和後期擴展你

11、Meta定義的viewport有哪幾個值？

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。

height：和 width 相對應，指定高度。

initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。

maximum-scale：容許用戶縮放到的最大比例。

minimum-scale：容許用戶縮放到的最小比例。

user-scalable：用戶是否能夠手動縮放

12、禁止搜索引擎抓取的mata定義方法？

index,follow：容許抓取本頁，容許跟蹤連接。

index,nofollow：容許抓取本頁，但禁止跟蹤連接。

noindex,follow：禁止抓取本頁，但容許跟蹤連接。

noindex,nofllow：禁止抓取本頁，同時禁止跟蹤本頁中的連接。

index,follow能夠寫成all，如：

noindex,nofollow能夠寫成none，如：

13、例舉4個html5新出現的標籤，2個再也不推薦使用的標籤

新增：section、firgure、header、footer、nav 再也不使用: color、font、u...

14、若是給你一個大型網站，你如何管理它的CSS、JS以及圖片？

css:先期團隊肯定全局樣式(global.css)和編碼模式(utf-8)，與html文件分開並行存放

Js:分文件夾存放，文件夾名用該js功能的英文翻譯

Img：圖片採用整合的images.png png8格式文件使用，儘可能整合在一塊兒方便未來管理

15、經常使用哪一種圖片格式，各有什麼區別，加載不一樣格式圖片有什麼區別。

圖片類型有gif,png,jpg,svg,webp等 png和jpg的主要區別以下:

1、png能夠透明，jpg不能透明，因此須要透明的地方，必須用png

2、png是無損保存，屢次保存都不會影響圖片質量；而jpg是壓縮不可逆保存，因此一個jpg圖片通過屢次保存以後就會愈來愈模糊，

3、jpg小，png大；因此通常網頁能用jpg的地方，就不用png

4 .webp小巧，可是兼容性不太好

16、標籤上title與alt屬性的區別是什麼？

title是鼠標懸乎時，出來的說明，alt是加載不出來時直接出如今頁面上的文字

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

web標準簡單來講能夠分爲結構、表現和行爲，W3C對web標準提出了規範化的要求

結構：1.標籤字母要小寫 2.標籤要閉合 3.標籤不容許隨意嵌套

表現和行爲(css js)：

1.儘可能使用外鏈css樣式表和js腳本。是結構、表現和行爲分爲三塊，符合規範。同時提升頁面渲染速度，提升用戶的體驗。

2.樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版

3.不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性。

18、簡述HTML5中data-*屬性的做用是什麼？

自定義屬性,如 data-author data-id data-name等

能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取

data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。

19、input如何設置最大輸入長度？

input寬度css:width 文字長度：max-length屬性

20、iframe有哪些缺點？

1.iframe會阻塞主頁面的onload事件，搜索引擎沒法解讀這種頁面，不利於seo

2.iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載

解決：動態給iframe添加src屬性，能夠繞開上面兩個問題

21、label的做用是什麼？是怎麼用的？

定義表單控件間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。如<label for=」name」>xxx<label> <input type=」text」 name=」name」/>

22、在網頁中應該使用奇數仍是偶數的字體？爲何呢？

偶數：如12px 14px，緣由：更容易和 web 設計的其餘部分構成比例關係，如 14*1.5 = 21px,很多字體庫都不支持奇數

24、怎麼讓Chrome支持小於12px的文字？

body{-webkit-text-size-adjust:none}

新版本的chrome已失效。用該方法：

p{font-size:10px;-webkit-transform:scale(0.8);}

25、對網頁標準的認識？DIV+CSS的佈局就是網頁標準麼？

網頁標準看上面的web和w3c標準，DIV+CSS的佈局不是網頁的標準，如今更應選擇語義化的元素

26、SGML（標準通用標記語言）和HTML（超文本標記語言），XML（可擴展標記語言）和HTML的之間有什麼關係？

SGML 是元語言，是HTML和XML的根， HTML是SGML的一個實例，它的DTD已經固化下來，只能用於web

XML是精簡後的SGML，能夠設置DTD來定義其餘文件系統，能夠用於其餘領域的文檔

27、哪些瀏覽器支持HTML5？

IE9支持部分，IE10+支持所有，其餘主流瀏覽器基本都支持

28、HTML5中的datalist是什麼？

用來定義input框的詳細屬性：datalist 中描述了其可能的值。目前只有safari和chorme支持

</datalist>

29、HTML5中哪些是不一樣新的表單元素類型？

email（自動驗證email格式） Date pickers （自帶日期選擇）url（自動驗證url格式）number（只能輸入數字）

search（搜索域，相似百度的相似搜索提示）color(兼容) range（相似音量滑動條）

30、HTML5中什麼是輸出元素？

html5中的輸出元素是output，表單裏的元素，跟input相對

31、新的HTML5文檔類型和字符集是？

<!DOCTYPE html> 和 <meta charset=utf-8">

32、XHTML是什麼？

可擴展超文本標記語言，是一種置標語言，表現方式與超文本標記語言（HTML）相似，不過語法上更加嚴格，是W3C組織設計出的—————— HTML5就是嫌棄XHTML太嚴格了，而被幾大瀏覽器廠商搞出來的

CSS

1、px em rem 區別?

像素px是相對於顯示器屏幕分辨率而言的

em指的是一個字體的大小，它會繼承父級元素的字體大小，所以並非一個固定的值。

rem是CSS3新增的一個相對單位，相對的只是HTML根元素。 p {font-size:14px; font-size:.875rem;}解決兼容性

2、BFC 是什麼? 在何時會觸發? 觸發方式有哪些?

BFC：塊級格式化上下文，它是一塊獨立的區域，它決定了區域內部的塊級元素怎麼佈局，而且內部的佈局不影響外部

觸發：• float的值不爲none；• overflow的值不爲visible；•

display的值爲inline-block、table-cell、table-caption；• position的值爲absolute或fixed；

3、CSS3新增屬性?移除了哪些元素？

新增選擇器如：nth-child(), :not()等

其餘：圓角radius 多列布局column 陰影和反射:shadow\reflect 文本特效text-shadow 文本渲染：text-decoration 線性漸變：gradient

轉換：translate \rotate\scale 過分transition 動畫 animate

4、如何設置陰影? 有哪些值?

box-shadow: 10px 10px 5px #888888; box-shadow: 水平垂直距離尺寸 color inset 後面4個可選

5、display:none和visibility:hidden的區別

visibility和display兩個屬性都有隱藏元素的功能

1、visibility:hidden--爲隱藏的對象保留其物理空間

HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

2、display: none--不爲被隱藏的對象保留其物理空間，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」

6、position:absolute和float屬性的異同？何時使用定位？何時使用浮動？

共同點：對內聯元素設置float或absolute屬性，可讓元素脫離文檔流（塊級元素也能夠），而且能夠設置其寬高。

不一樣點： float仍會佔據其位置，position會覆蓋文檔流中的其餘元素

左右用浮動，其餘用絕對

7、relative和absolute分別是相對於誰進行定位的？

relative 生成相對定位的元素，相對於其自身在普通流中的位置進行定位。

absolute 生成絕對定位的元素，相對於其向上查找第一個不爲 static 定位的其餘定位祖先元素進行定位。

8、介紹一下box-sizing，經常使用的屬性有哪些？分別有什麼做用？

box-sizing: content-box|border-box|inherit;

content-box：在寬度和高度以外繪製元素的內邊距和邊框。常規

border-box：爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製

Inherit：規定應從父元素繼承 box-sizing 屬性的值。

9、div+css的佈局較table佈局有什麼優勢？

1.符合W3C標準，代碼結構清晰明瞭，結構、樣式和行爲分離，帶來足夠好的可維護性。

2.佈局精準，網站版面佈局修改簡單。

3.加快了頁面的加載速度（最重要的）（在IE中要將整個table加載完了才顯示內容）。

4.節約站點所佔的空間和站點的流量。

5.用只包含結構化內容的HTML代替嵌套的標籤，

6.提升搜索引擎對網頁的搜索效率。

10、CSS的盒模型？一個標籤的寬度和那些有關？

Content+padding+border+margin ，

11、CSS引入的方式有哪些？link和@import的區別是？

引入方式：內嵌內聯外鏈內聯+@import

1.Link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS，定義rel鏈接屬性等做用，而@import是css提供的，只能用於加載css

2.頁面被加載時，link會同時被加載，而@impor引用的css會等到頁面被加載完再加載

3.import是css2.1提出，只在IE5以上兼容，link是XHTML標籤，無兼容問題

12、CSS選擇器有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

選擇器：三類，即id選擇器、class選擇器、標籤選擇器

組合：後代選擇器: 空格子代選擇器: > 羣組選擇器: 逗號僞類選擇器: name:僞類

• • 通用(通配符)選擇器: * { 屬性名: 屬性值; }

CSS3：某個子元素選擇器 :nth-child() 排除選擇器:not()

可繼承的屬性：

文本相關，如：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、 -- text-align、 ------list-style、list-style-type、list-style-position、list-style-image

不可繼承的屬性：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

優先級算法：權重值相加

內聯和important哪一個優先級高？ !important > [ id > class > tag ] !important >內嵌>內聯>外聯

13、清楚浮動有哪些方式？比較好的方式是哪種？

1.使用空標籤清除浮動 <br style="clear:both">

2.使用overflow屬性<ul style="overflow:auto;zoom:1>

3.使用after僞對象清除浮動 .listinfo:after{display:block;clear:both;content:""; visibility:hidden;height:0;}

最經常使用第三種，難度小，兼容性好，各大主流瀏覽器通用

14、畫一個三角形？

寬高爲0 設置border

15、對CSS流式佈局的見解

所謂的流式佈局，就是區別於固定像素的佈局，流式佈局按百分比設置，能夠適應不一樣的分辨率，解決固定佈局的劣勢

16、SASS的好處和理解。

Sass和less同樣，也是"CSS預處理器"，它最實用的幾個功能有變量、混合、嵌套，

固然還有更強大的函數等，它更適合於大型項目，它能夠比css實現更復雜的表現(函數)，也更容易修改和維護(變量等)

17、概述CSS框架中的柵格系統是什麼？

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。

最多見的12格，也有16格，24格和32格

18、概述你用過的CSS框架中的主要特性。

就用過bootstrap,bootstrap很是強大，它定義了移動端優先的響應式佈局，柵格系統，大量的UI組件，以及通過視覺細節處理的class類，你只要寫HTML代碼，調用這些組件和類名，不用寫css代碼都能實現一些像模像樣的網站，可是就是樣式相近

19、CSS實現垂直水平居中。

垂直居中：

1.單行文本，設置父級的高度，而後文本的line-hight等於父級高度

2.多行文本，position: absolute;//子級用絕對定位 top:50%;//先定位到50%的位置 height: 300px;//已知的高度margin-top: -150px;//往上提自己高度的一半

3．父級div裏設置一個空div，高度50%，佔位子，要居中的p設置高度，maigin-top=負一半高度

4.垂直居中一張圖片（行內元素）, vertical-align: middle;，它是相對兄弟級行高（line-height）來定位，而且他僅對行內元素有效.,

5.父子都未知高度的塊級元素居中：父設置 display: table; 子設置display: table-cell;vertical-align: middle;IE67不兼容

6.絕對定位居中法子元素：position: absolute;top: 0; bottom: 0;left: 0;right: 0;margin:auto; 該方法也能夠水平居中

水平居中： table-cell 和絕對定位居中法都能同時實現水平和垂直居中

1.text-align:center，用於居中行內文字或元素

2.margin:0 auto 居中固定寬度的塊級元素

3.絕對定位position left:50% margin-left:-50%的自身寬

4.translate偏移

20、用本身的理解簡述彈性佈局，及其對應的CSS定義？有問題

彈性佈局是CSS3引入的強大的佈局方式，用來替代之前使用的一些複雜而易錯hacks方法（如使用float進行相似流式佈局）。

21、多級的CSS子代選擇器執行方向是（從左至右）。

22、CSS僞類中選擇3的倍數個元素的寫法？

li:nth-child(3n){background: green}

23、background-size有哪4種值類型？

1.固定值，如100px，若是第二個值不寫默認auto

2.百分比 50% 若是第二個值不寫默認auto

3.cover 把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。背景圖像的某些部分也許沒法顯示在背景定位區域中。

4.contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

24、如何定義div的border邊框向盒子內部繪製？

box-sizing:border-box

25、請用div+css寫出左側固定（width:200px）,右側自適應的頁面

利用BFC來作，左側div{background: red;width: 200px;float: left;height: 200px;} 浮動，給寬高，

右側div{background: green;height: 200px;overflow: hidden;} 利用BFC的overflow：hidden

利用margin 左側同樣，右側div{background: green;height: 200px;margin-left: 200px;width：100%}

26、如何居中一個固定定位？

Left:50% margin-left:-50%自身寬度

27、子級相對定位，父級相對定位，子級上下左右爲0，此時子級是什麼狀況？

左上角，都是相對定位，沒用的，就算是絕對定位也沒有用，還要配合margin

28、P標籤裏有行內塊元素，P的px比行內塊元素的px小，這是兩種不一樣ox的位子是上對齊，仍是從下對齊？

上對齊，下部溢出

29、LESS的流程

1.建立less文件 2.我用的是考拉解析器，選擇編譯的less文件，會生成對應的css文件

3.HTML裏引入css 4，less文件裏定義變量，@xxx:’’ 5,定義混合mixin 和嵌套

30、CSS層級

css是層疊樣式表，層級性是指對同一元素設置的相同類型的多個樣式，根據權重值來斷定最後實際展現的樣式

css也是一層一層的，層級越大越在上面，能夠經過z-index改變層級結構

31、響應式佈局用的什麼屬性？

@media

32、CSS3新增僞類有哪些？

:first-of-type p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

:last-of-type p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

:only-of-type p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

:only-child p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始計數。

:nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是從最後一個子元素開始計數。

:last-child p:last-child 選擇屬於其父元素最後一個子元素每一個 <p> 元素。

:root :root 選擇文檔的根元素。

:empty p:empty 選擇沒有子元素的每一個 <p> 元素（包括文本節點）。

:target #news:target 選擇當前活動的 #news 元素。

:enabled input:enabled 選擇每一個啓用的 <input> 元素。

:disabled input:disabled 選擇每一個禁用的 <input> 元素

:checked input:checked 選擇每一個被選中的 <input> 元素。

:not(selector) :not(p) 選擇非 <p> 元素的每一個元素。

::selection ::selection 選擇被用戶選取的元素部分。

33、translate()函數能夠在Z軸移動一個元素的位置嗎？

能夠 translate3d(x,y,z) 或 translateZ(z)

34、請使用a標籤建立一個mail連接：

＜a href="mailto: ×××××@abc. com.cn"＞與我E-mail聯繫＜/a＞。

35、解釋css sprite,如何使用

背景定位 background-position:x y

36、CSS的基本語句構成是？

選擇器{屬性: 值;}

37、如何居中一個浮動元素？都是position: absolute+margin

1,純margin 2.left: 50% margin-left:-50%width 3.left: 0;right: 0;bottom: 0;top:0;margin:auto;

38、響應式佈局，移動端，PC端

響應式佈局，針對不一樣的屏幕尺寸進行不一樣的排版，在移動端和pc端上顯示不一樣的頁面結構

39、三個嵌套的div，給最裏面的div 設置 margin-top :10px 會怎樣

觸發BFC，父級div會margin相同的值，能夠經過給父div設置overflow:hidden解決

40、css新增的單位，好比vh和vw

Rem-相對根節點html的字體大小來計算 vh-viewpoint width，視窗寬度，1vw等於視窗寬度的1%

vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。 vmin：vw和vh中較小的那個。

vmax：vw和vh中較大的那個。

56、一個DIV浮動後margin-left有什麼兼容性問題

ie6自己不支持margin-left能夠用padding或_margin-left代替

浮動後margin在IE6、7上會有問題，原本IE8也有問題，可是後面修復了，其餘瀏覽器都正常

41、CSS預處理器。::after ::before 何時用

CSS預處理器：less和sass，

爲何用less和sass：1，更符合編程的思惟，2，簡化代碼，提升代碼重用 3，提升開發效率 4.便於維護

::before,::after是僞元素，特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容，儘可能使用它們顯示修飾性內容，例如圖標。

42、CSS父代選擇器的執行方向及效率。

沒有父帶選擇器

43、描述CSS reset的做用和用途？

每一個瀏覽器都有一些自帶的或者共有的默認樣式，會形成一些佈局上的困擾，css reset的做用就是重置這些默認樣式，使樣式表現一致，好比 *{margin:0;padding:0}就是一個最簡單的css reset

44、三個div排成3列，左右div寬度都是200px 怎麼讓中間div的適應屏幕垂直水平居中

45、CSS中margin和padding的區別

Margin:外邊距 padding:內邊距

46、爲何一般推薦CSS<link>放置在<head></head>之間，而將JS<script>放置在<body>?

1，css放在頭部，避免無樣式閃爍 2.js放在頭部，主要是由於會阻塞後面html代碼執行

69、爲何要結構和表現相分離？

1.HTML是結構型的文檔。就算沒有css和js，它依然有本身的結構，能被閱讀

2.在某些古老的瀏覽器不支持css和js

3.將結構和表現分離，能方便的維護網頁

4.能輕易的實現結構或樣式的複用

47、如何讓2個並列的div自動登高（不設高度） js實現，取高的那個div的高度

48、介紹一下標準的CSS盒子模型？與低版本IE的盒子模型有什麼不一樣的？

標準的：寬、高等於內容區的寬高，低版本IE(5,6)指寬、高等於內容區+pandding+border

49、li和li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

這個題有兩種答法：

1，行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符，這些空白也會被應用樣式，佔據空間，因此會有間隔，解決 font-size=0

2.若是是li標籤自帶的間隔空白，這是瀏覽器行高計算的緣由，能夠手動設置行高來解決

50、margin和padding適合什麼場景使用？

Margin:須要在盒子外部加空白區域 padding:須要在盒子內部加空白區域，可是padding會撐大盒子

Margin-left／right在IE5、6下會存在兼容性問題，能夠display：inline或者用padding

51、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

響應式：同一頁面針對不一樣的設備屏幕尺寸，展現出不一樣的結構樣式，就是響應式

基本設計原理：結合媒體查詢@media 設置不一樣的尺寸展現的樣式，尺寸須要設置百分比和rem

兼容性：插件解決，response.js和kr.js等

52、設置元素浮動後，該元素的display值是什麼？

block

53、display:inline-block何時會顯示間隔？

如兩個Input框 <input type="text"> <input type="button" value="xxx"> 產生的緣由主要是換行空格等

解決辦法：1，font-size:0; 2.手動去空格 3,用註釋佔據空格的位置 4.letter-spacing和word-spacing 5.margin負值等

54、在使用CSS3時，我能夠選擇使用「標準盒模型」或「傳統IE盒模型」嗎？若是能夠選擇，請寫出屬性名。

Box-sizing屬性默認是content-box,現代瀏覽器都支持， border-box則選擇IE盒模型，padding、border在盒子內部繪製

55、CSS中使用列布局是什麼？

Css3中提供列布局 column ，可設置屬性是 column-count\gap\rule，分別是列數\間隔距離\列之間的寬度、樣式和顏色

56、你能解釋一下CSS3的文本效果麼？

text-shadow 和 word-wrap，

text-shadow：水平陰影、垂直陰影、模糊距離，以及陰影的顏色

word-wrap，換行規則，詳細見w3手冊

57、如何用CSS控制文本單行溢出省略？而且大體說出多行省略的思路。

單行：CSS：{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

多行：{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

58、CSS選擇符有哪些並列的優先級？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。