天天看點

第213天:12個HTML和CSS必須知道的重點難點問題12個HTML和CSS必須知道的重點難點問題

12個HTML和CSS必須知道的重點難點問題

這12個問題,基本上就是HTML和CSS基礎中的重點個難點了,也是必須要弄清楚的基本問題,其中定位的絕對定位和相對定位到底相對什麼定位?這個還是容易被忽視的,浮動也是一個大坑,有很多細節。

這12個知識點是我個人認為的,下面我們就來看看這12個知識點。

1.怎麼讓一個不定寬高的 DIV,垂直水準居中?

使用Flex

  • 隻需要在父盒子設定:display: flex; justify-content: center;align-items: center;

使用 CSS3 transform

  • 父盒子設定:

    position:relative

  • Div 設定: 

    transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;

使用 display:table-cell 方法

  • display:table-cell; text-align:center;vertical-align:middle

    ;
  • display:inline-block;vertical-align:middle

2.position 幾個屬性的作用

position 的常見四個屬性值: relative,absolute,fixed,static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。

  • **static:預設位置。**在一般情況下,我們不需要特别的去聲明它,但有時候遇到繼承的情況,我們不願意見到元素所繼承的屬性影響本身,進而可以用Position:static取消繼承,即還原元素定位的預設值。設定為 static 的元素,它始終會處于頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。
  • **relative:相對定位。**相對定位是相對于元素預設的位置的定位,它偏移的 top,right,bottom,left 的值都以它原來的位置為基準偏移,而不管其他元素會怎麼 樣。注意 relative 移動後的元素在原來的位置仍占據空間。
  • **absolute:絕對定位。**設定為 absolute 的元素,如果它的 父容器設定了 position 屬性,并且 position 的屬性值為 absolute 或者 relative,那麼就會依據父容器進行偏移。如果其父容器沒有設定 position 屬性,那麼偏移是以 body 為依據。注意設定 absolute 屬性的元素在标準流中不占位置。
  • **fixed:固定定位。**位置被設定為 fixed 的元素,可定位于相對于浏覽器視窗的指定坐标。不論視窗滾動與否,元素都會留在那個位置。它始終是以 body 為依據的。 注意設定 fixed 屬性的元素在标準流中不占位置。

3.浮動與清除浮動

3.1 浮動相關知識

float屬性的取值:

  • left:元素向左浮動。
  • right:元素向右浮動。
  • none:預設值。元素不浮動,并會顯示在其在文本中出現的位置。

浮動的特性:

  • 浮動元素會從普通文檔流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。
  • 不管一個元素是行内元素還是塊級元素,如果被設定了浮動,那浮動元素會生成一個塊級框,可以設定它的width和height,是以float常常用于制作橫向配列的菜單,可以設定大小并且橫向排列。

浮動元素的展示在不同情況下會有不同的規則:

  • 浮動元素在浮動的時候,其margin不會超過包含塊的padding。PS:如果想要元素超出,可以設定margin屬性
  • 如果兩個元素一個向左浮動,一個向右浮動,左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
  • 如果有多個浮動元素,浮動元素會按順序排下來而不會發生重疊的現象。
  • 如果有多個浮動元素,後面的元素高度不會超過前面的元素,并且不會超過包含塊。
  • 如果有非浮動元素和浮動元素同時存在,并且非浮動元素在前,則浮動元素不會高于非浮動元素
  • 浮動元素會盡可能地向頂端對齊、向左或向右對齊

重疊問題

  • 行内元素與浮動元素發生重疊,其邊框,背景和内容都會顯示在浮動元素之上
  • 塊級元素與浮動元素發生重疊時,邊框和背景會顯示在浮動元素之下,内容會顯示在浮動元素之上

clear屬性 clear屬性:確定目前元素的左右兩側不會有浮動元素。clear隻對元素本身的布局起作用。 取值:left、right、both

3.2 父元素高度塌陷問題

為什麼要清除浮動,父元素高度塌陷 解決父元素高度塌陷問題:一個塊級元素如果沒有設定height,其height是由子元素撐開的。對子元素使用了浮動之後,子元素會脫離标準文檔流,也就是說,父級元素中沒有内容可以撐開其高度,這樣父級元素的height就會被忽略,這就是所謂的高度塌陷。

3.3 清除浮動的方法

