html&css面試筆記

時間 2019-12-05

標籤 html&css html css 面試筆記欄目 CSS 简体版

原文原文鏈接

一、CSS選擇器有哪些？它們的優先級是怎樣的？

選擇器類型：css

id選擇器      （ # myid）
類選擇器      （.myclassname）
標籤選擇器    （div, h1, p）
相鄰選擇器    （h1 + p）
子選擇器      （ul > li）
後代選擇器    （li a）
通配符選擇器  （ * ）
屬性選擇器    （a[rel = "external"]）
僞類選擇器    （a:hover, li:nth-child）

選擇器優先級：就近原則，同權重狀況下樣式定義最近者爲準;載入樣式以最後載入的定位爲準;
優先級爲:!important > id > class > tag，同時important 比內聯優先級高
權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100；若是權重相同，則最後定義的樣式會起做用

二、列出px、em、rem三者的區別

px：像素，絕對單位，指定是多少就是多少，計算比較容易；
em：相對單位，相對於父元素的字體大小，若是當前對象沒有設置字體尺寸，則相對於瀏覽器默認字號，em的值不固定，而且em會繼承父級元素的字體大小；
rem：相對單位，相對於HTML根元素的字體大小；
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。html

三、寫出一個兩列等高，左列固定寬度爲200px，右列自適應瀏覽器的佈局

浮動

<div>
    <div id="left" style="float:left;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="float:left;margin-left:-100%;width:200px;height:200px;background-color:green;"></div> 
</div>

父元素flex佈局，左側子元素flex-basis:200px，右側子元素flex:1；

<div style="display:flex;">
    <div id="left" style="flex-basis:200px;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="flex:1;height:200px;background-color:green;"></div> 
</div>

四、你作的頁面在哪些瀏覽器測試過？常見瀏覽器的內核分別是什麼？

瀏覽器內核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+極速模式Webkit

五、不定寬高的img在固定寬高的容器內水平垂直居中，寫出html和css

<div class="box">
    <img src="http://img1.gtimg.com/nice_mb/08/1c/24769.jpg" />
</div>
 .box{
    width:200px;
    height:200px;
    border:1px solid #06C;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    *font-family:simsun;
    *font-size:200px;
}
.box img{
    vertical-align:middle;
}

六、清除浮動的原理和實現方法

父元素沒有給定高度的前提下，父元素內總體浮動的元素沒法撐開父元素，須要清除浮動。
父級上增長屬性overflow：hidden

.parent{
    overflow:hidden;
}

在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）

<div class="parent">
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <div style="clear:both"></div>
</div>

使用成熟的清浮動樣式類，clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

七、rgba()和opacity的透明效果有什麼不一樣

效果上的不一樣：opacity方案，子元素文字內容同時透明；rgba方案，子元素內容不透明

八、css實現，鼠標放在一個div上時該元素在2s內旋轉180°

#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

九、什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。
這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

十、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

十一、CSS實現垂直水平居中

實現方法有不少種，如下是其中一種實現：

//HTML結構：
<div class="wrapper">
     <div class="content"></div>
</div>

//CSS：
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設置爲0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設置爲auto*/
    margin:auto;
    border: 1px solid green;    
}

十二、簡述一下src與href的區別

href標識超文本引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間創建聯繫
src表示引用資源，表示替換當前元素，用在img，script，iframe上，src是頁面內容不可缺乏的一部分。
補充：link和@import的區別web

二者都是外部引用CSS的方式，可是存在必定的區別：bootstrap

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。瀏覽器

區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。安全

區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。服務器

區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。app

1三、什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：ide

a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給佈局

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

1四、html中title屬性和alt屬性的區別？

<img src="#" alt="alt信息" />
當圖片不輸出信息的時候，會顯示alt信息，鼠標放上去沒有信息，當圖片正常讀取，不會出現alt信息
<img src="#" alt="alt信息" title="title信息" />
當圖片不輸出信息的時候，會顯示alt信息鼠標放上去會出現title信息
當圖片正常輸出的時候，不會出現alt信息，鼠標放上去會出現title信息
title屬性能夠用在除了base，basefont，head，html，meta，param，script和title以外的全部標籤
title屬性的功能是提示。額外的說明信息和非本質的信息請使用title屬性。title屬性值能夠比alt屬性值設置的更長
title屬性有一個很好的用途，即爲連接添加描述性文字，特別是當鏈接自己並非十分清楚的表達了連接的目的。

1五、標準盒子模型與IE怪異盒子模型

當不對doctype進行定義時，會觸發怪異模式。
在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
CSS3的box-sizing
當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；

1六、CSS3有哪些新增的屬性？

分爲邊框、背景，漸變，陰影、2D轉換 3D轉換、過渡、動畫、彈性盒子等。
好比：邊框(border-radius、border-shadow、border-image)之類的。

1七、什麼是CSS Hack?

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。
IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

// 一、條件Hack
<!--[if IE]>
  <style>
    .test{color:red;}
  </style>
<![endif]-->
// 二、屬性Hack
.test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}
// 三、選擇符Hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */

1八、bootstrap響應式實現的原理

百分比佈局+媒體查詢

19. 請簡要描述margin重合問題，及解決方式

同向margin的重疊：
在最外層的div中加入overflow:hidden;zoom:1
在最外層加入padding:1px;屬性
在最外層加入：border:1px solid #cacbcc;
異向重疊問題：
float:left（只能解決IE6瀏覽器中的異向重疊問題，能夠解決IE8以上、chorme、firefox、opera下的同向重疊問題）

20、position的值，relative、absolute、fixed分別相對於進行誰定位，有什麼區別？

absolute 生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位。
fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 left位置添加 20 像素。
static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit 規定應該從父元素繼承 position 屬性的值。

2一、瀏覽器是如何渲染頁面的？

渲染的流程以下：
1.解析HTML文件，建立DOM樹。自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合併，構建渲染樹（Render Tree）;
4.佈局和繪製，重繪（repaint）和重排（reflow）;

2二、對<meta>標籤有什麼理解

<meta> 標籤提供關於 HTML 文檔的元數據。它不會顯示在頁面上，可是對於機器是可讀的。
可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。
還有一個用途是能夠添加服務器發送到瀏覽器的http頭部內容

2三、h5新特性

新的語義標籤和屬性
表單新特性
視頻和音頻
Canvas繪圖
SVG繪圖
地理定位
拖放API

2五、display none visibility hidden區別？

display:none是完全消失，不在文檔流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，能夠理解爲透明度爲0的效果，在文檔流中佔位，瀏覽器會解析該元素；
使用visibility:hidden性能要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流），而visibility切換是否顯示時則不會引發迴流。