主頁 > 企業開發 > CSS基礎面試題查漏補缺

CSS基礎面試題查漏補缺

2020-09-11 20:00:12 企業開發

本文大部分問題來源：50道CSS基礎面試題（附答案），外加一些面經，

我對問題進行了分類整理，并給了自己的回答，大部分知識點都有專題鏈接（來源于本博客相關文章），用于自己前端CSS部分的查漏補缺，雖作為一個面試資料，但感覺也能幫助前端新手梳理CSS的知識點，

開胃餐-兩道常見考題
盒子模型
樣式與選擇器
CSS3
包含塊
BFC
中插小點
定位position
display與visibility
float
flexbox
overflow
回應式設計
CSS優化
應用

?開胃餐x2

用純CSS創建一個三角形的原理是什么？

CSS 邊框的基礎使用

圖1為border最普遍的用法，border: solid 10px #ffb6b9;，用多了你會不會就覺得border是由四個矩形邊框拼接而成，但其實是錯的，實際上，元素的border是由三角形組合而成，為了說明這個問題，我們繼續看：

圖2，我們為邊框四個方向設定不同顏色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大邊框寬度，

圖3，我們進一步將元素的寬高設為0，我們發現，此時元素由上下左右4個三角形組成，

為了實作一個三角形，那就很簡單了，我們只需將其它border邊的顏色設定為白色或者透明色即可

圖4，border-color: transparent transparent #bbded6;，設定上三角，左右三角為透明，那么我們就能看到一個圖4的三角形了，

.triangle {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent #bbded6;
}

水平垂直居中

個人常用的水平垂直居中方法，具體的可以戳鏈接我寫的很全，在本文里只提供思路，

水平垂直居中無非分成行內元素的居中和塊級元素的居中，最簡單的方法就是使用flex布局，但要注意瀏覽器兼容性問題，包括后面提到的transform，

行內元素的水平和垂直居中分別可以使用text-align: center;和line-height解決

塊級元素的水平和垂直居中又需要考慮這個元素的寬高是否固定，如果固定則定位和margin的auto屬性就能解決，例：

#container{
    width: 1000px;
    height: 1000px;
    position: relative;
}

#center{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

還有一種方法，拿水平居中來舉例：

step1：left:50%; 將子元素定位到父元素1/2寬的位置

step2：margin-left:-1/2自身寬 將子元素向左移動自身寬度的一半

當寬高不固定的時候，也可以使用transform:translateX(-50%)來實作step2，

由于使用了float后，浮動元素脫離了普通檔案流，因此塊級元素常用的margin:auto無效了，改用定位的方法（即上面提到的step1、step2）

好，正文開始，

?盒子模型

介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

每一個盒子都被劃分為四個區域：內容區、內邊距區、邊框區、外邊區，

樣式設定里with和height指的內容區的寬高，

標準盒子模型：padding、border和margin不會影響content的尺寸，但是會增加元素框的總尺寸，

IE盒子模型：內容區大小包含了padding、border，

box-sizing屬性？

用來控制元素的盒子模型的決議模式，默認值為content-box

context-box：聯想W3C的標準盒子模型，元素盒子的width和height屬性指的是內容盒子，這時候添加邊框和內邊距不會影響內容盒子的大小，但會導致整個元素盒子變大，

border-box：聯想IE傳統盒子模型，width和height屬性的值將會包含padding和border，從視覺上規定了箱子的大小，

?樣式與選擇器

為什么要初始化CSS樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異，

CSS 前處理器

用的最多的：Less、Scss、Stylus

CSS前處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函式等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處，

CSS優先級演算法如何計算？

必看-一定要搞懂的選擇器優先級和權重問題

優先級：!important > style > id > class、屬性、偽類 > 元素、偽元素

  1. !important宣告的樣式優先級最高，如果沖突再進行計算，

  2. 如果優先級相同，則選擇最后出現的樣式，

  3. 繼承得到的樣式的優先級最低，

CSS選擇器有哪些？

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）

CSS那些屬性可以繼承？

CSS屬性速覽（含版本、繼承性和簡介）

可繼承的屬性：visibility、color、cursor、zoom、direction（特殊：<a>標簽的字體顏色不能被繼承）

字體全部都可以繼承：font、font-style、font-variant、font-weight、font-size、font-family、font-stretch

文本除了vertical-align，其它都可繼承：text-align、text-justify、text-indent、line-height、word-wrap等等

