首頁 > 文章 > web前端 > HTML與CSS重難點知識點總結

HTML與CSS重難點知識點總結

小云云原創: 2018-03-02 10:33:171890瀏覽

本文主要和大家分享HTML和CSS重難點知識點總結，希望能幫助大家。

怎麼讓不定寬高的p，垂直水平居中?
使用Flex

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

使用CSS3 transform

父盒子設定: position:relative
p 設定: transform: translate(-50% ，-50%);position: absolute;top: 50%;left: 50%;

使用display:table-cell 方法

父盒子設定: display:table-cell; text -align:center;vertical-align:middle;
p 設定: 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.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：給父級 p 定義高度
原理：給父級 p 定義固定高度（height），能解決父級 p 無法取得高度得問題。
優點：程式碼簡潔
缺點：高度被固定死了，是適合內容固定不變的模組。（不建議使用）
方法二：使用空元素，如

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.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 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由於響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，例如 bootstrap 來完成一部分工作，當然也可以自己寫響應式。
區別

-
串流佈局
響應式開發

開發方式
行動Web 開發+ PC 開發
響應式開發

應用程式場景
通常在已經有PC 端網站，開發移動的時候只需要單獨開發行動端
針對一些新建的網站，現在要求適配行動端，所以就一套頁面相容各種終端

開發
正對性強，開發效率高
相容於各種終端，效率低

適合
只適合移動設備，pad 上體驗相對較差
可以適配各種終端機

效率
程式碼簡潔，載入快
程式碼相對複雜，載入慢

##漸進增強功能和優雅降級
關鍵的差異是他們所專注的內容，以及這種不同造成的工作流程的差異

優雅降級一開始就建立完整的功能，然後再針對低版本瀏覽器進行相容。。

漸進增強針對低版瀏覽器進行建置頁面，確保最基本的功能，然後再針對進階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

區別：

優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給

漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並且不斷擴充，以適應未來環境的需要
降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶
##10.CSS隱藏元素的幾種方式及區別

display:none

元素在頁面上將徹底消失，元素本來佔有的空間就會被其他元素佔有，也就是說它會導致瀏覽器的重排和重繪。

不會觸發其點擊事件

visibility:hidden

和display:none 的區別在於，元素在頁面消失後，其佔據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。

無法觸發其點擊事件

適用於那些元素隱藏後不希望頁面佈局會發生變化的場景

opacity:0

將元素的透明度設為0 後，在我們使用者眼中，元素也是隱藏的，這算是一種隱藏元素的方法。

和 visibility:hidden 的一個共同點是元素隱藏後依舊佔據著空間，但我們都知道，設定透明度為 0 後，元素只是隱身了，它依舊存在頁面中。

可以觸發點擊事件

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

#簡單說就是將元素的margin，border，padding，height 和width 等影響元素盒模型的屬性設定成0，如果元素內有子元素或內容，也應該設定其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 設定成盡量小的負數

href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
src 是指向外部資源的位置，指向的內容將會嵌入到文件中目前標籤所在位置；在請求src 資源時會將其指向的資源下載並套用到文件內，例如js 腳本，img 圖片和frame 等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入目前標籤內。這也是為什麼將 js 腳本放在底部而不是頭部。
這個問題面試偶爾被問到的時候有點懵逼~~~ 平常沒在意。。。。
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
區塊級元素：p、ul、li、dl、dt、dd、p、h1- h6、blockquote
空元素：即係沒有內容的HTML 元素，例如：br、meta、hr、link、input、img

怎麼讓不定寬高的p，垂直水平居中?
使用Flex

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

#使用CSS3 transform

父盒子設定: position:relative
p 設定: transform: translate( -50%，-50%);position: absolute;top: 50%;left: 50%;

使用display:table-cell 方法

父盒子設定: display:table- cell; text-align:center;vertical-align:middle;
p 設定: display:inline-block;vertical-align:middle;

2.position 幾個屬性的作用
position的常見四個屬性值: relative，absolute，fixed，static。一般都要配合 “left”、”top”、”right” 以及 “bottom” 屬性使用。

浮動與清除浮動
3.1 浮動相關知識
float 屬性的取值：

left：元素向左浮動。
right：元素向右浮動。
none：預設值。元素不浮動，並會顯示在文字中出現的位置。

浮動的特性：

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

重疊問題

(.clear{clear:both})
原理：增加一對空的 p 標籤，利用 css 的 clear:both 屬性清除浮動，讓父級 p 能夠取得高度。
優點：瀏覽器支援好
缺點：多出了很多空的 p 標籤，如果頁面中浮動模組多的話，就會出現很多的空置 p 了，這樣感覺視乎不是太令人滿意。（不建議使用）
方法三：讓父級 p 也一併浮起來
這樣做可以初步解決當前的浮動問題。但也讓父級浮動了，又會產生新的浮動問題。不建議使用
方法四：父級 p 定義 display:table
原理：將 p 屬性強制變成表格
優點：不解
缺點：會產生新的未知問題。（不建議使用）
方法五：父元素設定 overflow：hidden、auto;
原理：這個方法的關鍵在於觸發了 BFC。在IE6 中還需要觸發hasLayout（zoom：1）
優點：程式碼簡介，不存在結構和語義化問題
缺點：無法顯示需要溢出的元素（也不太建議使用）
方法六：父級p 定義偽類別: after 和zoom
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
原理：IE8 以上和非IE 瀏覽器才支援: after，原理和方法2 有點類似，zoom(IE 轉有屬性) 可解決ie6,ie7 浮動問題
優點：結構和語意化完全正確, 程式碼量也適中，可重複利用率（建議定義公共類別）
缺點：程式碼不是非常簡潔（極力建議使用）
經益求精寫法
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;} 照顧IE6，IE7 就可以了

詳細關於浮動的知識請參考這篇文章：
http://luopq.com/2015/ 11/08/CSS-float/

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 不支援。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。