目錄

• 選擇器的權重和優先級
• 盒模型
• • 標準盒模型和替代模型（IE）
  • 塊級盒子與內聯盒子
• 隱藏一個元素
• Position
• • 文檔流
  • 定位
  • z-index
• 浮動
• • 如何清除浮動
• 包含塊與控制框
• BFC
• • 外邊距折疊（合并外邊距與BFC、margin疊加）
  • margin塌陷
  • BFC 可以包含浮動的元素（清除浮動）
  • BFC 解決文字環繞的問題
• 層疊上下文
• • 層疊水平
  • 層疊上下文的特性
• Display
• • Flex布局
  • Grid布局
• 各種居中
• • 塊級元素水平居中（左右居中）
  • 塊級元素垂直居中
  • • 負外邊距
    • 絕對居中
    • 容器內居中
    • • **視區內居中**
    • 變形（Transform）
    • flex
  • 塊中不定行的文字垂直居中
• 三列布局
• 偽類和偽元素
• CSS屬性繼承
• CSS3
• • Transform

前言，筆者目前已收到網易的offer，但由于學校與大環境的影響，目前拒掉了offer準備考研中，現在將面試準備的筆記上傳到博客供大家學習交流，以后還會有補充。筆記來源豐富，轉載都附上了鏈接，如有侵權請告知我刪除

選擇器的權重和優先級

CSS基礎：談談選擇器的權重和優先級

• 瀏覽器通過優先級來判斷哪些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。

• 優先級是由匹配的選擇器中每一種選擇器類型的 數值 決定的。

• 當同一個元素有多個聲明的時候，優先級才會有意義。因為每一個直接作用于元素的 CSS 規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

• 當優先級與多個 CSS 聲明中任意一個聲明的優先級相等的時候，CSS 中最后的那個聲明將會被應用到元素上。

• 優先級

• 每一組選擇器在判斷優先級的時，是相加的關系
• !important 規則時，此聲明將覆蓋任何其他聲明
• !important 是一個壞習慣，應該盡量避免
• 兩條相互沖突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。

盒模型

CSS基礎：簡述CSS盒模型

• 內邊距 padding：包圍在內容區域外部的空白區域
  • 內邊距位于邊框和內容區域之間，不能為負
  • 可以設置padding padding-top padding-right padding-bottom padding-left
  • 更改類.container的內邊距,可以在容器和方框之間留出空間
• 外邊距 margin:盒子和其他元素之間的空白區域
  • 外邊距是盒子周圍一圈看不到的空間。它會把其他元素從盒子旁邊推開。 外邊距屬性值可以為正也可以為負。設置負值會導致和其他內容重疊。無論使用標準模型還是替代模型，外邊距總是在計算可見部分后額外添加。
  • 可以設置margin: 10px //等于 margin-top: 10px margin-right: 10px margin-bottom: 10px margin-left: 10px
  • 外邊距折疊：如果有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小。
• 邊框 border：邊框盒包裹內容和內邊距
  • 它是在邊距和填充框之間繪制的。
    • 如果您正在使用標準的盒模型，邊框的大小將添加到框的寬度和高度。
    • 如果您使用的是替代盒模型，那么邊框的大小會使內容框更小，因為它會占用一些可用的寬度和高度。
  • 可以設置：border-top border-right border-bottom border-left border-width border-style border-color
  • 還可以設置：border-top-width border-top-style border-top-color等

標準盒模型和替代模型（IE）

• 在標準模型中，如果你給盒設置 width 和 height，實際設置的是 content box。 padding 和 border 再加上設置的寬高一起決定整個盒子的大小，如果使用標準模型，則寬度 = 410px (300 + 50 + 50 + 5 + 5)，由margin之外的其他屬性組成。

• 在替代模型中，內容寬度 = 該寬度 - border - padding。

• 默認瀏覽器會使用標準模型。如果需要使用替代模型，可以通過為其設置 box-sizing: border-box 來實現。
• 如果你希望所有元素都使用替代模式，而且確實很常用，設置 box-sizing 在 元素上，然后設置所有元素繼承該屬性

html {box-sizing: border-box; } *, *::before, *::after {box-sizing: inherit; }

塊級盒子與內聯盒子

塊級盒子：

特點：

• 盒子會在內聯的方向上擴展并占據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬
• 每個盒子都會換行
• width 和 height 屬性可以發揮作用
• 內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍“推開”

常見的塊級元素：

div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

內聯盒子：

特點：

