CSS概念【記錄】

来源:https://www.cnblogs.com/lizwsky/archive/2019/01/08/10213644.html
-Advertisement-
Play Games

1、CSS語法 2、@規則 3、註釋 4、層疊 5、優先順序 6、繼承 7、值 8、塊格式化上下文 9、盒模型 10、層疊上下文 11、可替換元素 12、外邊距合併 13、包含塊 14、視覺格式化模型 15、佈局模式 1、CSS語法 屬性：property 值：value CSS聲明：property ...


 

1、CSS語法

2、@規則

3、註釋

4、層疊

5、優先順序

6、繼承

7、值

8、塊格式化上下文

9、盒模型

10、層疊上下文

11、可替換元素

12、外邊距合併

13、包含塊

14、視覺格式化模型

15、佈局模式

 

1、CSS語法

屬性：property

值：value

CSS聲明：property:value;

CSS聲明塊：{ property:value; }

CSS規則（CSS規則集）：element{ property:value; }

 

2、@規則

@規則：一個CSS語句

　　@charset：定義樣式表使用的字元集

　　@import：告訴CSS引擎引入一個外部樣式表

　　嵌套@規則：

　　　　@media：如果滿足媒介查詢的條件則條件規則組裡的規則生效

　　　　@font-face：描述將下載的外部的字體

　　　　@keyframes：描述CSS動畫的中間步驟

@charset "utf-8"; /* @charset只能是樣式表中的第一個元素，且前面不能有任何字元，如果有多個@charset被聲明，只有第一個有效 */

@import url("global.css"); /* @import規則必須先於所有其他類型的規則，@charset規則除外 */
@import url(global.css);
@import "global.css";
/* IE6+ */ @import url(global.css);
/* IE8+ */ @import url(global.css) screen;
/* IE9+ */ @import url(global.css) screen and (max-width:1024px);

/* IE9+ */ @media screen and (max-width:1024px){  }
/* IE9+ */ <link rel="stylesheet" href="global.css" media="screen and (max-width:1024px)">

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9 */
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* Chrome、Firefox */
    url('iconfont.ttf') format('truetype'), /* Chrome、Firefox、Opera、Safari、Android、IOS 4.2+ */
    url('iconfont.svg#iconfont') format('svg'); /* IOS 4.1- */
}

@keyframes animate { /* IE10+ */
    from {
        width: 0;
        margin-left: 0;
    }
    to {
        width: 100%;
        margin-left: 100%;
    }
}

 

3、註釋

/* 單行註釋 */
/*
    多行註釋
    註釋無法嵌套，也就是說，一旦遇到第一個*/記號，就一定會結束註釋
 */

 

4、層疊

層疊演算法決定如何找出要應用到每個文檔元素的每個屬性上的值，層疊演算法是先於優先順序演算法的

1　　用戶代理

2　　用戶代理　　!important

3　　用戶

4　　頁面作者

5　　CSS動畫

6　　頁面作者　　!important

7　　用戶　　　　!important

 

5、優先順序

通配選擇器（*）、關係選擇符（+、>、~、' '）、否定偽類:not()對優先順序沒有影響，但是在:not()內部聲明的選擇器會影響優先順序

1　　元素選擇器、偽元素

2　　類選擇器、屬性選擇器、偽類

3　　ID選擇器

4　　內聯樣式

5　　!important

 

6、繼承

當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值，只有文檔根元素取該屬性的概述中給定的初始值

當元素的一個非繼承屬性沒有指定值時，則取屬性的初始值

 

7、值

初始值：預設值

指定值：賦值、繼承值、初始值

計算值：通過指定值計算出來

　　　　計算值所需要的計算通常包括將相對值轉換成絕對值（em單位或百分比）

　　　　對於有些屬性，這些元素的百分比與需要佈局確定後才能知道的值有關，它們的百分比值會轉換成百分比的計算值

　　　　（top、width、min-width、margin、padding、background-position、text-indent等）

使用值（應用值）：計算值，或計算佈局（尺寸比如auto或百分數換算為像素值）

實際值：應用值的近似值，例如，一個用戶代理可能只能渲染一個整數像素值的邊框（實際值）

解析值：對於大多數屬性，它是計算值，但對於一些舊屬性（包括寬度和高度），它是使用值

/*
            width:auto; width:1920px; border-width:1.01px; font-size:2em;
    初始值：auto        auto          medium               medium
    指定值：auto        1920px        1.01px               2em
    計算值：auto        1920px        1.01px               32px
    使用值：1920px      1920px        1.01px               32px
    實際值：1920px      1920px        1px                  32px
    解析值：1920px      1920px        1.01px               32px
*/

 

