HTML和css面試題：內容轉載

一、常見的塊級元素 內聯元素

div -最經常使用的塊級元素
dl - 和dt-dd 搭配使用的塊級元素
form - 交互表單
h1 -h6- 大標題
hr - 水平分隔線
ol – 有序列表
p - 段落
ul - 無序列表
fieldset - 表單字段集
colgroup-col - 表單列分組元素
table-tr-td 表格及行-單元格
pre - 格式化文本


a –超連接（錨點）
br - 換行
i - 斜體
em - 強調
img - 圖片
input - 輸入框
label - 表單標籤
span - 經常使用內聯容器，定義文本內區塊
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
u - 下劃線
select - 項目選擇

 

二、實現文本三個點的幾個條件

text-overflow屬性僅是：當文本溢出時是否顯示省略標記，並不具有其它的樣式屬性定義，要實現溢出時產生省略號的效果還需定義：
一、容器寬度：width：value；（px、%，均可以）
二、強制文本在一行內顯示:white-space：nowrap;
三、溢出內容爲隱藏：overflow：hidden；
四、溢出文本顯示省略號：text-overflow：ellipsis;
注：必須是單行文本才能設置本文溢出！！！

IE6+；chrome1.0+；safari3.1+（firefox,opera暫不支持）

三、垂直居中的幾個條件

設置一個元素在一個容器中垂直居中，必須更改默認的display屬性值爲inline-block;
並加上同級元素（標尺）（同級元素[標尺]樣式設置爲vertical-align:middle;width:0;height:100%;display:inline-block;） 。

三個條件：
1：必須給容器（父元素）加上text-align:center;
2:必須給當前元素轉成行內塊元素（display:inline-block;）再給當前元素加上vertical-align:middle;
3：在當前元素的後面（沒有回車）加上同級元素span;並對span進行vertical-align:middle;width:0;height:100%;display:inline-block

四、置換元素與非置換元素

置換元素與非置換元素

a) 置換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 例如：瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(x)html代碼，則看不到圖片的實際內容；<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素每每沒有實際的內容，便是一個空元素。

置換元素在其顯示中生成了框，這也就是有的內聯元素（img,input）可以設置寬高的緣由。

b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（如瀏覽器）。

五、什麼是精靈圖？優點是什麼？

圖片整合，將小的單張背景圖整合到一張大的背景圖上。

圖片整合的優點： 1）經過圖片整合來減小對服務器的請求次數，從而提升 頁面的加載速度。 2）經過整合圖片來減少圖片的體積。

六、什麼是css層疊樣式表？優先級算法如何計算？

a.重要性和來源的優先級排序從低到高是：
1）瀏覽器默認樣式
2）class/id.....選擇器的權重
3）行間樣式
4）內聯或者外聯 （書寫順序）
5）!important 最高的


七、display:none與visibility:hidden的區別

前者：隱藏不佔位 後者：隱藏可是佔位置

八、清除浮動的幾種方式

hack1：給父元素添加聲明overflow:hidden;

hack2: 給父元素加height

hack3: 在浮動元素下方添加空div,並給該元素添加 聲明：div{clear:both; height:0; overflow:hidden;}

hack4:萬能清除浮動法 p:after{content:「.」;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}

九、哪些屬性能夠繼承？

1）文字相關：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2）列表相關：list-style-image、list-style-position、list-style-type、list-style
3）顏色相關：color
4）透明度（子元素會繼承祖元素的opacity，可是沒法更改）
注：font-size繼承的是父元素的大小，而不是比例。line-height當父元素是百分比或px值得時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字體大小乘以數字。

十、定位的方式

position屬性值：static，relative，absolute，fixed
1）static
static是默認值，元素位於文檔流中，正常顯示，忽略元素的top，bottom，left，right屬性。z-index屬性始終爲0.
2）relative
相對定位，保留元素在文檔流中佔用的位置和尺寸，由left/right/top/bottom幾個屬性肯定相對移動的距離，原來的位置保留
3）absolute
絕對定位，將對象從文檔流中脫離出來，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設置的父元素進行絕對定位；若是沒有，則依據body對象
4）fixed
fixed和absolute差很少，可是他相對的是窗口的左上角，不會跟隨文檔滾動。可是若是在多frame頁面裏面，他相對的是所在frame的左上角，而不是瀏覽器左上角。

十一、link和@import區別？

一、老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

二、link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了

三、加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍）

四、兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題

五、使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的


十二、定位的屬性值都有哪些？每一個值得意思？

各屬性值的做用：

static：默認值。位置設置爲 static 的元素會正常顯示，它始終會處於文檔流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。

absolute：相對於父級元素的絕對定位，s浮出、脫離佈局流，它不佔據空間，就是咱們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定 「left」、「top」、「right」 以及 「bottom」 屬性。若父級都沒有定位，則以html（根元素）。(層疊的順序z-index:value)

relative：是相對於默認位置的偏移定位，經過設置left、top、right、bottom值可將其移至相對於其正常位置的地方（相對於本身的開始的位置發生的位置上的移動，【不會破壞正常的佈局流】

fixed：相對瀏覽器的絕對定位，是相對於瀏覽器窗口的指定座標進行定位。此元素的位置可經過 "left"、"top"、"right" 以及"bottom" 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。

1三、寫出html5新增的標籤15個

header nav footer main aside article section figure datalist video audio fieldest legend label caption

1四、1、BFC是什麼？做用？怎麼產生？