• 盒子不會產生換行。
• width 和 height 屬性將不起作用。
• 垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處于 inline 狀態的盒子推開。
• 水平方向的內邊距、外邊距以及邊框會被應用且會把其他處于 inline 狀態的盒子推開。

常見行內元素：

a, span, label, strong, em, br, img, input, select, textarea, cite

隱藏一個元素

css隱藏元素的方法(三種)

• 使用display:none;隱藏元素
  • 給元素的css屬性中添加display:none;隱藏目標的同時還不占位置.
• 通過改變元素透明度隱藏元素
  • 當元素完全透明的時候就是隱藏了,opacity:0(取值范圍0-1),0為完全透明,1為完全不透明.,這個方法會繼承到子元素,使用的時候要看清了.
• 使用visibility:hidden;隱藏
  • 同樣是給css屬性添加,但是占位置

Position

CSS基礎：淺談position

文檔流

• "文檔流"是在對布局進行任何更改之前，在頁面上顯示"塊"和"內聯"元素的方式。通常是從上至下，從左到右的形式
• 一旦某部分脫離了"流"，它就會獨立地工作

定位

定位的整個想法是允許我們覆蓋上面描述的基本文檔流行為

• 靜態定位：position: static;

• 相對定位：position: relative

.positioned {position: relative;top: 30px;left: 40px;background: #E6F7FF; } <div class="box"><h2 class="positioned">二級標題</h2><h3>副標題</h3><p>我是段落1</p><p>我是段落2，我包含了有意思的標簽<span>我是span標簽</span>,除了span標簽還有它——<a href="https://www.baidu.com">我是a標簽</a>,你看他們都不會導致新起一行</p> </div>

使用position: relative，不會讓元素脫離文檔流，目標元素會基于自己原本的位置進行定位

• 絕對定位：position: absolute;

絕對定位將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。

一般將absolute元素的父元素設為relative

這兩個是配合使用的，A定義了relative后，B就會相對于A進行移動。

其實絕對定位absolute的參照對象是“離它最近的已定位的祖先元素”，這句話里有兩個關鍵，

一個是“離它最近的祖先元素”，意思是那個參照元素不一定是父元素，也可以是它的爺爺、爺爺的爺爺等等，如果它的祖先里同時有2個及以上的定位元素，就參照離它最近的一個元素定位

還有一個是“已定位”，這個定位也不一定非要是相對定位，也可以是絕對定位，為什么一般都是用相對定位呢，因為相對定位的特性是雖然它定位了，就算給了偏移量它離開了原來的地方，但是它原來占的地方也不會讓出來的，這樣的好處是原來在它周圍的其他元素不會因為它的離開而改變位置而使頁面亂套，因為在你這個例子里我們只是要讓A作為B的一個參照偏移位置，并不需要A元素以及它周圍的元素有所改變，所以用相對定位是非常合適的（如果你另有其他需要，祖先元素絕對定位也不是不可以）

• 固定定位：position: fixed;

絕對定位固定元素是相對于元素或其最近的定位祖先，而固定定位固定元素則是相對于瀏覽器視口本身。 這意味著您可以創建固定的有用的UI項目，如持久導航菜單。

• 粘性定位：position: sticky;

sticky允許被定位的元素表現得像相對定位一樣，直到它滾動到某個閾值點（例如，從視口頂部起10像素）為止，此后它就變得固定了。

z-index

一旦使用定位，就可能使元素重疊,使用z-index: 3;控制覆蓋，值越大越在上面

浮動

CSS浮動

浮動&清除浮動的四種方法（偽類清除法）

• 頁面中盒子的排列方式

  • 常規流
  • 浮動
  • 定位

• 浮動：即脫離正常的文檔流，優先級提高。

• 浮動的基本特點：

  • 當一個元素浮動后，該元素一定會成為塊盒（display為block）

• 浮動盒子的排列方式

  • none: 默認值，不浮動，為常規流
  • left: 靠上靠左排列
  • right: 靠上靠右排列
  • 浮動盒子向左或向右移動，直到它外邊框碰到父元素的padding或者碰到另一個浮動盒子的邊框為止

• 盒子尺寸

  • 寬度為auto時，適應內容寬度
  • 高度為auto時，適應內容高度
  • 浮動盒子在包含塊中排列時，如果常規流盒子在前，浮動盒子會避開常規流塊盒
  • 常規流盒子在排列時，浮動盒子如果在前，常規流盒子則無視浮動盒子
  • 行盒在排列時，會避開浮動盒子
    • 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒

• 為什么要清除浮動

  • 沒有給父盒子設置高度。（為了方便添加子元素且不會脫離父盒子）
  • 子盒子設置了浮動
  • 影響到了下面的布局

如何清除浮動

BFC及清除浮動詳解

• 設置父級元素的高度

• 結尾處加空標簽clear：both

  • 即：給父元素內部添加一個空的div元素，設置clear:both。
  • clear:both的理解：理解 css - clear:both

• 父級div定義 偽類:after 和 zoom

  .container::after {content: "";display: block;clear: both； }

• 父級div定義 overflow:hidden

• 父級div定義 overflow:auto

包含塊與控制框

• 包含塊

  • 一個元素的box的定位和尺寸，會與某一矩形框有關，這個框就稱之為包含塊。
  • 元素會為它的子孫元素創建包含塊，但是，并不是說元素的包含塊就是它的父元素，元素的包含塊與它的祖先元素的樣式等有關系
  • 譬如：
    • 根元素是最頂端的元素，它沒有父節點，它的包含塊就是初始包含塊
    • static和relative的包含塊由它最近的塊級、單元格或者行內塊祖先元素的內容框（content）創建
    • fixed的包含塊是當前可視窗口
    • absolute的包含塊由它最近的position 屬性為absolute、relative或者fixed的祖先元素創建
    • 如果其祖先元素是行內元素，則包含塊取決于其祖先元素的direction特性
    • 如果祖先元素不是行內元素，那么包含塊的區域應該是祖先元素的內邊距邊界

• 控制框

  • 總結：

    • 如果一個框里，有一個塊級元素，那么這個框里的內容都會被當作塊框來進行格式化，因為只要出現了塊級元素，就會將里面的內容分塊幾塊，每一塊獨占一行（出現行內可以用匿名塊框解決）
    • 如果一個框里，沒有任何塊級元素，那么這個框里的內容會被當成行內框來格式化，因為里面的內容是按照順序成行的排列

  • 塊框：

    • 塊級元素會生成一個塊框（Block Box），塊框會占據一整行，用來包含子box和生成的內容

    • 塊框同時也是一個塊包含框（Containing Box），里面要么只包含塊框，要么只包含行內框（不能混雜），如果塊框內部有塊級元素也有行內元素，那么行內元素會被匿名塊框包圍

    • 關于匿名塊框的生成，示例：

      <DIV> Some text <P>More text </DIV>
      • div生成了一個塊框，包含了另一個塊框p以及文本內容Some text，此時Some text文本會被強制加到一個匿名的塊框里面，被div生成的塊框包含（其實這個就是IFC中提到的行框，包含這些行內框的這一行匿名塊形成的框，行框和行內框不同）
      • 換句話說:如果一個塊框在其中包含另外一個塊框，那么我們強迫它只能包含塊框，因此其它文本內容生成出來的都是匿名塊框（而不是匿名行內框）

  • 行內框：

    • 一個行內元素生成一個行內框

    • 行內元素能排在一行，允許左右有其它元素
      關于匿名行內框的生成，示例：

      <P>Some <EM>emphasized</EM> text</P>
      • P元素生成一個塊框，其中有幾個行內框（如EM），以及文本Some ， text，此時會專門為這些文本生成匿名行內框

  • display屬性的影響：

    • display的幾個屬性也可以影響不同框的生成：
      • block，元素生成一個塊框
      • inline，元素產生一個或多個的行內框
      • inline-block，元素產生一個行內級塊框，行內塊框的內部會被當作塊塊來格式化，而此元素本身會被當作行內級框來格式化（這也是為什么會產生BFC）
      • none，不生成框，不再格式化結構中，當然了，另一個visibility: hidden則會產生一個不可見的框

BFC

CSS基礎：CSS的上下文之BFC

CSS: 深入理解BFC和Margin Collapse (margin疊加或者合并外邊距)

• w3c定義：

  • 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。

  • 在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。

  • 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。

• 定義：BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

• 下列方式會創建塊格式化上下文

  • 根元素（<html>）
  • 浮動元素（元素的 float 不是 none）
  • 絕對定位元素（元素的 position 為 absolute 或 fixed）
  • display 為 inline-block、table-cells、flex
  • overflow 計算值不為 visible 的塊元素

• 塊格式化上下文包含創建它的元素內部的所有內容。

• BFC屬于普通的文檔流，具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，它有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

• 應用場景：

  • 清除內部的浮動，觸發父元素的 BFC 屬性，會包含 float 元素；防止浮動導致父元素高度塌陷，父級設置 overflow：hidden，元素float:right;
  • 分屬于不同的 BFC ，可以阻止 Margin 重疊；避免 margin 重疊，兩個塊相鄰就會導致外邊距被折疊，給中間的設置 BFC 就會避免，方法就是套個父級設置 overflow:hidden
  • 阻止元素被浮動元素覆蓋，各自是獨立的渲染區域；
  • 自適應兩懶布局；

外邊距折疊（合并外邊距與BFC、margin疊加）

• 定義：

  • 在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

• 折疊的結果：

  • 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
  • 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
  • 兩個外邊距一正一負時，折疊結果是兩者的相加的和。

• 產生折疊的必備條件：margin必須是鄰接的!而根據w3c規范，兩個margin是鄰接的必須滿足以下條件：

  • 必須是處于常規文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當中。
  • 沒有線盒，沒有空隙（clearance），沒有padding和border將他們分隔開
    • clearance：閉合浮動的塊盒（即設置了clear:both)在margin-top上所產生的間距（clearance）的值與該塊盒的margin-top 之和應該足夠讓該塊盒垂直的跨越浮動元素的margin-bottom，使閉合浮動的塊盒的border-top恰好與浮動元素的塊盒的margin- bottom相鄰接。
  • 都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
    • 元素的margin-top與其第一個常規文檔流的子元素的margin-top
    • 元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
    • height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom
    • 高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom

