CSS知識點總結

文章內容可能較多且雜亂，可以查看頁面右方的目錄，以及使用Ctrl+F搜索頁面內容進行內容定位，

常用屬性

推薦搭配檔案使用，可以復制屬性名，到檔案查看該屬性對應的可選值，

??MDN Web Docs

盒模型

寬度：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>		// 圖片

盒模型

圖片來源于：盒模型 - 學習 Web 開發 | MDN (mozilla.org)

內容區：指上圖中的藍色矩形區域，是一個節點的內容區域，可以是文字或圖片等內容，

在CSS盒子模型的默認定義里，你對一個元素所設定的 width與 height只會應用到這個元素的內容區，

源自：box-sizing - CSS：層疊樣式表 | MDN (mozilla.org)

案例：

如果存在一個父盒子包含一個子盒子，子盒子的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 分別對應如下矩陣的位置的引數值

\[\left( \begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix} \right) \]

下面是矩陣和上文其它變化的關系

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\) 是軸的斜率，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551479.html

標籤：Html/Css

上一篇：記錄-做一個檔案拖動到檔案夾的效果

下一篇：返回列表