文本裝飾：text-underline-position、text-shadow

li相關：list-style、list-style-image、list-style-position、list-style-type

不可繼承的樣式：定位、布局、尺寸、內邊距、外邊距、背景、邊框相關等等

::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用

css偽元素與偽類思維導圖

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的，起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，單冒號表示偽類，偽元素的語法被修改成使用雙冒號，成為::before ::after，偽元素并不存在與dom中，只存在于頁面之中，

::after用來創建一個偽元素，作為已選中元素的最后一個子元素，通常會配合content屬性來為該元素添加裝飾內容，這個虛擬元素默認是行內元素，

::before 創建一個偽元素，其將成為匹配選中的元素的第一個子元素，

瀏覽器是怎樣決議CSS選擇器的？

瀏覽器在碰到HTML中指向CSS檔案的鏈接時，會獲取并決議CSS檔案，CSS檔案會被瀏覽器轉為CSS物件模型，不僅是外部CSS，內部style元素或行內style屬性中的CSS也會被決議并添加到這個物件模型中，這個物件模型事宜個樹形結構，包含頁面中樣式的層次結構，

每個CSS選擇符都會匹配一個DOM節點，然后瀏覽器會基于層疊、繼承和特殊性來計算每個DOM節點的最終樣式，

瀏覽器『從右往左』決議CSS選擇器

?CSS3

CSS3新增偽類有那些?

CSS-偽元素和偽類（思維導圖）

p:first-of-type 選擇屬于其父元素的第一個出現的p
p:last-of-type 選擇屬于其父元素最后一個出現的p

p:only-of-type 選擇屬于其父元素唯一的p元素
p:only-child 選擇屬于其父元素的唯一子元素（沒有任何兄弟元素的p元素）

p:nth-child(2) 選擇屬于其父元素的第二個子元素

:enabled :disabled 表單控制元件的禁用狀態，
:checked 單選框或復選框被選中，

CSS3有哪些新特性？

CSS3參考手冊屬性串列（鏈接中紫色鏈接表示該屬性在CSS3有修改或者增加了新的屬性值；橙色鏈接表示該屬性是CSS3新增屬性 ）

下面列出容易記的幾個

  1. 媒體查詢（@media (min-width:600px)）
  2. 嵌入web字體（@font-face）
  3. 過渡（transition）與影片（animation）
  4. 【陰影】box-shadow
  5. 【邊框】創建圓角（border-radius）、邊框圖片（border-image）
  6. 【背景】背景圖片尺寸（background-size）、背景圖片定位（background-origin）、背景裁剪（background-clip）、多重背景（background-image:url(1.jpg),url(2.jpg);）
  7. 【文字】允許長單詞換行（word-wrap:break-word）、文字陰影（text-shadow）
  8. 【顏色】rgba和透明度opacity
  9. 【漸變】線性漸變（gradient）
  10. 【布局】flex、grid、多欄布局
  11. 【盒模型】box-sizing

?包含塊

CSS基礎一定要看的包含塊containing block

包含塊的確定

確定一個元素的包含塊的程序完全依賴于這個元素的 position 屬性：

  1. static、relative、sticky：包含塊可能由它的最近的祖先塊元素的內容區的邊緣組成，也可能會建立格式化背景關系(比如說 table container, flex container, grid container, 或者是block container 自身)，

  2. absolute： 包含塊就是由它的最近的 position 的值不是 static 的祖先元素的內邊距區的邊緣組成，

?注意以上兩個，一個是內容區、一個是內容邊距區

  1. fixed：在連續媒體的情況下包含塊是視窗視圖（viewport）,分頁媒體下的情況下包含塊是分頁區域(page area)，

如果position值是absolute或fixed，包含塊也可能是由滿足以下條件的最近父級元素的內邊距區的邊緣組成的：

注意：根元素()所在的包含塊是一個被稱為初始包含塊的矩形，

元素豎向的百分比設定是相對于容器的高度嗎？

如果某些屬性被賦予一個百分值的話，它的計算值是由這個元素的包含塊計算而來的，這些屬性包括盒模型屬性和偏移屬性：

  1. height、top、bottom：通過包含塊的 height 的值，如果包含塊的 height 值會根據它的內容變化，而且包含塊的 position 屬性的值被賦予 relative 或 static ，那么，這些值的計算值為 auto，

  2. width、left、right、padding、margin 這些屬性由包含塊的 width 屬性的值來計算它的百分值，
    這里特別強調padding和margin講的是上下左右四個都是根據包含塊的width