• 以上的條件意味著下列的規則：

  • 創建了新的BFC的元素（例如浮動元素或者’overflow’值為’visible’以外的元素）與它的子元素的外邊距不會折疊

  • 浮動元素不與任何元素的外邊距產生折疊（包括其父元素和子元素）

    • 浮動元素和絕對定位元素不與其他盒子產生外邊距折疊是因為元素會脫離當前的文檔流，違反了上面所述的兩個margin是鄰接的條件同時，又因為浮動和絕對定位會使元素為它的內容創建新的BFC，因此該元素和子元素所處的BFC是不相同的，因此也不會產生margin的折疊。

  • 絕對定位元素不與任何元素的外邊距產生折疊

  • inline-block元素不與任何元素的外邊距產生折疊

    • inline-block不符合w3c規范所說元素必須是塊級盒子的條件，因為規范中又說明，塊級盒子的display屬性必須是以下三種之一：‘block’， ‘list-item’， 和 ‘table’

  • 一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生折疊，除非它們之間存在間隙（clearance）。

  • 一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。

  • 一個’height’ 為 ‘auto’ 并且 ‘min-height’ 為 '0’的常規文檔流元素的 margin-bottom 會與其最后一個常規文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。

  • 一個不包含border-top、 border-bottom、padding-top、padding-bottom的常規文檔流元素，并且其 ‘height’ 為 0 或 ‘auto’， ‘min-height’ 為 ‘0’，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。