8、塊格式化上下文

佈局過程中生成塊級盒子的區域，浮動元素與其他元素的交互限定區域

浮動定位和清除浮動時只會應用於同一個BFC內的元素，浮動不會影響其它BFC中元素的佈局，外邊距摺疊也只會發生在屬於同一BFC的塊級元素之間

1　　根元素或包含根元素的元素

2　　浮動元素

3　　絕對定位元素

4　　行內塊元素

5　　表格單元格（元素的display為table-cell）

6　　表格標題（元素的display為table-caption）

7　　匿名錶格單元格元素（元素的display為table、table-row、table-row-group、table-header-group、table-footer-group、inline-table）

8　　overflow值不為visible的塊元素

9　　彈性元素（display為flex或inline-flex元素的直接子元素）

10　　網格元素（display為grid或inline-grid元素的直接子元素）

 

9、盒模型

當對一個文檔進行佈局時，瀏覽器渲染引擎會根據CSS-Box模型（CSS Basic Box model）將所有元素表示為一個矩形盒子（box），CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸等）

對於非替換的行內元素來說，儘管內容周圍存在內邊距與邊框，但其占用空間（行高）由line-height屬性決定

1　　內容區域content area

2　　內邊距區域padding area

3　　邊框區域border area

4　　外邊距區域margin area

 

10、層疊上下文

層疊上下文是HTML元素的三維概念

1　　根元素

2　　z-index值不為auto的絕對/相對定位

3　　一個z-index值不為auto的flex項目，即：父元素display:flex|inline-flex

4　　opacity屬性值小於1的元素

5　　transform屬性值不為none的元素

6　　position:fixed

 

11、可替換元素

可替換元素的展現不是由CSS來控制的，這些元素是一類外觀渲染獨立於CSS的外部對象

1　　典型的可替換元素有img、object、video和表單元素，如textarea、input

2　　某些元素只在一些特殊情況下表現為可替換元素，例如audio和canvas

3　　通過CSS content屬性來插入的對象被稱作匿名可替換元素

4　　一部分可替換元素，本身具有尺寸和基線（baseline），會被像vertical-align之類的一些CSS屬性用到

 

12、外邊距合併

塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為一個外邊距，其大小取其中的最大者，這種行為稱為外邊距摺疊（外邊距合併）

浮動元素和絕對定位元素的外邊距不會摺疊（因為這裡觸發了BFC，overflow值不為visible的塊元素除外，其只會與子元素髮生摺疊）

如果參與摺疊的外邊距中包含負值，摺疊後的外邊距的值為最大的正邊距與最小的負邊距（即絕對值最大的負邊距）的和

如果所有參與摺疊的外邊距都為負，摺疊後的外邊距的值為最小的負邊距的值

1　　相鄰元素之間

2　　父元素與其第一個或最後一個子元素之間：如果在父元素與其第一個子元素之間不存在邊框、內邊距、行內內容，也沒有創建塊格式化上下文、或者清除浮動將兩者的margin-top分開，或者在父元素與其最後一個子元素之間不存在邊框、內邊距、行內內容、height、min-height、max-height將兩者的margin-bottom分開，那麼這兩對外邊距之間會產生摺疊，此時子元素的外邊距會溢出到父元素的外面

3　　空的塊級元素：如果一個塊級元素中不包含任何內容，並且在其margin-top與margin-bottom之間沒有邊框、內邊距、行內內容、height、min-height將兩者分開，則該元素的上下外邊距會摺疊

 

13、包含塊

元素的尺寸和位置受其包含塊的影響，大多數情況下，包含塊就是這個元素最近的祖先塊元素的內容區

計算height、top、bottom中的百分值，是通過包含塊的height的值，如果包含塊的height值根據它的內容變化，且包含塊的position屬性的值為relative或static，那麼，這些值的計算值為0

計算width、left、right、padding、margin這些屬性由包含塊的width屬性的值來計算它的百分值

1　　如果position屬性為static或relative，包含塊就是由它的最近的祖先塊元素或格式化上下文的內容區的邊緣組成的

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

3　　如果position屬性為fixed，包含塊就是由viewport組成的

4　　如果position屬性為absolute或fixed，包含塊也可能是由滿足以下條件的最近祖先元素的內邊距區的邊緣組成的：transform屬性值不為none的元素

5　　根元素所在的包含塊是一個被稱為初始包含塊的矩形

 

14、視覺格式化模型