?BFC

可見格式化模型BFC與應用

對BFC規范(塊級格式化背景關系：block formatting context)的理解？

BFC指的是塊級格式化背景關系，簡單的來說，BFC就是創建一個div盒子或者給已存在的盒子激活BFC，盒子內部的元素布局不影響盒子外部的元素，也就是所謂的相互隔絕，互不影響，

常見的創建BFC方式

  1. float：none以外的屬性值，如：left 、 right
  2. overflow：visible以外的屬性值，如：hidden、auto 、 scroll
  3. position屬性值為：absolute、fixed（只有這兩個可以）
  4. dispaly屬性值為：inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了

BFC應用

詳細解決方案戳上面給的鏈接，

  1. 解決margin重疊
  2. 解決使用float時浮動元素和非浮動元素重疊（也是一種清除浮動的方法啦）
  3. 解決使用float時容器高度塌陷

?中插小點

你對line-height的理解？

line-height指的是行盒子的總高度，更通俗的叫法是行間距，行盒子的整體行高減去font-size，得到的值平分，就是里面文本的上下空白位置，

可以給line-height設定像素值、百分比值或em值，但要注意body元素的所有子元素都會繼承line-heoght的計算值，但無單位的值就不會這樣，因此，設定，line-height:1.5，那么子元素繼承的是一個系數，永遠與自己的font-size成比例，一般取值在1.2~1.5范圍內，

將行高設定為height的值，可以實作文本的垂直居中，

手動寫影片，最小時間間隔？

17ms，紅寶書原話：

大多數電腦顯示幕的重繪頻率是60HZ，大概相當于每秒重繪60次，大多數瀏覽器都會對重繪操作加以限制，不超過顯示幕的重繪頻率，因為即使超過那個頻率用戶體驗也不會有提升，因此，最平滑影片的最佳回圈間隔是1000ms/60，大概相當于17ms，以這個回圈間隔重繪的影片是最平滑的，因為這個速度是最接近瀏覽器的最高限速，為了適應17ms的回圈間隔，多重影片可能需要加以節制，以便不會完成太快，

網頁中應該使用奇數還是偶數的字體?

偶數，

  1. 相對來說偶數字號比較容易和頁面中其他部分的字號構成一個比例關系，
  2. 低版本的瀏覽器ie6會把奇數字體強制轉化為偶數，即13px渲染為14px，
  3. Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏，

常見的兼容性問題

CSDN瀏覽器兼容問題，這個人寫的很全，我下面列幾個我能記住的，??

  1. 不同瀏覽器的標簽默認的margin和padding不一樣，

    *{margin:0;padding:0;}

  2. 表單元素行高不一致

    給表單元素添加 vertical-align:middle

  3. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示
    針對谷歌瀏覽器內核，加webkit前綴，用transform:scale()這個屬性進行縮放，經測驗，發現對行內元素無效

  4. 圖片添加超鏈接，在IE10及以下版本中會有藍色的邊框：

    img{border}

讓頁面里的字體變清晰，變細用CSS怎么做？

-webkit-font-smoothing

在window系統下沒有起作用，但是在IOS設備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑，

?定位position

position的值？

  1. absolute 絕對定位：脫離檔案流，相對于最近的非static定位祖先定位，
  2. fixed 固定定位：脫離檔案流，相對于螢屏視口（viewport）的位置來定位，元素位置在滾動時不變，

BFC中，絕對定位和固定定位的元素設定外邊距（margin），不會與其他邊距合并，

  1. relative相 對定位：不脫離檔案流，相對于normal flow中的原位置來定位，原來位置保留，
  2. static 默認值：此時 top、right、bottom、left 屬性無效，
  3. center：脫離檔案流，同page和sticky，幾個瀏覽器都不支持這三個CSS新特性，

定位元素的containing block計算方式跟正常流有什么不同？

見上面包含塊內容，

position跟display、overflow、float這些特性相互疊加后會怎么樣？

position屬性規定元素的定位型別；display屬性規定元素應該生成的框的型別；float屬性是一種布局方式，定義元素在哪個方向浮動， overflow屬性定義溢位元素內容區的內容會如何處理，

類似于優先級機制：position：absolute/fixed優先級最高，有它在時，float不起作用，display值需要調整，