• 想要解決這樣的問題，我們可以通過將兩個child放置于不同的BFC中

margin塌陷

現象：

• box元素存在外邊距100px，相對于body的效果生效了，毫無疑問；

• child元素存在外邊距50px，相對于box的效果僅左側生效了，存在疑問；

解釋：

• 有了2.1小節的經驗，大家會猜測是不是margin再次發生了合并？也可以，但更合理的形容叫 “margin塌陷”。
• 父子相鄰嵌套的元素在垂直方向的margin會發生塌陷，并取最大值。
• 拿例子中的box元素舉例，box作為頂，子元素向外稱起50px卻失效了，可以理解為頂塌陷了。

BFC 可以包含浮動的元素（清除浮動）

• 現象：
  • child因為浮動，脫離了文檔流；
  • box盒子的高度只計算了border；
• 解釋：
  • 因為子元素已經脫離了文檔流，所以父元素在計算高度時忽略了它；
• 解決：
  • 觸發容器的 BFC，使得容器包裹著浮動元素。（以此可以清除浮動）

BFC 解決文字環繞的問題

浮動的目的。最初時，浮動只能用于圖像（某些瀏覽器還支持表的浮動），目的就是為了允許其他內容（如文本）“圍繞”該圖像。而后來的CSS允許浮動任何元素。

現象：

• 給左側子元素設置了左浮動，使得文字環繞在它周圍，但為什么文字會被環繞，而不是被遮擋？

解釋：

看到float會脫離文檔流，這是相對于盒子模型來說的。但它沒有脫離文本流。

• 文檔流是相對于盒子模型講的

• 文本流是相對于文子段落講的

元素浮動之后，會讓它脫離文檔流，也就是說當它后面還有元素時，其他元素會無視它所占據了的區域，直接在它身下布局。但是文字卻會認同浮動元素所占據的區域，圍繞它布局，也就是沒有脫離文本流。

