css常用大總結

fakertop發表於2020-12-23
CSS

在這裡插入圖片描述
在這裡插入圖片描述

首先我們要理解什麼是css

css就是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。

CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。

使用css的樣式表

1.內聯方式使用css，就是把css巢狀在head標籤中使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>

</body>
</html>

2.內部樣式表，就是把css放在body內的標籤中使用

<b style=";"></b>

3.外部樣式表，就是重新建立一個css文件，再在html中引入css

<link rel="stylesheet" type="text/css" href="">

css選擇器

1.通用選擇器，它能匹配所有元素

* .元素{}

2.元素選擇器，最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

3.類選擇器，型別選擇器匹配文件語言元素型別的名稱。型別選擇器匹配文件樹中該元素型別的每一個例項。類選擇器允許以一種獨立於文件元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。
h1 {font-family: sans-serif;} 這裡的h1匹配html中的所有h1標籤。
4.id選擇器，在某些方面，ID 選擇器類似於類選擇器，不過也有一些重要差別。首先，ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。

#int {font-weight:bold;}

html部分為

<p id="int">文字</p>

5.屬性選擇器，屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

*[屬性]

就是選擇所有某個屬性的元素。
6.後代選擇器又稱為包含選擇器，後代選擇器可以選擇作為某元素後代的元素。我們可以定義後代選擇器來建立一些規則，使這些規則在某些文件結構中起作用，而在另外一些結構中不起作用。

h1 p{color：red；}

也就是說把h1裡的所有p標籤的字型變成紅色。
7子代選擇器
與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。h1>strong
用大於符號連線。
8.偽類選擇器
（1）靜態偽類：只能用於超連結的樣式。如下：

:link 超連結點選之前
:visited 連結被訪問過之後
PS：以上兩種樣式，只能用於超連結。

（2）動態偽類：針對所有標籤都適用的樣式。如下：

:hover “懸停”：滑鼠放到標籤上的時候
:active “啟用”： 滑鼠點選標籤，但是不鬆手時。
:focus 是某個標籤獲得焦點時的樣式（比如某個輸入框獲得焦點）
9.選擇器的優先順序
1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標籤選擇器
6.萬用字元選擇器
7.瀏覽器自定義或繼承
總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
在這裡插入圖片描述

框模型

1.概述
在這裡插入圖片描述
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。
1.內邊距padding
元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
內邊距分為padding-top、padding-right、padding-bottom、padding-left
內邊距的單位可以是百分數也可以是畫素px。
2.外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。
設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
設定外邊距的最簡單的方法就是使用 margin 屬性。margin 屬性接受任何長度單位，可以是畫素、英寸、毫米或 em。margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。
margin後面設定輸入一個數值是表示上下左右都是這個值例如margin：100px；是表示上下左右都是100px，margin後面設定兩個值是表示上下和左右，設定三個值是表示上、左右、下，設定四個值是表示上、右、下、左；padding也是一樣的用法。

背景

CSS 允許應用純色作為背景，也允許使用背景影像建立相當複雜的效果。
CSS 在這方面的能力遠遠在 HTML 之上。

1.背景顏色background-color
元素背景的範圍
background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴充套件到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。background-color後面可以直接加顏色的英文名稱，也可以加顏色的十六進位制，還可以加顏色的三原色rgb（）。

2.背景影像 background-image
要把影像放入背景，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何影像。
如果需要設定一個背景影像，必須為這個屬性設定一個 URL 值：body {background-image: url();}，在url裡面放入圖片的地址。
元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。預設地，背景影像位於元素的左上角，並在水平和垂直方向上重複。
3.背景重複background-repeat
background-repeat 屬性設定是否及如何重複背景影像。預設地，背景影像在水平和垂直方向上重複。background-repeat 屬性定義了影像的平鋪模式。從原影像開始重複，原影像由 background-image 定義，並根據 background-position 的值放置。

