為了賬號安全,請及時綁定郵箱和手機立即綁定

面試題匯總 HTML+CSS篇 (一)

2017.03.05 21:48 18755瀏覽

介紹一下dl\dt\dd標簽

dl是列表標簽,dt和dd須出現在dl中,其中,dt是上層項目,dl是下層項目。在瀏覽器渲染時,二者差別體現在dd會因為-webkit-margin-start屬性而距離dt的左邊有一定的邊距。

行內元素、塊級元素、空元素都有哪些?

如果不考慮html5的語義化標簽,那么
行內元素有:

img\input\a\span\i\strong\select\button\label\textarea

塊級元素有:
div\ul\ol\dl\li\dd\dt\blockquote\p

空元素是指單個標簽,中間沒有內容的元素,包括:
input\img\br\hr\meta\link

css如何實現垂直水平居中?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS垂直居中</title>
<style>
    .wrapper{
        width: 500px;
        height: 500px;
        background-color: #666;
        /*方式一,方式二 絕對定位的方式*/
        /*position: relative;*/
        /*方式三 基于屬性計算*/
        /*overflow: hidden;*/
        /*方式四: 基于vertical-align屬性*/
        /*text-align: center;*/
        /*方式五: 使用彈性盒子*/
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*方式六 基于塊級內聯元素的特性*/
        line-height: 550px; /*.wrapper.height+1/2*box.height*/
        text-align: center;
    }

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        /*方式一*/
        /*position: absolute;*/
        /*left:0;*/
        /*right: 0;*/
        /*top:0;*/
        /*bottom:0;*/
        /*margin: auto;*/
        /*方式二*/
        /*position: absolute;*/
        /*left: 50%;*/
        /*top: 50%;*/
        /*margin-left: -50px; !*1/2的width*!*/
        /*margin-top: -50px; !*1/2的height*!*/
        /*方式三*/
        /*margin: calc(50% - 50px) auto;*/
        /*方式四*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*margin: 0 auto;*/
        /*方式六*/
        display: inline-block;
    }

    /*方式四的輔助元素*/
    /*.help{*/
        /*width: 0;*/
        /*height: 100%;*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
    /*}*/
</style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <!--方式四-->
    <!--<div class="help"></div>-->
</div>
</body>
</html>

請簡述href和src的區別

href指向網絡資源所在位置,建立和當前元素或文檔的連接,常用于a標簽和link標簽。
src指向外部文檔,指向的內容將會嵌入到文檔中當前標簽所在位置。在請求src資源時會將其指向的資源下載并應用到文檔內,例如js腳本,img圖片和frame等元素。
總而言之,我們在可替換的元素上使用src,然而把href用于在涉及的文檔和外部資源之間建立一個引用關系。

請簡述link和@import的區別

(1)link是XHTML標簽,除了加載CSS外,還可以定義RSS( 真正簡易聯合,被設計用來展示選定的數據)等其他事務;@import屬于CSS范疇,只能加載CSS。

(2)link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。

(3)link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

(4)link支持使用Javascript控制DOM去改變樣式;而@import不支持。

什么是CSS hack?有什么作用?

通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號,以達到應用不同的CSS樣式的目的。Hack一般又分為三種,條件Hack(if ie)、屬性級Hack(_color)、選擇符Hack(* + html)

請簡述px,rem和em有什么區別?

px是絕對尺寸單位,其值是固定的。而em和rem是字體相對尺寸單位,其值并不固定。em會繼承父級元素的字體大小,而rem則是相對于html根元素確定的。

什么是優雅降級、什么是漸進增強?

漸進增強:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級:一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。

瀏覽器的內核分別是什么?

IE: trident內核
Firefox:gecko內核

Safari:webkit內核

Opera:以前是presto內核,Opera現已改用Google Chrome的Blink內核

Chrome:Blink(基于webkit,Google與Opera Software共同開發)

說說對BFC的理解

BFC,塊級格式化上下文,一個創建了新的BFC的盒子是獨立布局的,盒子里面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向(和布局方向有關系)的 margin 會發生折疊。W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行布局,以及與其他元素的關系和相互作用。

table布局的缺點?

(1)首先,table布局會占用更多的字節,從而影響下載速度
(2)table布局編寫起來麻煩耗時,即不利于設計思維,也影響開發者閱讀體驗。
(3)稍加改動就會造成大量的重排操作,且不利于瀏覽器的順序渲染。

點擊查看更多內容
174人點贊

若覺得本文不錯,就分享一下吧!

評論

相關文章推薦

正在加載中
意見反饋 幫助中心 APP下載
官方微信

舉報

0/150
提交
取消
lpl竞猜