額外補充：float意味著使用塊布局，它在某些情況下修改display 值的計算值 ，

position:fixed;在android下無效怎么處理？

原因在于移動瀏覽器有兩個視口：可視視口和布局視口，瀏覽器不知道相對于哪個視口定位固定元素，

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

?display與visibility

display有哪些值？說明他們的作用?

  1. none：隱藏物件，與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間，
  2. inline：指定物件為行內元素，
  3. inline-block：指定物件為行內塊元素，
  4. block：指定物件為塊級元素，
  5. flex：指定物件為彈性盒，

display:none與visibility：hidden的區別？

  1. dispaly:none 不為被隱藏的物件保留其物理空間，

    visibility：hidden 保留被隱藏物件的物理空間，

  2. dispaly:none 該元素以及它的所有后代元素都會隱藏，給后代元素設定非none也沒用

    visibility具有繼承性，給父元素設定visibility:hidden;子元素也會繼承這個屬性，但是如果重新給子元素設定visibility: visible,則子元素又會顯示出來，這個和display: none有著質的區別

  3. 瀏覽器渲染的時候會涉及到重繪與回流的問題，前者隱藏后脫離檔案流，不占據頁面空間引發回流，后者隱藏后還占用空間，只引起重繪，因此優化的時候會有那么一條：建議用visibility:hidden替換display:none

  4. visibility: hidden不會影響計數器的計數，雖然讓一個元素不見了，但是其計數器仍在運行，這和display: none完全不一樣，這里我寫了代碼測驗，覺得不對

  5. CSS3的transition支持visibility屬性，但是并不支持display，由于transition可以延遲執行，因此可以配合visibility使用純css實作hover延時顯示效果，提高用戶體驗，

inline、block、inlineblock區別

inline特點

  1. 行內元素會在一條直線上排列，在同一行從左至右水平排列，直到一行排不下，才會換行，
  2. 行內元素設定寬、高、margin和padding的上下無效（豎直無效），
  3. 行內元素設定line-height，margin左右和padding的左右有效（水平有效），
  4. 行內元素的寬高隨標簽里的內容而變化，

block 特點

  1. 獨占一行，多個block元素另起一行，默認情況下，block元素寬度自動填滿其父元素寬度
  2. block元素可以設定width,height屬性，塊元素即使設定了寬度,仍然是獨占一行，
  3. block元素可以設定margin和padding屬性，

inline-block 特點

讓block元素不再獨占一行，多個block元素可以同排一行，且元素具有block的屬性，可設定寬高

display:inline-block 顯示間隙

在CSS布局中，如果我們想要將一些元素在同一行顯示，其中的一種方法就是把要同行顯示的元素設定display屬性為inline-block，但是你會發現這些同行顯示的inline-block元素之間經常會出現一定的空隙，這就是“換行符/空格間隙問題”，

具體解決辦法看下一個問題，

li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是<li>換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度，

方法一：既然是因為<li>換行導致的，那就可以將<li>代碼全部寫在一排（但是可讀性不高），

方法二：既然是空格占一個字符的寬度，那我們索性就將<ul>內的字符尺寸直接設為0， ul{font-size:0px;}，

方法三：消除ul中的間隔 ul{letter-spacing: -5px;}，恢復li中的間隔 ul li{letter-spacing: normal;}，

方法四：使用浮動，

CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區別？

對于一般的元素，它的表現跟hidden是一樣的，位置還留著只是內容被隱藏了，

對于table相關的元素，例如table行，table group，table列，table column group，它的表現跟display: none一樣，它們占用的空間也會釋放，

  1. IE6及更早版本不支持，
  2. 在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區別，（我在chrome里試，是和下面列出的瀏覽器一樣的，因此刪掉這句話）
  3. 在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置，及display: none效果，

?float

一定要看的float的幾要素

元素浮動特點

  1. 浮動盒子會脫離文檔案流，不會再占用空間，
  2. 非浮動元素幾乎當浮動盒子根本不存在一樣該怎么布局怎么布局不會被影響
  3. 非浮動元素中的文本內容會記住浮動元素的大小，并在排布時避開它,為其留出回應的空間

清除浮動的方式

清除浮動本質：瀏覽器在非浮動元素的上方添加足夠大的外邊距，從而將元素的上邊沿垂直向下移動到浮動元素的下方，

