css知識點總結（部分知識點）
CSS知識點總結
css易忽略點
1、定義
網頁三要素:
HTML標籤決定頁面上元素的基本結構
CSS用於設定HTML元素的樣式
JavaScript用於控制頁面上的行為
2、四種css匯入的用法
CSS 有四種不同的用法
1、 內聯樣式
<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > </div>2、內部樣式
<style type="text/css"> .... </style>3、外部樣式表
注：單獨的 CSS (字尾是 .css )檔案
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>4、 @import
注：在
style中匯入注：@import 用於從其他樣式表匯入樣式規則
@import url;url 表示要引入資源位置
@import 'custom.css'; @import url("fineprint.css") print;例：
<style type="text/css"> @import url("css/123.css"); </style><div></div>
3、link和@import的區別
- 從屬關係
1.1 link：link是HTML提供的標籤，不僅可以載入CSS，還可以定義rel等屬性
1.2 @import：@import是css提供的語法，只有匯入樣式表的作用- 載入順序
2.1 link：link在頁面載入時CSS同時被載入
2.2 @import：引入的CSS要等頁面載入完畢後再載入- 相容性問題
3.1 link是HTML提供的語法，不存在相容性問題3.2 @import是css2.1提供的語法，ie5以上才相容- DOM可控性
js控制DOM時，可以通過插入link標籤來改變樣式，不能通過@import改變- 權重問題（有爭議）
link標籤引入的樣式權重大於@import標籤
4、關於重置按鈕
注：關於重置按鈕的初始值是其設定的value值，若輸入後點擊重置按鈕，它會恢復原來的初始value值。
<input type="text" name="" id="" value="hhh" />
<input type="reset" name="" id="" value="重置" />
5、優先順序
5.1、樣式的優先順序
內聯樣式 > 內部樣式 > 外部樣式
可以在屬性值的後面新增 !important 提升樣式的優先順序
5.1、選擇器的優先順序
id選擇器>class選擇器>標籤選擇器
注：其他選擇器根據情況而定，具體可以參照菜鳥
6、選擇器（屬性選擇器）
[attributeName] {
.....
}
7、偽類的順序
a:link未訪問狀態
a:visited訪問過後狀態
a:hover滑鼠懸停狀態
a:active啟用選定狀態注：定義順序必須是此順序
8、外邊距摺疊
如果你有兩個外邊距相接的元素，這些外邊距將合併為一個外邊距，即最大的單個外邊距的大小。
注：此案例中按照我們的理解的應該是80px，但是由於這個現象它們的間隔是50px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>
</body>
</html>
9、display
9.1、display屬性的值
block（塊元素）：元素呈現塊元素特徵，此元素前後會帶有換行符
inline（行元素）：元素呈現行內元素特徵，元素前後沒有換行符
inline-block（行內塊元素）：元素呈現行內並保持寬和高的屬性，行內塊元素
none：元素不做呈現，不佔網頁空間。與visibility：hidden不同，visibility不顯示但佔用網頁空間。
flex：彈性佈局
10、盒子模型
10.1、盒子模型
CSS中組成一個塊級盒子需要:
Content box: 這個區域是用來顯示內容，大小可以通過設定 width 和 height .
Padding box: 包圍在內容區域外部的空白區域； 大小通過 padding 相關屬性設定。
Border box: 邊框盒包裹內容和內邊距。大小通過 border 相關屬性設定。
Margin box: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小通過 margin 相關屬
性設定。
注: margin 不計入實際大小 —— 當然，它會影響盒子在頁面所佔空間，但是影響的是盒子外部空間。盒子的範圍到邊框為止 —— 不會延伸到margin。
10.2、替代（IE）盒模型
注：預設瀏覽器會使用標準模型。如果需要使用替代模型，您可以通過為其設定 box-sizing: border-box來實現。 這樣就可以告訴瀏覽器使用 border-box 來定義區域，從而設定您想要的大小。
11、背景樣式
11.1、背景附加（background-attachment ）
scroll : 使元素的背景在頁面滾動時滾動。如果滾動了元素內容，則背景不會移動。實際上，背
景被固定在頁面的相同位置，所以它會隨著頁面的滾動而滾動。
fixed : 使元素的背景固定在檢視埠上，這樣當頁面或元素內容滾動時，它就不會滾動。它將始
終保持在螢幕上相同的位置。
local : 這個值是後來新增的(它只在Internet Explorer 9+中受支援，而其他的在IE4+中受支援)，
因為滾動值相當混亂，在很多情況下並不能真正實現您想要的功能。區域性值將背景固定在設定的元
素上，因此當您滾動元素時，背景也隨之滾動。
11.2、background-clip
border-box 背景延伸至邊框外沿（但是在邊框下層）
padding-box 背景延伸至內邊距（ padding ）外沿。不會繪製到邊框處。
content-box 背景被裁剪至內容區（content box）外沿
12、書寫模式（writing-mode ）
writing-mode 屬性使我們從一種模式切換到另一種模式。
writing-mode 的三個值分別是：
horizontal-tb : 塊流向從上至下。對應的文字方向是橫向的。
vertical-rl : 塊流向從右向左。對應的文字方向是縱向的。
vertical-lr : 塊流向從左向右。對應的文字方向是縱向的。
13、overflflow屬性
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 隱藏掉溢位。其餘內容是不可見的。
scroll 顯示滾動條，即使沒有足夠多引起溢位的內容
auto 如果內容需要被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容
14、自定義滑鼠的樣式
cursor:url(xxx),auto
15、溢位文字處理
.xxx{
overflow: hidden; /* 溢位部分 隱藏 */
white-space: nowrap; /* 空白部分 不換行 */
text-overflow: ellipsis; /* 溢位的文字變成省略號 */
}
<div class="xxx" title="全部原文字">
文字部分.....
</div>
16、關於網站整體變黑
filter:grayscale(1);
17、線上編輯漸變色工具
https://cssgradient.io/
18、關於尺寸
px:畫素
%:父元素寬度的百分比
em:1em指其font-size的大小 預設大小為16px
rem:1rem指其根節點font-size的大小