(2)如何清除浮動?
專題推薦:2020年CSS面試題彙總(最新)
CSS3中的盒子模型有以下兩種:標準盒模型、IE盒模型
標準盒模型和IE盒模型的差別就是:標準盒模型的寬高指的是內容的寬高,而IE盒模型的寬高指的是內容,內邊距,邊框的總和。
在CSS3中,可以使用box-sizeing:border-box
將普通盒模型轉換為IE盒模型。有時候我們已經設定了一個盒子的寬高,但是,如果想要改變border
,這樣盒子的大小就會改變,我們就可以將其轉換為IE盒模型,就不用每次計算盒子內容大小了。
在盒子模型中
box-sizeing:content-box
表示標準盒子模型(預設值)box-sizeing:border-box
表示IE盒模型(也就是怪異盒子模型)除此之外,還有:Flex彈性伸縮盒模型
這兩個屬性都是讓元素隱藏不可見
差異:
(1)在渲染樹中
會讓元素完全中渲染樹中消失,渲染的時候不會佔據任何空間;
不會讓元素從渲染樹中消失,渲染的元素還會佔據對應的空間,只是內容不可見
是非繼承屬性,他的子孫節點會隨著父節點從渲染樹消失,透過修改子孫節點的屬性也無法顯示。
是繼承屬性,子孫節點消失是由於繼承了
hidden,透過設定
visibility:visible可以讓子孫節點顯示。
display通常會造成文件的重排,但是修改
visibility屬性只會造成本元素的重繪
display:none的內容不會被讀取,設定為
visibility:hidden的內容會被讀取。
visibility:hidden
概念:
精靈圖就是將多個小圖片拼接在一個圖片中,使用的時候透過background-position元素尺寸調整需要顯示的背景圖案。
優點:
#缺點:#
屬性值 | 概述 |
---|---|
#absolute | 生成絕對定位的元素,相對於static定位以外的一個父元素進行定位 |
relative | 產生相對定位的元素,相對於其原來的位置進行定位 |
fixed | 產生絕對定位的元素,相對於瀏覽器視窗進行定位 |
static | 預設值,沒有定位,元素出現在正常的文件流中 |
inherit | 規定從父元素繼承position屬性的值 |
(1)GIF
適用於:色彩簡單的logo,icon,線框圖,簡單的動畫
(2)JPG
適用於:色彩豐富的圖片、漸層影像
(3)PNG
(4)WEBP
適用於:支援webp的APP或網頁
格式 | #優點 | 缺點 | 適用場景 |
---|---|---|---|
gif | 檔案小,支援動畫、透明,無相容性問題 | 只支援256種顏色 | 色彩簡單的logo、icon、動圖 |
jpg | 色彩豐富,文件小 | 有損壓縮,重複儲存圖片品質下降明顯 | 顏色豐富的圖片/漸層影像 |
png | 無損壓縮,支援透明,簡單圖片尺寸小 | 不支援動畫,色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
檔案小,支援有損和無損壓縮,支援動畫、透明 | 瀏覽器相容性不好 | 支援webp格式的app和webview |
#格式 | |
---|---|
#p | |
#myclassname | |
#myid | |
h1 p | |
ul>li | |
li a |
如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p {margin-top:50px;}
對於選擇器的優先權:
需要注意的是:
屬性繼承性:
元素設定為浮動之後,display會自動變成block。
浮動造成的問題如下:
清除浮動的方式如下:
height
屬性clear:both
樣式overflow:hidden
或overflow:auto
CSS3中的盒子模型有以下兩種:標準盒模型、IE盒模型
標準盒模型與IE盒模型的差別就是:標準盒模型的寬高指的是內容的寬高,而IE盒模型的寬高指的是內容,內邊距,邊框的總和。
在CSS3中,可以使用box-sizeing:border-box
將普通盒模型轉換為IE盒模型。有時候我們已經設定了一個盒子的寬高,但是,如果想要改變border
,這樣盒子的大小就會改變,我們就可以將其轉換為IE盒模型,就不用每次計算盒子內容大小了。
在盒子模型中
box-sizeing:content-box
表示標準盒子模型(預設值)box-sizeing:border-box
表示IE盒模型(也就是怪異盒子模型)除此之外,還有:Flex彈性伸縮盒模型
這兩個屬性都是讓元素隱藏不可見
差異:
(1)在渲染樹中
會讓元素完全中渲染樹中消失,渲染的時候不會佔據任何空間;
不會讓元素從渲染樹中消失,渲染的元素還會佔據對應的空間,只是內容不可見
是非繼承屬性,他的子孫節點會隨著父節點從渲染樹消失,透過修改子孫節點的屬性也無法顯示。
是繼承屬性,子孫節點消失是由於繼承了
hidden,透過設定
visibility:visible可以讓子孫節點顯示。
display通常會造成文件的重排,但是修改
visibility屬性只會造成本元素的重繪
display:none的內容不會被讀取,設定為
visibility:hidden的內容會被讀取。
visibility:hidden
概念:
精灵图就是将多个小图片拼接在一个图片中,使用的时候通过background-position
元素尺寸调节需要显示的背景图案。
优点:
缺点:
屬性值 | 概述 |
---|---|
#absolute | 生成絕對定位的元素,相對於static定位以外的一個父元素進行定位 |
relative | 產生相對定位的元素,相對於其原來的位置進行定位 |
fixed | 產生絕對定位的元素,相對於瀏覽器視窗進行定位 |
static | 預設值,沒有定位,元素出現在正常的文件流中 |
inherit | 規定從父元素繼承position屬性的值 |
(1)GIF
適用於:色彩簡單的logo,icon,線框圖,簡單的動畫
(2)JPG
適用於:色彩豐富的圖片、漸層影像
(3)PNG
(4)WEBP
適用於:支援webp的APP或網頁
格式 | #優點 | 缺點 | 適用場景 |
---|---|---|---|
gif | 檔案小,支援動畫、透明,無相容性問題 | 只支援256種顏色 | 色彩簡單的logo、icon、動圖 |
jpg | 色彩豐富,文件小 | 有損壓縮,重複儲存圖片品質下降明顯 | 顏色豐富的圖片/漸層影像 |
png | 無損壓縮,支援透明,簡單圖片尺寸小 | 不支援動畫,色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
檔案小,支援有損和無損壓縮,支援動畫、透明 | 瀏覽器相容性不好 | 支援webp格式的app和webview |
#格式 | |
---|---|
#p | |
#myclassname | |
#myid | |
h1 p | |
ul>li | |
li a |
如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器.例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p {margin-top:50px;}
對於選擇器的優先權:
需要注意的是:
屬性繼承性:
元素設定為浮動之後,display會自動變成block。
浮動造成的問題如下:
清除浮動的方式如下:
height
屬性clear:both
樣式overflow:hidden
或overflow:auto
#相關教學推薦:CSS影片教學
以上是七題重要CSS面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章!