方法1:給父級div定義 高度 原理:給父級DIV定義固定高度(height),能解決父級DIV 無法擷取高度得問題。 優點:代碼簡潔 缺點:高度被固定死了,是适合内容固定不變的子產品。(不推薦使用)

方法二:使用空元素,如

<div class="clear"></div> (.clear{clear:both})

 原理:添加一對空的DIV标簽,利用css的clear:both屬性清除浮動,讓父級DIV能夠擷取高度。 優點:浏覽器支援好 缺點:多出了很多空的DIV标簽,如果頁面中浮動子產品多的話,就會出現很多的空置DIV了,這樣感覺視乎不是太令人滿意。(不推薦使用)

方法三:讓父級div 也一并浮起來 這樣做可以初步解決目前的浮動問題。但是也讓父級浮動起來了,又會産生新的浮動問題。 不推薦使用

方法四:父級div定義 display:table 原理:将div屬性強制變成表格 優點:不解 缺點:會産生新的未知問題。(不推薦使用)

方法五:父元素設定 overflow:hidden、auto; 原理:這個方法的關鍵在于觸發了BFC。在IE6中還需要觸發 hasLayout(zoom:1) 優點:代碼簡介,不存在結構和語義化問題 缺點:無法顯示需要溢出的元素(亦不太推薦使用)

方法六:父級div定義 僞類:after 和 zoom

1 .clearfix:after{
2     content:'.';
3     display:block;
4     height:0;
5     clear:both;
6     visibility: hidden;
7 }
8 .clearfix {zoom:1;}      

原理:IE8以上和非IE浏覽器才支援

:after

,原理和方法2有點類似,

zoom

(IE轉有屬性)可解決ie6,ie7浮動問題 優點:結構和語義化完全正确,代碼量也适中,可重複使用率(建議定義公共類) 缺點:代碼不是非常簡潔(極力推薦使用)

經益求精寫法

1 .clearfix:after {
2     content:”\200B”; 
3     display:block; 
4     height:0; 
5     clear:both;
6  }
7 .clearfix { *zoom:1; } 照顧IE6,IE7就可以了      

4.BFC相關知識

定義:BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域,隻有 Block-level box 參 與, 它規定了内部的 Block-level Box 如何布局,并且與這個區域外部毫不相幹。

BFC布局規則 BFC 就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

  • BFC這個元素的垂直方向的邊距會發生重疊,垂直方向的距離由

    margin

    決定,取最大值
  • BFC 的區域不會與浮動盒子重疊(

    清除浮動原理

    )。
  • 計算 BFC 的高度時,浮動元素也參與計算。

哪些元素會生成 BFC

  • 根元素
  • float 屬性不為 none
  • position 為 absolute 或 fixed
  • display 為 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不為 visible

5.box-sizing是什麼

設定CSS盒模型為标準模型或IE模型。标準模型的寬度隻包括

content

,二IE模型包括

border

padding

box-sizing屬性可以為三個值之一:

  • content-box,預設值,隻計算内容的寬度,border和padding不計算入width之内
  • padding-box,padding計算入寬度内
  • border-box,border和padding計算入寬度之内

6.px,em,rem 的差別

px 像素(Pixel)。絕對機關。像素 px 是

相對于顯示器螢幕分辨率

而言的,是一個虛拟長度機關,是計算 機系統的數字化圖像長度機關,如果 px 要換算成實體長度,需要指定精度 DPI。 em 是相對長度機關,

相對于目前對象内文本的字型尺寸

。如目前對行内文本的字型尺寸未被人為設定, 則相對于浏覽器的預設字型尺寸。它會繼承父級元素的字型大小,是以并不是一個固定的值。 rem 是 CSS3 新增的一個相對機關(root em,根 em),使用 rem 為元素設定字型大小時,仍然是相對大小, 但

相對的隻是 HTML 根元素

7.CSS 引入的方式有哪些? link 和@import 的差別是?

有四種:内聯(元素上的style屬性)、内嵌(style标簽)、外鍊(link)、導入(@import) link和@import的差別:

  • link

    是XHTML标簽,除了加載CSS外,還可以定義RSS等其他事務;

    @import

    屬于CSS範疇,

    隻能加載CSS

  • link

    引用CSS時,在

    頁面載入時同時加載

    @import需要頁面網頁完全載入以後加載

  • link

    是XHTML标簽,

    無相容問題

    @import

    是在CSS2.1提出的,

    低版本的浏覽器不支援

  • link

    支援使用Javascript控制DOM去

    改變樣式

    ;而

    @import

    不支援。