repeat 預設。背景影像將在垂直方向和水平方向重複。repeat-x 背景影像將在水平方向重複。repeat-y 背景影像將在垂直方向重複。no-repeat 背景影像將僅顯示一次。inherit 規定應該從父元素繼承 background-repeat 屬性的設定。
4.背景圖片尺寸background-size
background-size 屬性規定背景影像的尺寸。
預設值： auto
繼承性： no
語法background-size: length|percentage|cover|contain;
length
設定背景影像的高度和寬度。
第一個值設定寬度，第二個值設定高度。
如果只設定一個值，則第二個值會被設定為 “auto”。
percentage
以父元素的百分比來設定背景影像的寬度和高度。
第一個值設定寬度，第二個值設定高度。
如果只設定一個值，則第二個值會被設定為 “auto”。
cover
把背景影像擴充套件至足夠大，以使背景影像完全覆蓋背景區域。
背景影像的某些部分也許無法顯示在背景定位區域中。
contain
把影像影像擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。
5.背景定位background-position
用於圖片的定位，直接在後面加入值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

6.背景繪製區域background-clip
規定背景的繪製區域：

div
{
background-color:yellow;
background-clip:content-box;
}

語法：background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框。

7.背景定位區域background-origin
background-origin：content-box padding-box border-box
對內容的定位 對內邊距的定位 和對邊框的定位

在這裡插入圖片描述

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，使用者代理對 CSS2 中定位的支援遠勝於對其它方面的支援，對此不應感到奇怪。
另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流佈局。我們會在後面的章節中明確浮動的含義。

塊狀元素
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。

您可以使用 display 屬性改變生成的框的型別。這意味著，通過將 display 屬性設定為 block，可以讓行內元素（比如 <a>元素）表現得像塊級元素一樣。還可以通過把 display 設定為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文件中的空間。

但是在一種情況下，即使沒有進行顯式定義，也會建立塊級元素。這種情況發生在把一些文字新增到一個塊級元素（比如 div）的開頭。

css定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

CSS position 屬性
通過使用 position 屬性，我們可以選擇 4 種不同型別的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute
元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。

相對定位relative
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。

#box{
  position: relative;
  left: 30px;
  top: 20px;
}

採用相對定位也可以使其成為父級元素，讓其中的子元素在父元素中移動，說白了就是讓子元素改變父級框。

絕對定位absolute

直接在absolute下面設定上下左右四個屬性來定位塊狀元素

#box {
  position: absolute;
  left: 30px;
  top: 20px;
}

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是“相對於”元素在文件中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。

in-index屬性
因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

img
  {
  float:right;
  }

由於塊狀元素一個佔一行，不能同行顯示，所以我們要設定浮動float來控制塊狀元素來使它們在同行顯示。
當某塊狀元素設定了浮動時，它就會從文件流中浮起來，後面的塊狀元素就會向前頂。

float有四個值：
left 元素向左浮動。
right 元素向右浮動。
none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。

clear屬性
當元素有浮動屬性時，會對其父元素或後面的元素產生影響，會出現一個佈局錯亂現象，可以通過消除浮動的方法來解決，浮動元素的影響。

img
  {
  float:left;
  clear:both;
  }

上面講過，當使用float時，下面的元素會自動向上面頂，所以為了不影響下面的塊狀元素，就會使用clear屬性來清除浮動，這樣下面的塊狀元素就不會動了，對在下面獨自佔一行。

clear值：
none：預設值。允許兩邊都可以有浮動物件
left：不允許左邊有浮動物件
right：不允許右邊有浮動物件
both：左右兩側不允許有浮動物件

overflow屬性
值：
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

在這裡插入圖片描述

列表樣式

列表項樣式list-style-type
可能的值：
none 無標記。
disc 預設。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統的希伯來編號方式
armenian 傳統的亞美尼亞編號方式
georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數字
hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
用法：ul.circle {list-style-type:值;}