在MDN上提到，該元素從網頁的正常流動(文檔流)中移除，盡管仍然保持部分的流動性（與絕對定位相反）。

解決:

將包裹文字的元素置為BFC

層疊上下文

CSS基礎：CSS的上下文之層疊上下文

定義：

• 層疊上下文，英文稱作”stacking context”. 我們假定用戶正面向（瀏覽器）視窗或網頁，而 HTML 元素沿著其相對于用戶的一條虛構的 z 軸排開，層疊上下文就是對這些 HTML 元素的一個三維構想。眾 HTML 元素基于其元素屬性按照優先級順序占據這個空間。

• 我們可以把層疊上下文同樣可以理解成是元素的屬性。

下列方式會形成層疊上下文：

• position 值為 static 以外的值，且 z-index 值不為 auto;
• flex (flexbox) 容器的子元素，且 z-index 值不為 auto;
• grid (grid) 容器的子元素，且 z-index 值不為 auto;
• opacity 屬性值小于 1 的元素;
• transform屬性 不為none的元素;

總結：

• 在層疊上下文中，子元素同樣也按照上面解釋的規則進行層疊。 重要的是，其子級層疊上下文的 z-index 值只在父級中才有意義。
• 子級層疊上下文被自動視為父級層疊上下文的一個獨立單元。

層疊水平

“層疊水平”，英文稱作”stacking level”，決定了同一個層疊上下文中元素在z軸上的顯示順序。網頁中的每個元素都是獨立的個體，他們一定是會有一個類似的排名排序的情況存在。而這個排名排序、論資排輩就是我們這里所說的“層疊水平”。

但注意，每一個層疊上下文內部的子元素都不會突破包裹它的上下文。

普通元素的層疊水平優先由層疊上下文決定，因此，層疊水平的比較只有在當前層疊上下文元素中才有意義。

• 舉例：

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zmkuF0jJ-1646397774231)(/Users/wangke/Desktop/收集/圖片/層疊水平.png)]

• 現象：

  • 在這個例子中，每個被定位的元素都創建了獨自的層疊上下文，因為他們被指定了定位屬性和 z-index 值。我們把層疊上下文的層級列在下面：
  • DIV #1
    DIV #2
    DIV #3
    DIV #4
    DIV #5
  • 不同層的z-index他們的意義只相對于同一個層疊上下文。你會發現z-index：100的也沒有覆蓋z-index：1的。

• 結論：

  • 千萬不要把層疊水平和CSS的z-index屬性混為一談。沒錯，某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的孩子元素；而層疊水平所有的元素都存在。

層疊上下文的特性

• 準則
  • 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
  • 后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
    在CSS和HTML領域，只要元素發生了重疊，都離不開上面這兩個黃金準則。
• 特性
  • 層疊上下文的層疊水平要比普通元素高；
  • 層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。
  • 每個層疊上下文和兄弟元素獨立，也就是當進行層疊變化或渲染的時候，只需要考慮后代元素。
  • 每個層疊上下文是自成體系的，當元素發生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中。

Display

Flex布局

CSS之關于彈性盒子 你了解哪些（flex基本屬性詳解

• Flex定義:

  • Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
  • **注意：**這是您需要在父容器上設置的唯一屬性，它的所有直接子容器將自動變為flex項目。
  .box{display: flex;display: -webkit-flex; /* 如果 Webkit 內核瀏覽器 */display: inline-flex; /* 如果 你希望它是行內元素 */ }

• 彈性盒子的屬性:

  • 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。

  • 它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

• 容器默認存在兩根軸：

  • 水平的主軸（main axis）

    • 主軸的開始位置叫做main-start;
    • 結束位置叫做main-end;

  • 垂直的交叉軸（cross axis）

    • 交叉軸的開始位置叫做cross-start;
    • 結束位置叫做cross-end;

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XAbvMqqb-1646397774231)(/Users/wangke/Desktop/收集/圖片/flex.png)]