CSS視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規則，根據CSS盒子模型將文檔中的元素轉換為一個個盒子

1　　塊級元素：display為block、list-item、table

2　　塊級盒子：由塊級元素生成，一個塊級元素至少會生成一個塊級盒子，但也有可能生成多個（列表項元素）

3　　塊容器盒子：有些塊容器盒子也不是塊級盒子（非替換行內塊和非替換表格單元格）

4　　塊盒子：如果一個塊級盒子同時也是一個塊容器盒子，則稱其為塊盒子（表格和可替換元素之外的塊級盒子）

5　　匿名塊盒子：CSS選擇器不能作用於匿名盒子，所以它不能被樣式表賦予樣式，也就是說，此時所有可繼承的CSS屬性值都為inherit，而所有不可繼承的CSS屬性值都為initial

6　　行內級元素：display為inline、inline-block、inline-table

7　　行內級盒子：由行內級元素生成，分為行內盒子和原子行內級盒子

8　　行內盒子：display:inline的非替換盒子

9　　原子行內級盒子：display:inline的可替換盒子或display為inline-block、inline-table生成的盒子

 

15、佈局模式

CSS佈局模式，有時簡稱為佈局，是一種基於盒子與其兄弟和祖輩盒子的交互方式來確定盒子的位置和大小的演算法

1　　塊佈局：用來佈置文件

2　　行內佈局：用來佈置文本

3　　表格佈局：用來佈置表格

4　　定位佈局：用來對那些與其他元素無交互的定位元素進行佈置

5　　彈性盒子佈局：用來佈置那些可以順利調整大小的複雜頁面

6　　網格佈局：用來佈置那些與一個固定網格相關的元素

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第二行字體 多餘省略號顯示
    box-sizing: border-box; height: 40px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit ...
  • call、apply、bind 區別
    1.為什麼要用 call 、apply？ 為了 改變方法裡面的屬性而不去改變原來的方法 2.call 與apply 區別 1）call 參數固定 apply 參數不固定 apply 參數是放在數組裡面的 2）call 可以將偽數組轉換為真正的數組例如一個例子： 3) bind 是返回對應函數，便於稍 ...
  • 網頁導航欄 html + css的代碼實現
    一般來講，我們的網頁導航欄是這麼個模式來構建在結構上：1.首先我們需要給導航欄的div 給個類名 一般為nav2.然後就是一個無序表格 3.由於導航欄的文字一般都是鏈接用來跳轉頁面 要在li裡面包含一個a 在樣式上： 目前我見過的分為兩種導航欄的文字 裸露 也就是沒有滑動門的那種比如這種 1.首先寫 ...
  • 微信小程式調用地圖選取位置後返回信息
    先看一下wxml的代碼，綁定個事件！ 然後是js的代碼，調用wx.chooseLocation方法 ...
  • 關於深拷貝和淺拷貝的一些事
    首先，在進行認識深拷貝和淺拷貝之前，我們需要瞭解到W3關於數據類型的區分 數據類型： 基本類型：String/Number/Boolean/Null/undefined/Symbol/ 直接存儲在棧中的數據 引用類型：Object，Array等 存儲的時是對象在棧中的引用，真實的數據存放在堆記憶體里 ...
  • JavaScript實現Tab切換
    在網頁開發中，常常會遇見很多Tab切換，Tab切換增加網頁瀏覽的舒適性，對於開發人員特別常見，本文使用JS實現tab切換效果，僅對學習中遇到的知識點做一個總結。 效果圖如下： 實現思路： 1.首先使用HTML和CSS構建靜態網頁如上，標題使用ul-li標簽，有浮動，主體使用四個大小一樣的盒子，不添加 ...
  • 關於父視窗獲取跨域iframe子視窗中的元素
    這幾天在項目中遇到,一個難點, 就是需要非同步載入一個pdf插件, 同時又需要獲取這個插件中的點擊事件來生成用戶的下載記錄. 剛開始也是想了很多方法,網上搜的 發現在跨域環境下並沒有用, 看到有些人說這個無解, 需要走後臺, 我當時也是涼涼感覺. 後來自己也是想了辦法,在插件頁面中給按鈕綁定事件,然後 ...
  • CSS單位【記錄】
    1、長度 2、角度 3、時間 4、解析度 5、顏色 6、函數 7、生成內容 8、圖像 9、數字 1、長度 <length>：數字和單位之間沒有空格，0之後的長度單位是可選的 相對長度單位 em：相對於字體大小 ex：相對於小寫字母"x"的高度，對於很多字體，1ex ≈ 0.5em ch：相對於數字" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類