首頁 >web前端 >html教學 >HTML與CSS重難點知識點總結

HTML與CSS重難點知識點總結

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

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

  1. 怎麼讓不定寬高的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 屬性的元素在標準流中不佔位置。

  1. 浮動與清除浮動
    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 不支持。

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

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

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

-
串流佈局
響應式開發

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

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

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

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

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

  1. ##漸進增強功能和優雅降級

    關鍵的差異是他們所專注的內容,以及這種不同造成的工作流程的差異

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

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

區別:

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

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

display:none


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

不會觸發其點擊事件


visibility:hidden

和d​​isplay: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 設定成盡量小的負數


    簡述src 與href 的區別
  1. href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用於超鏈接。

    src 是指向外部資源的位置,指向的內容將會嵌入到文件中目前標籤所在位置;在請求src 資源時會將其指向的資源下載並套用到文件內,例如js 腳本,img 圖片和frame 等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢,圖片和框架等元素也如此,類似於將所指向資源嵌入目前標籤內。這也是為什麼將 js 腳本放在底部而不是頭部。

  2. 行內元素有哪些?塊級元素有哪些? 空 (void) 元素有那些?
  3. 這個問題面試偶爾被問到的時候有點懵逼~~~ 平常沒在意。 。 。 。

    行內元素: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

  1. 怎麼讓不定寬高的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 屬性的元素在標準流中不佔位置。

  1. 浮動與清除浮動
    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 就可以了

詳細關於浮動的知識請參考這篇文章:
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 不支援。

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

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

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

-
串流佈局
響應式開發

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

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

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

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

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

  1. ##漸進增強功能和優雅降級

    關鍵的差異是他們所專注的內容,以及這種不同造成的工作流程的差異

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

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

區別:

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

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

display:none


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

不會觸發其點擊事件


visibility:hidden

和d​​isplay: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 設定成盡量小的負數


    簡述src 與href 的區別
  1. href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用於超鏈接。

    src 是指向外部資源的位置,指向的內容將會嵌入到文件中目前標籤所在位置;在請求src 資源時會將其指向的資源下載並套用到文件內,例如js 腳本,img 圖片和frame 等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢,圖片和框架等元素也如此,類似於將所指向資源嵌入目前標籤內。這也是為什麼將 js 腳本放在底部而不是頭部。

  2. 行內元素有哪些?塊級元素有哪些? 空 (void) 元素有那些?
  3. 這個問題面試偶爾被問到的時候有點懵逼~~~ 平常沒在意。 。 。 。

    行內元素: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

相关推荐:

总结8个关于html、css链接样式的实例代码

分享一个超全面的HTML、CSS知识点总结

在html、css和js代码中有关注释规范用法小结

以上是HTML與CSS重難點知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn