CSS知識點總結
CSS知識點總結
文章內容可能較多且雜亂，可以查看頁面右方的目錄，以及使用
Ctrl+F搜索頁面內容進行內容定位。
常用屬性
推薦搭配文檔使用，可以復制屬性名，到文檔查看該屬性對應的可選值。
盒模型
-
寬度：width
-
高度：height
-
邊框：border
-
圓角：border-radius
-
外邊距：margin
-
內邊距：padding
-
陰影效果：box-shadow
-
背景：background
-
背景顏色：background-color
-
背景圖片：background-image
-
背景位置：background-position
-
背景大小：background-size
-
背景(圖片)是否重復直到鋪滿：background-repeat
-
過渡效果：transition
-
字體
- 字體大小：font-size
- 字體顏色：color
- 字體粗細：font-weight
- 字體(備選)族：font-family
- 文字間距：letter-spacing
- 文字對齊方式：text-align
- 文字超出范圍的顯示處理：text-overflow
圖片
- object-fit：contain/cover
flex布局
-
使用
display: flex; -
align-items：垂直于主軸方向上的排列方式
-
justify-content：主軸方向上的排列方式
-
flex-grow：容器空間有剩余時的擴大策略
-
flex-shrink：容器空間不夠時的縮小策略
-
flex-wrap：是否自動換行
-
flex-direction：排布方向
偽元素
::before：在DOM元素的前方添加內容::after：在DOM元素的后方添加內容::empty：在DOM元素內容為空時添加內容，可以用于提示用戶"...沒有內容"之類的情景
偽類
:hover：鼠標覆蓋時觸發:focus：鼠標點擊或者通過tab按鍵聚焦時觸發，常用于輸入框:blur：失去焦點時，常用于輸入框
transform
- scale：放縮大小
- translate：平移
- rotate：旋轉
動畫
-
animation：使用動畫
-
keyframes：定義動畫
基礎知識點
行內元素與塊級元素
- 塊級元素獨占一行，行內元素與其它元素在同一行；
- 行內元素的width和height無效；
- 行內元素與塊級元素的切換：
display: inline;或display: block; - 行內塊元素同時擁有二者的特點：
display: inline-block;
常見塊級元素
<div> // 定義文檔中的分區或節
<form> // 創建 HTML 表單
<h1> // 定義最大的標題
<h2> // 定義副標題
<h3> // 定義標題
<h4> // 定義標題
<h5> // 定義標題
<h6> // 定義最小的標題
<hr> // 創建一條水平線
<li> // 標簽定義列表項目
<ol> // 定義有序列表
<ul> // 定義無序列表
<p> // 標簽定義段落
<table> // 標簽定義 HTML 表格
<tbody> // 標簽表格主體（正文）
<td> // 表格中的標準單元格
<tfoot> // 定義表格的頁腳（腳注或表注）
<th> // 定義表頭單元格
<thead> // 標簽定義表格的表頭
<tr> // 定義表格中的行
常見行內元素
<a> // 標簽可定義錨
<b> // 字體加粗
<br> // 換行
<i> //
<label> // 標簽為 input 元素定義標注（標記）
<span> // 組合文檔中的行內元素
<sub> // 定義下標文本
<sup> // 定義上標文本
<textarea> // 多行的文本輸入控件
常見行內塊元素
<button> // 按鈕
<input> // 文本輸入框
<textarea> // 文本域(多行文本輸入)
<select> // 下拉選擇框
<img> // 圖片
盒模型
內容區：指上圖中的藍色矩形區域，是一個節點的內容區域，可以是文字或圖片等內容。
在CSS盒子模型的默認定義里，你對一個元素所設置的
width與height只會應用到這個元素的內容區。
案例：
如果存在一個父盒子包含一個子盒子，子盒子的width設置為100%，如果子盒子存在邊框或內邊距，則子盒子會溢出父盒子的范圍，如下圖：
box-sizing
該CSS屬性的默認值是content-box，即以內容區決定實際寬高。
另一個常用的值是border-box，指的是以(邊框+內邊距+內容區)決定實際寬高，更符合直覺，推薦使用。
推薦寫法：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
-
*是通配符，表示每一個頁面元素都會匹配該規則。 -
由于部分html元素會自帶內外邊距，根據個人習慣可以考慮將自帶的內外邊距清空，后續需要再設置。
-
將
box-sizing設置為人性化的border-box。
居中方法
基本上所有主流瀏覽器都支持彈性布局(flex布局)，下文的多種思路大多數都只是提供參考，flex布局可以完成絕大多數對齊需求。
水平居中對齊
元素居中對齊
使用margin: auto;，需要設置width屬性。
文本居中對齊
文本在元素內居中對齊：text-align: center;
圖片居中對齊
變成塊元素，然后使
用margin：
img{
display: block;
margin: auto;
width: 40%;
}
左右對齊
使用定位方式
position: absolute;
使用position通常<body>元素會設置margin和padding.
使用float方式
float: right; float: left;
通常對<body>元素的外邊距和內邊距進行預定義。
如果子元素的高度大于父元素，且子元素設置了浮動，那么子元素將溢出。可以在父元素上添加overflow: auto;來解決子元素溢出的問題。
垂直居中對齊
使用padding
父盒子使用padding，子元素可以實現垂直居中：
.center{
padding: 70px 0;
/*...*/
}
如果要文本水平和垂直都居中：
.center{
padding: 70px 0;
text-align: center;
/*...*/
}
使用line-height
.center{
line-height: 200px;
height: 200px;
text-align: center;
}
使用position和transform
.center{
height: 200px;
position: relative;
border: 3px solid green;
}
.center p{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
長度單位
絕對長度單位
| 長度單位 | 說明 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸，inch，(1in = 96px = 2.54cm) |
| px | 像素( 1px = \(\frac1{96}\) in) |
| pt | point，磅，點，（1pt = \(\frac1{72}\)in） |
| pc | pica，派卡，（1pc = 12pt） |
相對長度單位
| 長度單位 | 說明 |
|---|---|
| em | 相對于自身 font-size（字體大小）屬性的值，如果自身沒有設置，則繼承父元素 font-size 屬性的值，1em 等同于 font-size 屬性值。 |
| rem | 相對于根元素<html>的 font-size 屬性的大小，比如根元素的 font-size 是 100px，那么 1.2rem 就相當于 120px。 |
| ex | 相對于所用字體中小寫英文字母 x 的高度，若無法確定 x 的高度則使用 0.5em 計算.。 |
| ch | 相對于所用字體中數字 0 的高度，若無法確定 0 的高度則使用 0.5em 計算。 |
| vw | 相對于瀏覽器窗口的寬度，1vw = 窗口寬度的 1%。 |
| vh | 相對于瀏覽器窗口的高度，1vh = 窗口高度的 1%。 |
| vmin | vw與vh中較小的值。 |
| vmax | vw與vh中較大的值。 |
| % | 相對于父元素寬度或字體大小的百分比. |
transform
平移translate()
兩個參數：向右平移的距離，向下平移的距離。
旋轉rotate()
一個參數：角度，單位deg。
- 正值：順時針旋轉；
- 負值：逆時針旋轉。
縮放scale()
如果輸入兩個參數，則表示：寬度倍數，高度倍數。
如果輸入一個參數，則表示：寬高倍數。
傾斜skew()
兩個參數：X軸傾斜角度，Y軸傾斜角度。
矩陣matrix()
矩陣是最萬能，但是最繁瑣的寫法，使用線性變化可以實現以上的各種變化。
包含六個參數：a,b,c,d,e,f 分別對應如下矩陣的位置的參數值
下面是矩陣和上文其它變化的關系
matrix() & translate()
transform:matrix(1,0,0,1,tx,ty);
tx：水平偏移距離
ty：垂直偏移距離
matrix() & scale()
transform:matrix(sx,0,0,sy,0,0);
sx：水平縮放倍數
sy：垂直縮放倍數
matrix() & rotate()
transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0);
θ是順時針旋轉的角度。
matrix() & skew()
transform:matrix(1,tan(θy),tan(θx),1,0,0);
θx表示X軸傾斜的角度，θy表示Y軸傾斜的角度。
鏡像對稱
matrix((1-k*k)/(1+k*k),2k/(1+k*k),2k/(1+k*K),(k*k-1)/(1+k*k),0,0)
其中 \(k\) 是軸的斜率。
浙公網安備 33010602011771號