• 屬性

  • flex-direction屬性

    • flex-direction屬性決定主軸的方向（即項目的main-axis方向）。
    • 取值：
      • row（默認值）：主軸為水平方向，起點在左端。
      • row-reverse：主軸為水平方向，起點在右端。
      • column：主軸為垂直方向，起點在上沿。
      • column-reverse：主軸為垂直方向，起點在下沿。

  • flex-wrap屬性

    • 最初的flexbox概念是在一行中設置其項目的容器。該flex-wrap屬性控制flex容器是以單行還是多行布置其項目，以及新行的堆疊方向。

    • 取值：

      • nowrap（默認值）：項目顯示在一行中，默認情況下會縮小它們以適應Flex容器的寬度;

      • wrap：如果需要，從左到右和從上到下，彈性項目將顯示在多行中;

      • wrap-reverse：如果需要，從左到右和從下到上，彈性項目將顯示在多行中;

  • flex-flow

    • flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

  • justify-content屬性

    • 使flex項目沿著flex容器當前行的主軸對齊。當一行上的所有伸縮項目都不靈活或已達到最大大小時，它有助于分配剩余的可用空間。

    • 取值：（下面假設主軸為從左到右。）

      • flex-start（默認值）：左對齊；

      • flex-end：右對齊；

      • center： 居中；

      • space-between：兩端對齊，項目之間的間隔都相等；

      • space-around：每個項目兩側的間隔相等。

  • align-items屬性

    • align-items屬性定義項目在交叉軸上如何對齊。

    • 取值：（下面假設交叉軸從上到下。）

      • stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

      • flex-start：交叉軸的起點對齊。

      • flex-end：交叉軸的終點對齊。

      • center：交叉軸的中點對齊。

      • baseline: 項目的第一行文字的基線對齊。

  • align-content屬性

    • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
    • 當存在多個軸時，此屬性會在Flex容器內將Flex容器的軸線以接近justify-content的方式對齊。
    • 取值：
      • flex-start：與交叉軸的起點對齊。
      • flex-end：與交叉軸的終點對齊。
      • center：與交叉軸的中點對齊。
      • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
      • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
      • stretch（默認值）：軸線占滿整個交叉軸。

• 項目的屬性

  • order

    • order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

  • flex-grow

    • 此屬性指定的縮放，該屬性確定當分配正的自由空間時，縮放項目相對于容器中其余其余項目將增長多少。
    • 注意：flex-grow：默認為0，即如果存在剩余空間，也不放大。

  • flex-shrink屬性

    • flex-shrink的參數指定彈性收縮因子，該因子確定在分配負的自由空間時，彈性項目相對于彈性容器中其余彈性項目將收縮多少。

  • flex-basis屬性

    • flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
    • 該屬性采用與width和height屬性相同的值，并在根據彈性系數分配可用空間之前指定彈性項目的初始主要尺寸。

  • flex

    • 此屬性是flex-grow，flex-shrink和flex-basis的簡寫。默認值為0 1 auto。

    • 該屬性有兩個快捷值：

      • auto (1 1 auto)

      • none (0 0 auto)

  • align-self屬性

    • align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

Grid布局

CSS進階之關于網格布局(Grid) 你了解哪些

• 基本概念

  • “容器”和“項目”
    • 采用網格布局的區域，稱為"容器"（container）。容器內部采用網格定位的子元素，稱為"項目"（item）
    • 最外層的<div>元素就是容器，內層的三個<div>元素就是項目
    • 注意：項目只能是容器的頂層子元素（直屬子元素），不包含項目的子元素。Grid 布局只對項目生效。
  • 行、列、單元格
    • 容器里面的水平區域稱為"行"（row），垂直區域稱為"列"（column）。
    • 行和列隔開的格子，被稱作“單元格”
  • 網格線
    • 劃分網格的線（單元格），稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。