清除浮動的兩大方式：

  1. 給元素應用clear屬性，用于指定盒子的哪個一側不應該緊挨著浮動盒子，如果要給已清除浮動的元素添加外邊距，除非超過瀏覽器自動加的值，否則不會有什么效果，

    /* 創建一個偽元素，作為已選中元素的最后一個子元素 */
.media-block::after {
    content: "";
    display: block;
    clear: both;
}

  2. 給需要清除浮動的元素觸發BFC

    這點具體看上面BFC給的鏈接中的示例2，

解決高度塌陷

原因：浮動盒子會脫離檔案流，不會再占用空間， 因此如果父元素沒有高度的話，浮動元素不會給它撐開，

解決方案：為父級元素設定高或者為父級元素觸發BFC，

這點具體看上面BFC給的鏈接中的示例3，

設定元素浮動后，該元素的display值是多少？

由于float意味著使用塊布局，它在某些情況下修改display 值的計算值：

?flexbox

內容布局 - Flexbox

請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？

flex布局非常靈活，任一容器都可以指定為flex布局，只要設定dispaly即可， 該布局模型的目的是提供一種個更加高效的方式來對容器的條目進行布局、對齊和分配空間，已經得到主流瀏覽器較新版本的廣泛支持，要支持IE10及更早版本的WebKit瀏覽器需要加前綴，

可以控制的彈性項如下：

  1. 大小，基于內容可用空間

  2. 流動方向，水平還是垂直，正向還是反向

  3. 兩個軸上的對齊與分布

  4. 順序，與源代碼中的順序無關

缺點：對大型專案的支持不如bootstrap好，手機上兼容性有一定問題，

適用場景：

  1. 水平垂直居中
  2. 網站底部標簽串列的布局，可以更好的控制上面列出的彈性項，

?overflow

CSS屬性overflow屬性定義溢位元素內容區的內容會如何處理?

  1. visible：對溢位內容不做處理，內容可能會超出容器，
  2. hidden：隱藏溢位容器的內容且不出現滾動條，
  3. scroll：隱藏溢位容器的內容，溢位的內容將以卷動滾動條的方式呈現，
  4. auto：當內容沒有溢位容器時不出現滾動條，當內容溢位容器時出現滾動條，按需出現滾動條，此為body物件和textarea的默認值，

text-overflow

  1. clip： 當行內內容溢位塊容器時，將溢位部分裁切掉，
  2. ellipsis： 當行內內容溢位塊容器時，將溢位部分替換為（...），

?回應式設計

回應式設計、基本原理、兼容低版本的IE

回應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本，

基本原理是通過媒體查詢檢測不同的設備螢屏尺寸做處理， 頁面頭部必須有meta宣告的viewport，

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">

@media (max-width: 767px){}

兼容，引入Respond.js讓IE6-8支持CSS3 Media Query

自適應網站會根據你使用的訪問設備來自動調教解析度使得你看的頁面相同

移動端的布局用過媒體查詢

@media (max-width: 767px){}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=https://www.cnblogs.com/L-xmin/p/"mystylesheet.css">

only關鍵字，目的在于避免舊版本瀏覽器誤解媒體查詢，

?優化

CSS優化、提高性能的方法有哪些？

掘金 - CSS性能優化的8個技巧

主要從檔案大小、影響渲染的因素（回流與重繪）兩方面考慮，

style標簽寫在body后與body前有什么區別？

將樣式表放在檔案底部會導致在瀏覽器中阻止內容逐步呈現，為避免當樣式變化時重繪頁面中的元素，瀏覽器會阻止內容逐步呈現，

在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

png、jpg、gif 這些圖片格式解釋一下，分別什么時候用，了解webp

以下來源：前端性能優化原理與實踐-圖片篇

PNG關鍵詞：無損壓縮、質量高、體積大、支持透明
PNG具有比 JPG 更強的色彩表現力，對線條的處理更加細膩，對透明度有良好的支持，因此主要用它來呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等，復雜的、色彩層次豐富的圖片，用 PNG 來處理的話，成本會比較高，我們一般會交給 JPG 去存盤，

JPG關鍵字：有損壓縮、體積小、加載快、不支持透明：
JPG 最大的特點是有損壓縮，這種高效的壓縮演算法使它成為了一種非常輕巧的圖片格式，另一方面，即使被稱為“有損”壓縮，JPG的壓縮方式仍然是一種高質量的壓縮方式，
JPG 適用于呈現色彩豐富的圖片，在我們日常開發中，JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現，