列表項影像list-style-image
可能的值：
URL 影像的路徑。
none 預設。無圖形被顯示。
inherit 規定應該從父元素繼承 list-style-image 屬性的值。
用法：

ul
  {
  list-style-image:url("");
  }

列表項位置list-style-position】
可能的值：
inside 列表專案標記放置在文字以內，且環繞文字根據標記對齊。
outside 預設值。保持標記位於文字的左側。列表專案標記放置在文字以外，且環繞文字不根據標記對齊。
inherit 規定應該從父元素繼承 list-style-position 屬性的值。
用法：

ul
  {
  list-style-position:inside;
  }

在這裡插入圖片描述

before與after

:before 偽元素在元素之前新增內容。
這個偽元素允許創作人員在元素內容的最前面插入生成內容。預設地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。

:after 偽元素在元素之後新增內容。
這個偽元素允許創作人員在元素內容的最後面插入生成內容。預設地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。

content

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。
可能的值：
none
normal
content specifications
inherit 規定應該從父元素繼承 content 屬性的值。
在這裡插入圖片描述

轉換

簡介：通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

2D轉換

2D轉換包括：
translate()
rotate()
scale()
skew()
matrix()

translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數。
用法：

div
{
transform: translate(50px,100px);
}

rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
用法：

div
{
transform: rotate(50deg);
}

scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數。
用法：

div
{
transform: scale(2,4);
}

skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數。
用法：

	div
{
transform: skew(30deg,20deg);
}

matrix() 方法
matrix() 方法把所有 2D 轉換方法組合在一起。matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
用法：

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

在轉換的過程中，我們還要進行瀏覽器適配。
-ms- IE 9
-moz- Firefox
-webkit- Safari and Chrome
-o- Opera

3D轉換

3D轉換和2D轉換差不多，只是增加了X、Y、Z軸。

rotateX() 方法
通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
用法：

div
{
transform: rotateX(60deg);
}

rotateY() 旋轉
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
用法：

div
{
transform: rotateY(60deg);
}

轉換的屬性包括：
transform 向元素應用 2D 或 3D 轉換。
transform-origin 允許你改變被轉換元素的位置。
transform-style 規定被巢狀元素如何在 3D 空間中顯示。
perspective 規定 3D 元素的透視效果。
perspective-origin 規定 3D 元素的底部位置。
backface-visibility 定義元素在不面對螢幕時是否可見。

過渡

通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果，也就是我們可以看見上述中轉換的過程。

屬性：
transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性
transition-property 規定應用過渡的 CSS 屬性的名稱
transition-duration 定義過渡效果花費的時間。預設是 0
transition-timing-function 規定過渡效果的時間曲線。預設是 “ease”
transition-delay 規定過渡效果何時開始。預設是 0

我們也可以直接用transition後面直接加屬性和時間直接定義。
例如：

div
{
transition: width 2s, height 2s, transform 2s;
}

transition-timing-function 規定過渡效果的時間曲線
可能的值：
linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

動畫

@keyframes 規則
如需在 CSS3 中建立動畫，您需要學習 @keyframes 規則。
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。

首先我們要先宣告動畫的名稱，也就是在@keyframes後面加自定義動畫的名字，然後我們再呼叫動畫。

什麼是動畫：動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

呼叫動畫animation
屬性：
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
animation-name 規定 @keyframes 動畫的名稱
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是
animation-timing-function 規定動畫的速度曲線。預設是 “ease”
animation-delay 規定動畫何時開始。預設是 0
animation-iteration-count 規定動畫被播放的次數。預設是 1
animation-direction 規定動畫是否在下一週期逆向地播放。預設是 “normal”
animation-play-state 規定動畫是否正在執行或暫停。預設是 “running”
animation-fill-mode 規定物件動畫時間之外的狀態

應用方法：

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

動畫的過渡

動畫的過渡和上面所說的過渡是一個性質，在animation後面加屬性。
例如：animation:動畫自定義名字 5s ease-in-out infinite;

相關文章