8.流式布局與響應式布局的差別

流式布局 使用非固定像素來定義網頁内容,

也就是百分比布局

,通過盒子的寬度設定成百分比來根據螢幕的寬度來進 行伸縮,不受固定像素的限制,内容向兩側填充。

響應式開發 利用CSS3 中的 Media Query(媒介查詢),通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。

  • 超小螢幕(移動裝置) 768px 以下
  • 小屏裝置 768px-992px
  • 中等螢幕 992px-1200px
  • 寬屏裝置 1200px 以上

由于響應式開發顯得繁瑣些,一般使用第三方響應式架構來完成,比如 bootstrap 來完成一部分工作,當然也 可以自己寫響應式。

差別

第213天:12個HTML和CSS必須知道的重點難點問題12個HTML和CSS必須知道的重點難點問題

9.漸進增強和優雅降級

關鍵的差別是他們所側重的内容,以及這種不同造成的工作流程的差異

  • 優雅降級一開始就建構完整的功能,然後再針對低版本浏覽器進行相容。。
  • 漸進增強針對低版本浏覽器進行建構頁面,保證最基本的功能,然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

差別:

  • 優雅降級是從複雜的現狀開始,并試圖減少使用者體驗的供給
  • 漸進增強則是從一個非常基礎的,能夠起作用的版本開始,并不斷擴充,以适應未來環境的需要
  • 降級(功能衰減)意味着往回看;而漸進增強則意味着朝前看,同時保證其根基處于安全地帶

10.CSS隐藏元素的幾種方式及差別

display:none

  • 元素在頁面上将徹底消失,元素本來占有的空間就會被其他元素占有,也就是說它會導緻浏覽器的重排和重繪。
  • 不會觸發其點選事件

visibility:hidden

  • display:none

    的差別在于,

    元素在頁面消失後,其占據的空間依舊會保留着

    ,是以它

    隻會導緻浏覽器重繪

    而不會重排。
  • 無法觸發其點選事件
  • 适用于那些元素隐藏後不希望頁面布局會發生變化的場景

opacity:0

  • 将元素的透明度設定為0後,在我們使用者眼中,元素也是隐藏的,這算是一種隐藏元素的方法。
  • visibility:hidden

    的一個共同點是元素隐藏後依舊占據着空間,但我們都知道,設定透明度為0後,元素隻是隐身了,它依舊存在頁面中。
  • 可以觸發點選事件

設定height,width等盒模型屬性為0

  • 簡單說就是将元素的

    margin

    border

    padding

    height

    width

    等影響元素盒模型的屬性設定成 ,如果元素内有子元素或内容,還應該設定其

    overflow:hidden

    來隐藏其子元素,這算是一種奇技淫巧。
  • 如果元素設定了border,padding等屬性不為0,很顯然,頁面上還是能看到這個元素的,觸發元素的點選事件完全沒有問題。如果全部屬性都設定為0,很顯然,這個元素相當于消失了,即無法觸發點選事件。
  • 這種方式既不實用,也可能存在着着一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的,比如jquery的slideUp動畫,它就是設定元素的overflow:hidden後,接着通過定時器,不斷地設定元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom為0,進而達到slideUp的效果。

其他腦洞方法

  • 設定元素的position與left,top,bottom,right等,将元素移出至螢幕外
  • 設定元素的position與z-index,将z-index設定成盡量小的負數

11.簡述一下src與href的差別

href

是指向網絡資源所在位置,建立和目前元素(錨點)或目前文檔(連結)之間的連結,用于超連結。

src

是指向外部資源的位置,指向的内容将會嵌入到文檔中目前标簽所在位置;在請求

src

資源時會将其指向的資源下載下傳并應用到文檔内,例如js腳本,img圖檔和frame等元素。當浏覽器解析到該元素時,會暫停其他資源的下載下傳和處理,直到将該資源加載、編譯、執行完畢,圖檔和架構等元素也如此,類似于将所指向資源嵌入目前标簽内。這也是為什麼将js腳本放在底部而不是頭部。

12.行内元素有哪些?塊級元素有哪些? 空(void)元素有那些?

這個問題面試偶爾被問到的時候有點懵逼~~~平時沒在意。。。。

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系沒有内容的HTML元素,例如:br、meta、hr、link、input、img

繼續閱讀