GIF一種位圖檔案格式，以8位色重現真色彩的影像，可以實作影片效果.

WebP關鍵字：年輕的全能型選手
是 Google 專為 Web 開發的一種旨在加快圖片加載速度的圖片格式，它支持有損壓縮和無損壓縮，
WebP 像 JPEG 一樣對細節豐富的圖片信手拈來，像 PNG 一樣支持透明，像 GIF 一樣可以顯示動態圖片——它集多種圖片檔案格式的優點于一身，但兼容性差呀

闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的background-image、background-position、background-repeat的組合進行背景定位，訥訥個很好的減少http請求，從而大大提高頁面的性能，注意，CSSS prites能減少圖片的位元組數，

.sitelogo {
    width: 82px;
    height: 54px;
    background-image: url(./iamges/sprites.png);
    background-position: -188px -808px;
    background-repeat: no-repeat;
}

?應用

滿屏品字布局?

涉及知識點：

  1. 解決上下兩行占總高50%
  2. 上面的‘口’居中布局，margin:0 auto
  3. 下面兩個‘口’左右布局，float:left;width:50%

無非就是綜合了各種布局的使用，代碼放于文末

有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

思路：在div上方留出100px的padding，想方設法將A覆寫掉這100px的padding，

三種方法，代碼放于文末，

視差滾動效果

李文楊 css實作視差滾動效果

重點就是background-attachment: fixed;

全屏滾動的原理是什么？用到了CSS的哪些屬性？

以下是原作者寫的，感覺有點懂了，但還需要自己去敲敲代碼，有時間補吧，

原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實作

屬性：overflow：hidden；transition：all 1000ms ease；

應用代碼

滿屏品字布局

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滿屏品字布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 重點是html的height也得是100% */
        html,
        body {
            height: 100%;
        }

        .header {
            left: 50%;
            height: 50%;
            width: 50%;
            background-color: #fae3d9;
            margin: 0 auto;
        }

        .main {
            height: 50%;
            width: 100%;
        }

        .main .left {
            float: left;
            height: 100%;
            width: 50%;
            background-color: #bbded6;
        }

        .main .right {
            float: left;
            height: 100%;
            width: 50%;
            background-color: #8ac6d1;
        }
    </style>
</head>

<body>
    <!-- header水平居中 -->
    <div class="header">
    </div>
    <!-- main中的元素左右布局 -->
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度(三種方案)</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        /*方案一*/
        .outer {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
        }

        .A {
            height: 100px;
            margin: -100px 0 0;
            background: #BBE8F2;
        }

        .B {
            height: 100%;
            background: #D9C666;
        }

        /*方案二*/
        .outer {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }

        .A {
            height: 100px;
            background: #BBE8F2;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .B {
            height: 100%;
            background: #D9C666;
        }

        /*方案三*/
        .outer {
            height: 100%;
            position: relative;
        }

        .A {
            height: 100px;
            background: #BBE8F2;
        }

        .B {
            background: #D9C666;
            width: 100%;
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
    </div>
</body>

</html>

視差滾動效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>視差滾動</title>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            padding: 0
        }

        .box {
            height: 100%;
            position: relative;
            z-index: 1;
        }

        .flowImage {
            position: relative;
            height: 500px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            z-index: 1;
            background-attachment: fixed; //劃重點！！！
        }

        .flowImage>p {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 10%;
            color: #fff;
            font-size: 30px;
            transform: translate(-10%, -50%);
        }

        .bg1 {
            background-image: url(images/1.jpg);
        }

        .bg2:nth-child(2) {
            background-image: url(images/2.jpg);
        }

        .bg3:nth-child(3) {
            background-image: url(images/3.jpg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="flowImage fixed-bg bg1">
            <p>
                這個西紅柿死了嗎<br>
                可是它的顏色<br>
                還像鮮花一樣奔放
            </p>
        </div>
        <div class="flowImage fixed-bg bg2">
            <p>為了跳到天上<br>
                月亮先爬到樹上，
            </p>
        </div>
        <div class="flowImage fixed-bg bg3">
            <p>
                晚上<br>
                我打著手電筒散步<br>
                累了就拿它當拐杖<br>
                我拄著一束光
            </p>
        </div>
    </div>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7080.html

標籤：Html/Css

上一篇：（轉自MDN）CSS基礎一定要看的包含塊（containing block）

下一篇：CSS實作水平居中的幾種方法

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