一、塊級格式化上下文
二、自適應兩欄佈局、清除內部浮動、防止垂直margin重疊（放在兩個BFC裏）
三、根元素、 float屬性不爲none、 position爲absolute或fixed、 display爲inline-block，table-cell，table-caption，flex，inline-flex、 overflow不爲visible


1五、.px，em，rem，pt的區別

1）px實際上就是像素，用px設置字體大小時，比較穩定和精確
可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的web頁面時，若是對瀏覽器進行了縮放，這時會使咱們的web頁面佈局被打破。所以，這時就提出了使用「em」來定義web頁面的字體。
2）em就是根據基準來縮放字體的大小
em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小
3）rem是相對於根元素字體大小來顯示的
rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個參考值
4）pt的大小等於1英寸的1/72
磅：他是做爲文字的一種計量單位
這種度量方式來源於打印-設計背景，最適合於媒體，但一樣普遍應用於顯示器

1六、實現垂直+水平居中有哪些方法？

一、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

二、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

1七、漸進加強和優雅降級

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

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


1八、css選擇符有哪些？

1）通配選擇符 *
2）類型選擇符 /元素選擇符 a
3）屬性選擇符 input[type="button"]4）包含選擇符 div .code a
5）子對象選擇符 ul.test>li
6）ID選擇符 #
7）類選擇符 .
8）羣組選擇符 body,ul,li
9）僞類及僞對象選擇符 div:first-letter a:hover
10）相鄰選擇符 li+li

1九、animation和transition的區別
相同點：都是隨着時間改變元素的屬性值。

不一樣點： transition須要觸發一個事件(hover事件或click事件等)纔會隨時間改變其

css屬性； 而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就須要明確的動畫屬性值。

20、什麼是標準盒模型和怪異盒模型。二者的區別，如何實現怪異盒模型，和標準和模型

標準盒模型：content+border+padding
怪異盒模型：content

一個算盒子的寬度的時候加上border和padding另外一個不加

怪異盒模型實現：box-sizing:border-box
標準盒模型：box-sizing:content-box


2一、如何讓一個元素在父元素內上下左右居中

1.
css：
.box{display:flex;width:800px;height:300px;justify-content:center}
.box div{align-self:center}

html:
<div class="box">
<div></div>
</div>

2.
css:
.box{display:flex;width:800px;height:800px;justify-content:center;align-items:center;}
html:
<div class="box">
<div></div>
</div>

2二、video與audio經常使用的格式有哪些
用於視頻：video/ogg video/mp4 video/webm 用於音頻：audio/ogg audio/mpeg

2三、簡單的解釋下彈性盒模型的屬性和屬性值（至少寫出6個屬性）

display:flex;
flex-direction:
justify-content:
align-items:
align-self:
align-content:
flex-wrap:

2三、簡單的介紹一下線性漸變和徑向漸變、重複漸變的用法

線性漸變：linear-gradient()
徑向漸變：radial-gradient()
重複線性漸變：repeating-linear-gradient()
重複徑向漸變：repeating-radial-gradient()

2四、簡單介紹下animation的用法

animation有兩部分組成：animation:動畫名稱 動畫執行時間 動畫類型 動畫延遲時間 動畫重複次數 動畫方向； @keyframes 動畫名字

2五、css3D的主要幾個屬性和屬性值
一、景深：perspactive:number; 想要看到的物體越大，那麼就把值設的較小，若是要看物體看的越小就把值設的越大

二、3D的舞臺：transform-style:preserve-3d;

三、translateZ() rotateZ() scaleZ()

2六、2D中的主要幾個屬性

transform:translate() rotate() skew() scale()
transform-origin:

2七、簡單介紹過分動畫的屬性和屬性值

transition:屬性名稱（能夠用all） 動畫執行的時間 動畫的類型 動畫的延遲時間

2八、css3中新增的背景屬性

background-origin:背景原點
background-clip:背景裁切
background-size:背景圖像的尺寸
如下爲background-size的三個值

length
規定背景圖的大小。第一個值寬度，第二個值高度。

Percentage(%)
以百分比爲值設置背景圖大小

cover
把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域



2九、寫出5大瀏覽器的內核以及他們的表明做品

*Trident: IE、Maxthon(遨遊)、騰訊 、Theworld世界之窗、360瀏覽器

*Gecko：： 表明做品Mozilla Firefox 是開源的

*Webkit : 表明做品Safari、Chrome ， 是一個開源項目。

*Presto : 表明做品Opera ，Presto是由Opera Software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。

*Blink ：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發佈。

30、寫出IE6裏面常見的幾種bug以及解決方案(最少4種)

1)圖片有邊框BUG 方案：給圖片加border:0;或者border:0 none;

二、雙倍浮向（雙倍邊距） 方案：display:inline

三、默認高度（IE六、IE7） 方案：給元素添加聲明：font-size:0; 方案2：給元素添加聲明：overflow:hidden;

四、按鈕元素默認大小不一 方案：用a標籤模擬

3一、IE的過濾器有哪些？

一、 _ 下劃線屬性過濾器
二、 \9 ： IE版本識別；其餘瀏覽器都不識別 語法：選擇符{屬性：屬性值\9;}
三、 \0 : IE8及以上版本識別；其餘瀏覽器都不識別 語法：選擇符{屬性：屬性值\0；}

3二、元素高度塌陷解決方案（至少4種）
hack1：給父元素添加聲明overflow:hidden;

hack2: 給父元素加height

hack3: 在浮動元素下方添加空div,並給該元素添加 聲明：div{clear:both; height:0; overflow:hidden;}

hack4:萬能清除浮動法 p:after{content:「.」;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}