• 容器基本屬性

  • display

    • 當給元素設置為display: grid;后，默認情況下，容器元素都是塊級元素，但也可以設成行內元素display: inline-grid;。

  • grid-template-columns、grid-template-rows

    • grid-template-columns: 定義每一列的列寬
    • grid-template-rows: 定義每一行的行高。

  • repeat()方法

    • repeat()接受兩個參數，第一個參數是重復的次數（上例是 3），第二個參數是所要重復的值。
    • repeat()重復某種模式也是可以的。
    <style>.grid {grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);} </style>

  • auto-fill 關鍵字

    • 有時，單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納盡可能多的單元格，這時可以使用 auto-fill 關鍵字表示自動填充。
    .grid {grid-template-columns: repeat(auto-fill, 100px);grid-template-rows: repeat(2, 100px); }

  • fr(片段)

    • 網格布局提供了fr 關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為 1fr 和 2fr，就表示后者是前者的兩倍。
    • fr 可以與絕對長度的單位結合使用，這時會非常方便：例如下面會顯示為第一列 100px，剩余寬度內第三列是是第二列的二倍
    .grid {display: grid;grid-template-columns: 1fr 2fr;/*grid-template-columns: 100px 1fr 2fr;*/ }

  • auto

    • auto 關鍵字表示由瀏覽器自己決定長度。
    • grid-template-columns: 100px auto 100px;

  • 網格線的名稱

    • grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號，指定每一根網格線的名字，方便以后的引用。
    • grid-template-columns: [c1] 100px [c2] auto [col-3 c3] 100px;

  • grid-row-gap、grid-column-gap、grid-gap 屬性

    • grid-row-gap屬性設置行與行的間隔（行間距）
    • grid-column-gap屬性設置列與列的間隔（列間距）
    • grid-gapgrid-gap: <grid-row-gap> <grid-column-gap>，它是行列間距的縮寫

  • grid-template-areas 屬性

    • 網格布局允許指定"區域"（area），一個區域由單個或多個單元格組成。grid-template-areas 屬性用于定義區域。
    .grid {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas:"a b c""d e f""g h i"; } .a {grid-area: a; // 表示它代表grid容器內的a項目 }

  • justify-items、align-items、place-items 屬性

    • justify-items：設置單元格內容的水平位置（左中右）；
    • align-items：設置單元格內容的垂直位置（上中下）；
    • 取值范圍：
      • start：對齊單元格的起始邊緣。
      • end：對齊單元格的結束邊緣。
      • center：單元格內部居中。
      • stretch：拉伸，占滿單元格的整個寬度（默認值）。
    • place-items 是上面兩個屬性的簡寫形式：place-items: <align-items> <justify-items>;，

  • justify-content、align-content、place-content 屬性

    • justify-content 屬性是整個內容區域在容器里面的水平位置（左中右）
    • align-content 屬性是整個內容區域的垂直位置（上中下）。
    • 同樣place-content也是前兩個屬性的簡寫形式。

  • grid-auto-columns、grid-auto-rows 屬性

    • 有時候，一些項目的指定位置，在現有網格的外部。比如網格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多余的網格，以便放置項目。
    • grid-auto-columns屬性和grid-auto-rows屬性用來設置，瀏覽器自動創建的多余網格的列寬和行高。

• 項目基本屬性

  • 垂直網格線
    • grid-column-start：項目左起始網格線
    • grid-column-end：項目右結束網格線
    • grid-row-start 項目上起始網格線
    • grid-row-end 項目下結束網格線
    • grid-column：是grid-column-start和grid-column-end的合并簡寫形式
    • grid-row：grid-row-start和grid-row-end的合并簡寫形式
  • grid-area 屬性
    • grid-area屬性指定項目放在哪一個區域。
    • **注意：**grid-area還有另一種使用方式，他可以作為作為grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并簡寫形式，直接指定項目的位置。
    • grid-area: 1 / 1 / 2 / 2;

各種居中

塊級元素水平居中（左右居中）

div {border: 1px solid red;margin: 0 auto;height: 50px;width: 80px; }

css3 flex實現：

justify-content:center;

塊級元素垂直居中

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

記錄自己的前端復習之路-css（1）詳解及延伸

負外邊距

div {border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px; }

絕對居中

.Absolute-Center {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0; }

容器內居中

內容塊的父容器設置為position:relative，使用上述絕對居中方式，可以使內容居中顯示于父容器。

.Center-Container {position: relative; }.Absolute-Center {width: 50%;height: 50%;overflow: auto;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0; }

視區內居中

想讓內容塊一直停留在可視區域內？將內容塊設置為position:fixed;并設置一個較大的z-index層疊屬性值。

.Absolute-Center.is-Fixed {position: fixed;z-index: 999; }

變形（Transform）

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支持聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴，還要加上：top: 50%; left: 50%;

translate()函數是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中

當使用：top: 50%;left: 50%;， 是以左上角為原點，故不處于中心位置

translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居于中心位置。

.is-Transformed { width: 50%;margin: auto;position: absolute;top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }

flex

align-items:center;

塊中不定行的文字垂直居中

• line-height設置為容器height一致（只能單行）

三列布局

CSS實現三列布局

三列布局指的是兩邊兩列定寬，中間的寬度自適應。

常用三種方法：

• 定位
  • 左右兩欄選擇絕對定位，固定于頁面的兩側，中間的主體選擇用margin確定位置
• 浮動
  • 讓左右兩邊部分浮動，脫離文檔流后對中間部分使用margin來自適應
• 彈性盒布局
  • 使用容器包裹三欄，并將容器的display設置為flex，左右兩部分寬度設置為固定，中間flex設置為1，左右兩邊的值固定，所以中間的自適應

偽類和偽元素

CSS偽類與偽元素

• 為什么要引入偽類與偽元素？

  • css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或是列表中的第一個元素，又或者是鼠標懸停在某個超鏈接上時要設置的樣式。

• 定義：

  • 偽類：用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。
  • 偽元素：用于創建一些不在文檔樹中的元素，并為其添加樣式。實際上，偽元素就是選取某些元素前面或后面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基于元素的抽象，并不存在于文檔結構中。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。

• 分類：

  • 狀態偽類
    • 是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處于某狀態時會呈現該樣式，而進入另一狀態后，該樣式也會失去。
    • 常見的狀態偽類主要包括：
      • :link 應用于未被訪問過的鏈接；
      • :hover 應用于鼠標懸停到的元素；
      • :active 應用于被激活的元素；
      • :visited 應用于被訪問過的鏈接，與:link互斥。
      • :focus 應用于擁有鍵盤輸入焦點的元素。
  • 結構性偽類
    • 是css3新增選擇器，利用dom樹進行元素過濾，通過文檔結構的互相關系來匹配元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。
    • 常見的結構性偽類包括：
      • :first-child 選擇某個元素的第一個子元素；
      • :last-child 選擇某個元素的最后一個子元素；
      • :nth-child() 選擇某個元素的一個或多個特定的子元素；
      • :nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
      • :nth-of-type() 選擇指定的元素；

• 常見的偽元素選擇器

  • ::first-letter 選擇元素文本的第一個字（母）。
  • ::first-line 選擇元素文本的第一行。
  • ::before 在元素內容的最前面添加新內容。
  • ::after 在元素內容的最后面添加新內容。
  • ::selection匹配用戶被用戶選中或者處于高亮狀態的部分
  • ::placeholder匹配占位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效

• 偽元素的應用：

  • 清除浮動：如果父元素的所有子元素都是浮動的，父元素的高度則無法撐開。可以通過對父元素添加after偽類撐開父元素高度，因為after就是其最后一個子元素。

    .clear::after {content: '';display: block;clear: both; }

  • 畫分割線

    <style>* {padding: 0;margin: 0;}.spliter::before, .spliter::after {content: '';display: inline-block;border-top: 1px solid black;width: 200px;margin: 5px;}</style> </head> <body><p class="spliter">分割線</p> </body>

  • 計數器

CSS屬性繼承

CSS中屬性繼承小解

• css可以和不可以繼承的屬性
  • 不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
  • 所有元素可繼承：visibility和cursor。
  • 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  • 終端塊狀元素可繼承：text-indent和text-align。
  • 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可繼承：border-collapse。
• 值的繼承
  • 繼承也是基于文檔樹的，文檔樹中元素的某些屬性可以被其子元素繼承，每一個CSS屬性都定義了它能否被繼承。要設定文檔的某些缺省樣式屬性，可以在文檔樹的根上設定該屬性，如果這個屬性可以繼承，則其后代元素將繼承這個屬性，例如color、font-size等屬性。
• “inherit（繼承）”值
  • 每一個屬性可以指定值為“inherit”，即：對于給定的元素，該屬性和它父元素相對屬性的計算值取一樣的值。繼承值通常只用作后備值，它可以通過顯式地指定“inherit”而得到加強，例如： p { font-size: inherit; }
• 繼承的局限性
  • 繼承雖然減少了重復定義的麻煩，但是，有些屬性是不能繼承的，例如border（邊框）、margin（邊距）、padding（補白）和背景等。
  • 這樣設定是有道理的，例如，為一個設定了邊框，如果此屬性也繼承的話，那么在這個內所有的元素都會有邊框，這無疑會產生一個讓人眼花繚亂的結果。同樣的，影響元素位置的屬性，例如margin（邊距）和padding（補白），也不會被繼承。
• css屬性一旦繼承了不能被取消，只能重新定義樣式。

CSS3

Transform

Transform【變形】屬性

• 旋轉rotate
  • transform:rotate(30deg)
• 移動translate
  • 移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）
  • transform:translate(100px,20px)
  • transform:translateX(100px)
• 縮放scale
  • scale(X,Y)是用于對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。如：transform:scale(2,1.5)
  • transform:scaleY(2)
• 扭曲skew
  • skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。，其中第二個參數是可選參數，如果沒有設置第二個參數，那么X軸和Y軸以同樣的角度進行變形。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg)
  • transform:skewX(30deg)
• 矩陣matrix

總結

以上是生活随笔為你收集整理的前端面试笔记-CSS篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。