web前端学习之——页面美妆师css3基础篇
頁面美妝師css3基礎
結構(html)與樣式(css)相分離
1.css基本語法規范
1.1 行內式（內聯樣式）
是通過標簽的style屬性來設置元素的樣式
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>1.2 內部樣式表（內嵌樣式表）
是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義
<head> <style type="text/CSS"> 選擇器（選擇的標簽） { 屬性1: 屬性值1; 屬性2: 屬性值2; 屬性3: 屬性值3; } </style> </head>1.3 外部樣式表（外鏈式）
是將所有的樣式放在一個或多個以**.CSS**為擴展名的外部樣式表文件中，
通過link標簽將外部樣式表文件鏈接到HTML文檔中
<head> <link rel="stylesheet" type="text/css" href="css文件路徑"> </head>| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
2.常用的選擇器用法與技巧
2.1 標簽選擇器
-
概念：
標簽選擇器（元素選擇器）是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式。
-
語法：
-
作用：
標簽選擇器 可以把某一類標簽全部選擇出來 比如所有的div標簽 和 所有的 span標簽
-
優點：
是能快速為頁面中同類型的標簽統一樣式
-
缺點：
不能設計差異化樣式。
2.2 類選擇器
類選擇器使用“.”（英文點號）進行標識，后面緊跟類名.
-
語法：
- 類名選擇器
- 標簽
-
優點：
- 可以為元素對象定義單獨或相同的樣式。 可以選擇一個或者多個標簽
-
注意
- 類選擇器使用“.”（英文點號）進行標識，后面緊跟類名(自定義，我們自己命名的)
- 長名稱或詞組可以使用中橫線來為選擇器命名。
- 不要純數字、中文等命名， 盡量使用英文字母來表示。
多類名
-
各個類名中間用空格隔開。
-
多類名選擇器在后期布局比較復雜的情況下，還是較多使用的。
2.3 id 選擇器
id選擇器使用#進行標識，后面緊跟id名
-
其基本語法格式如下：
-
id選擇器
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } -
標簽
<p id="id名"></p>
-
-
元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
-
用法基本和類選擇器相同。
2.4 通配符選擇器
-
概念
通配符選擇器用*號表示， * 就是 選擇所有的標簽 他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。
-
其基本語法格式如下：
例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。
* { margin: 0; /* 定義外邊距*/ padding: 0; /* 定義內邊距*/}-
注意：
會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用
基礎選擇器總結
| 標簽選擇器 | 可以選出所有相同的標簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
| 類選擇器 | 可以選出1個或者多個標簽 | 可以根據需求選擇 | 非常多 | .nav { color: red; } |
| id選擇器 | 一次只能選擇器1個標簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
3.復合選擇器
3.1 后代選擇器
-
概念：
后代選擇器又稱為包含選擇器
-
作用：
用來選擇元素或元素組的子孫后代
-
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
- 語法：
- 當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
- 子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內 的標簽
3.2 子元素選擇器
-
作用：
子元素選擇器只能選擇作為某元素**子元素(親兒子)**的元素。
-
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接
-
語法：
3.3 交集選擇器
-
條件
交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
-
語法：
- 其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。
3.4 并集選擇器
- 應用：
- 如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔。
- 并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
- 語法：
-
任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
-
記憶技巧：
并集選擇器通常用于集體聲明 ，逗號隔開的，所有選擇器都會執行后面樣式，逗號可以理解為 和的意思。
3.5 鏈接偽類選擇器
作用：
用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
-
a:link /* 未訪問的鏈接 */
-
a:visited /* 已訪問的鏈接 */
-
a:hover /* 鼠標移動到鏈接上 */
-
a:active /* 選定的鏈接 */
注意
- 寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。否則可能引起錯誤。
- 記憶法
- love hate 愛上了討厭
- **lv **包包 非常 hao
- 因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
- 因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
- 實際工作開發中，我們很少寫全四個狀態，
復合選擇器總結
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 .nav a |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是**>** .nav>p |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |
4.css三大特性
4.1 css層疊性
-
概念：
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉
-
原則：
- 樣式沖突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
- 樣式不沖突，不會層疊
4.2 css繼承性
-
概念：
子標簽會繼承父標簽的某些樣式，如文本顏色和字號。
想要設置一個可繼承的屬性，只需將它應用于父元素即可。
簡單的理解就是： 子承父業。
- 注意：
- 恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。
- 子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）
4.3 css優先級
概念：
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時，
- 選擇器相同，則執行層疊性
- 選擇器不同，就會出現優先級的問題。
1>. 權重計算公式
| 繼承或者 * | 0,0,0,0 |
| 每個元素（標簽選擇器） | 0,0,0,1 |
| 每個類，偽類 | 0,0,1,0 |
| 每個ID | 0,1,0,0 |
| 每個行內樣式 style="" | 1,0,0,0 |
| 每個!important 重要的 | ∞ 無窮大 |
2>. 權重疊加
我們經常用交集選擇器，后代選擇器等，是有多個基礎選擇器組合而成，那么此時，就會出現權重疊加。
注意：
3>. 繼承權重為0
1） 如果選中了，那么以上面的公式來計權重。誰大聽誰的。
2） 如果沒有選中，那么權重是0，因為繼承的權重為0.
CSS注釋規則：
/* 需要注釋的內容 */ 進行注釋的，即在需要注釋的內容前使用 "/*" 標記開始注釋，在內容的結尾使用 "*/"結束。標簽顯示模式*
1). 塊級元素
- 塊級元素的特點
（1）比較霸道，自己獨占一行
（2）高度，寬度、外邊距以及內邊距都可以控制。
（3）寬度默認是容器（父級寬度）的100%
（4）是一個容器及盒子，里面可以放行內或者塊級元素。
- 注意：
- 只有 文字才 能組成段落 因此 p 里面不能放塊級元素，特別是 p 不能放div
- 同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。
2). 行內元素
- 行內元素的特點：
（1）相鄰行內元素在一行上，一行可以顯示多個。
（2）高、寬直接設置是無效的。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。
注意：
- 鏈接里面不能再放鏈接。
- 特殊情況a里面可以放塊級元素，但是給a轉換一下塊級模式最安全。
3). 行內塊元素
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
*顯示模式總結
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
行高 = 上距離 + 內容高度 + 下距離
行高和高度的三種關系
- 如果 行高 等 高度 文字會 垂直居中
- 如果行高 大于 高度 文字會 偏下
- 如果行高小于高度 文字會 偏上
@css字體樣式屬性
① font字體
1.1 font-size:大小
-
作用：
font-size屬性用于設置字號
-
單位：
- 可以使用相對長度單位，也可以使用絕對長度單位。
- 相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。
1.2 font-family:字體
-
作用：
font-family屬性用于設置哪一種字體。
-
網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑
-
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體， 如果都沒有，則以我們電腦默認的字體為準
- 各種字體之間必須使用英文狀態下的逗號隔開。
- 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
- 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: “Times New Roman”;。
- 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
1.3 font-weight:字體粗細
-
在html中如何將字體加粗我們可以用標簽來實現
- 使用 b 和 strong 標簽是文本加粗。
-
可以使用CSS 來實現，但是CSS 是沒有語義的。
屬性值描述 normal 默認值（不加粗的） bold 定義粗體（加粗的） 100~900 400 等同于 normal，而 700 等同于 bold 我們重點記住這句話
1.4 font-style:字體風格
- 在html中如何將字體傾斜我們可以用標簽來實現
- 字體傾斜除了用 i 和 em 標簽，
- 可以使用CSS 來實現，但是CSS 是沒有語義的
font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：
| normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style: normal; |
| italic | 瀏覽器會顯示斜體的字體樣式。 |
font：綜合設置
- 基本語法格式如下：
- 注意：
- 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
- 其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
{font總結}
| font-size | 字號 | 我們通常用的單位是px 像素，一定要跟上單位 |
| font-family | 字體 | 實際工作中按照團隊約定來寫字體 |
| font-weight | 字體粗細 | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
| font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現 |
② css外觀屬性
2.1 color:文本顏色
-
作用：
color屬性用于定義文本的顏色，
-
其取值方式有如下3種：
| 預定義的顏色值 | red，green，blue，還有我們的御用色 pink |
| 十六進制 | #FF0000，#FF6600，#29D794 |
| RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
注意
我們實際工作中， 用 16進制的寫法是最多的，而且我們更喜歡簡寫方式比如 #f00 代表紅色
2.2 text-align:文本對齊方式
-
作用：
text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性
-
其可用屬性值如下：
| left | 左對齊（默認值） |
| right | 右對齊 |
| center | 居中對齊 |
-
注意：
是讓盒子里面的內容水平居中， 而不是讓盒子居中對齊
2.3 line-height:行間距
-
作用：
line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
-
單位：
line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px
-
技巧：一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;
2.4 text-indent:首行縮進
-
作用：
text-indent屬性用于設置首行文本的縮進，
-
屬性值
- 其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,
- 建議使用em作為設置單位。
2.5 text-decoration:文本的裝飾
? text-decoration 通常我們用于給鏈接修改裝飾效果
| none | 默認。定義標準的文本。 取消下劃線（最常用） |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
| overline | 定義文本上的一條線。（不用） |
| line-through | 定義穿過文本下的一條線。（不常用） |
{css外觀屬性總結}
| color | 顏色 | 我們通常用 十六進制 比如 而且是簡寫形式 #fff |
| line-height | 行高 | 控制行與行之間的距離 |
| text-align | 水平對齊 | 可以設定文字水平的對齊方式 |
| text-indent | 首行縮進 | 通常我們用于段落首行縮進2個字的距離 text-indent: 2em; |
| text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
**頁面升級化妝師css3進階
1.css盒子模型
所謂盒子模型：就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
- 盒子模型有元素的內容、邊框（border）、內邊距（padding）、和外邊距（margin）組成。
- 盒子里面的文字和圖片等元素是 內容區域
- 盒子的厚度 我們成為 盒子的邊框
- 盒子內容與邊框的距離是內邊距（類似單元格的 cellpadding)
- 盒子與盒子之間的距離是外邊距（類似單元格的 cellspacing）
盒子邊框border
border : border-width || border-style || border-color邊框的樣式：
- none：沒有邊框即忽略所有邊框的寬度（默認值）
- solid：邊框為單實線(最為常用的)
- dashed：邊框為虛線
- dotted：邊框為點線
| border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
| border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
| border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
| border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
內邊距padding
padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
padding:值;| 1個值 | padding：上下左右內邊距; |
| 2個值 | padding: 上下內邊距 左右內邊距 ； |
| 3個值 | padding：上內邊距 左右內邊距 下內邊距； |
| 4個值 | padding: 上內邊距 右內邊距 下內邊距 左內邊距 ； |
外邊距margin
margin屬性用于設置外邊距。 margin就是控制盒子和盒子之間的距離
margin:值;| 1個值 | margin：上下左右外邊距; |
| 2個值 | margin: 上下外邊距 左右外邊距 ； |
| 3個值 | margin：上外邊距 左右外邊距 下外邊距； |
| 4個值 | margin: 上外邊距 右外邊距 下外邊距 左外邊距 ； |
塊級盒子水平居中
常見的寫法，以下下三種都可以。
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
2.css背景技巧
-
背景顏色(backgroung-color)
background-color:顏色值; 默認的值是 transparent 透明的 -
背景圖片(backgroung-image)
background-image : none | url (url)參數作用 none 無背景圖（默認的） url 使用絕對或相對地址指定背景圖像 -
背景平鋪(backgroung-repeat)
background-repeat : repeat | no-repeat | repeat-x | repeat-y參數作用 repeat 背景圖像在縱向和橫向上平鋪（默認的） no-repeat 背景圖像不平鋪 repeat-x 背景圖像在橫向上平鋪 repeat-y 背景圖像在縱向平鋪 -
背景位置(backgroung-position)
background-position : length || lengthbackground-position : position || position參數值 length 百分數 | 由浮點數字和單位標識符組成的長度值 position top | center | bottom | left | center | right 方位名詞 注意：
- 必須先指定background-image屬性
- position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。
- 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關，比如left top和top left效果一致
- 如果只指定了一個方位名詞，另一個值默認居中對齊。
- 如果position 后面是精確坐標， 那么第一個，肯定是 x 第二的一定是y
- 如果只指定一個數值,那該數值一定是x坐標，另一個默認垂直居中
- 如果指定的兩個值是 精確單位和方位名字混合使用，則第一個值是x坐標，第二個值是y坐標
-
背景附著(backgroung-attachment)
背景附著就是解釋背景是滾動的還是固定的
background-attachment : scroll | fixed -
背景透明
background: rgba(0, 0, 0, 0.3); -
背景簡寫
background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;背景總結
屬性作用值 background-color 背景顏色 預定義的顏色值/十六進制/RGB代碼 background-image 背景圖片 url(圖片路徑) background-repeat 是否平鋪 repeat/no-repeat/repeat-x/repeat-y background-position 背景位置 length/position 分別是x 和 y坐標， 切記 如果有 精確數值單位，則必須按照先X 后Y 的寫法 background-attachment 背景固定還是滾動 scroll/fixed 背景簡寫 更簡單 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置; 他們沒有順序 背景透明 讓盒子半透明 background: rgba(0,0,0,0.3); 后面必須是 4個值
3.圓角/陰影/過渡
-
css3圓角
border-radius:length(數值或百分比); -
css3陰影
box-shadow:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影； -
css3過渡
可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
transition:all(其他屬性) .3s(時間);屬性描述 transition 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 transition-property 規定應用過渡的 CSS 屬性的名稱。 transition-duration 定義過渡效果花費的時間。默認是 0。 transition-timing-function 規定過渡效果的時間曲線。默認是 “ease”。 transition-delay 規定過渡效果何時開始。默認是 0。
4.定位和浮動
? ——css布局的三種機制
- 塊級元素會獨占一行，從上向下順序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
- 常用元素：span、a、i、em等
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
- 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是后面的 js 特效。
①. 浮動
1.1 浮動
1). 浮動口訣之 浮
浮動——浮浮浮~~~漂浮在普通流的上面。 脫離標準流。 俗稱 “脫標”
2). 浮動口訣之 漏
浮動——漏漏漏~ 浮動的盒子，把自己原來的位置漏給下面標準流的盒子，就是不占有原來位置，是脫離標準流的，我們俗稱 “脫標”。
3). 浮動口訣之 特
浮動——特性 float屬性會改變元素display屬性。
任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內塊極其相似。
| 浮 | 加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。 |
| 漏 | 加了浮動的盒子是不占位置的，它原來的位置漏給了標準流的盒子。 |
| 特 | 特別注意：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙 |
1). 浮動元素與父盒子的關系
- 子盒子的浮動參照父盒子對齊
- 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
2). 浮動元素與兄弟盒子的關系
- 浮動的，那么當前盒子會與前一個盒子的頂部對齊；
- 普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方。
1.2. 清楚浮動
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標準流盒子。
1).額外標簽法(隔墻法)
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。- 優點： 通俗易懂，書寫方便
- 缺點： 添加許多無意義的標簽，結構化較差。
2).父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現。優點： 代碼簡潔
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
3).使用after偽元素清除浮動
:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 專有 */- 優點： 符合閉合浮動思想 結構語義化正確
- 缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
- 代表網站： 百度、淘寶網、網易等
4).使用雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after { content:""; display:table; }.clearfix:after { clear:both;}.clearfix { *zoom:1;}-
優點： 代碼更簡潔
-
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
-
代表網站： 小米、騰訊等
②. 定位
作用：將盒子定在某一個位置 自由的漂浮在其他盒子(包括標準流和浮動)的上面
2.1 邊偏移
| top | top: 80px | 頂端偏移量，定義元素相對于其父元素上邊線的距離。 |
| bottom | bottom: 80px | 底部偏移量，定義元素相對于其父元素下邊線的距離。 |
| left | left: 80px | 左側偏移量，定義元素相對于其父元素左邊線的距離。 |
| right | right: 80px | 右側偏移量，定義元素相對于其父元素右邊線的距離 |
2.2 定位模式
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
2.2.1 靜態定位(static) - 了解
- 靜態定位是元素的默認定位方式，無定位的意思。它相當于 border 里面的none， 不要定位的時候用。
- 靜態定位 按照標準流特性擺放位置，它沒有邊偏移。
- 靜態定位在布局時我們幾乎不用的
2.2.2 相對定位(relative) - 重要
相對定位是元素相對于它 原來在標準流中的位置 來說的。（自戀型）
- 相對于 自己原來在標準流中位置來移動的
- 原來在標準流的區域繼續占有，后面的盒子仍然以標準流的方式對待它。
2.2.3 絕對定位(absolute) - 重要
絕對定位是元素以帶有定位的父級元素來移動位置 （拼爹型）
- 將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
2.2.4 固定定位(fixed) - 重要
固定定位是絕對定位的一種特殊形式： （認死理型） 如果說絕對定位是一個矩形 那么 固定定位就類似于正方形
- 跟父元素沒有任何關系；單獨使用的
- 不隨滾動條滾動。
| 靜態static | 不脫標，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 相對定位relative | 不脫標，占有位置 | 相對自身位置移動 | 不能 | 基本單獨使用 |
| 絕對定位absolute | 完全脫標，不占有位置 | 相對于定位父級移動位置 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標，不占有位置 | 相對于瀏覽器移動位置 | 能 | 單獨使用，不需要父級 |
5.偽類和偽元素
- 偽元素和偽類都不會出現在源文檔或者文檔樹中
- 偽類允許出現在選擇器的任何位置，而一個偽元素只能跟在選擇器的最后一個簡單選擇器后面
- 偽元素名和偽類名都是大小寫不敏感的
- 有些偽類是互斥的，而其它的可以同時用在一個元素上。（在規則沖突的情況下，常規層疊順序決定結果）。
- 偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rTKMfzDd-1619590982024)(C:\Users\ChangLian\Desktop\Web前端-筆記\image\14333787-dac5cb3f7528f34e.webp)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ygNLvmpD-1619590982027)(C:\Users\ChangLian\Desktop\Web前端-筆記\image\14333787-0ae823b149ed21f1.webp)]
6.css3漸變
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
-
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
background-image: linear-gradient(direction(起始位置), color-stop1, color-stop2, ...); -
徑向漸變（Radial Gradients）- 由它們的中心定義
background-image: radial-gradient(shape size at position(位置處的形狀尺寸), start-color(開始顏色), ..., last-color(結束顏色));
7.css3的2D和3D變換
CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。
7.1 、2D轉換
-
**translate()**方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
transform:translate(值x,值y); -
**rotate()**方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
transform:rotate(值deg); -
**scale()**方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數：
transform:scale(...值); -
**skew()**方法分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
skewX();表示只在X軸(水平方向)傾斜。
? skewY();表示只在Y軸(垂直方向)傾斜。
transform:skew(...值deg);matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
7.2 、3D轉換
? 3D轉換必須加透視perspective，否則無法直觀顯示轉換效果。
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉化。 |
| translateX(x) | 定義 3D 轉化，僅使用用于 X 軸的值。 |
| translateY(y) | 定義 3D 轉化，僅使用用于 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉化，僅使用用于 Z 軸的值。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
| perspective(n) | 定義 3D 轉換元素的透視視圖。 |
8.css3動畫
動畫是 CSS3 中最具顛覆性的特征之一，可通過設置多個節點來精確的控制一個或者一組動畫，從而實現復雜的動畫效果
動畫的基本使用
- 先定義動畫
- 在調用定義好的動畫
語法格式(定義動畫)
@keyframes 動畫名稱 { 0% { width: 100px; } 100% { width: 200px }}語法格式(使用動畫)
- 0% 是動畫的開始，100 % 是動畫的完成，這樣的規則就是動畫序列
- 在 @keyframs 中規定某項 CSS 樣式，就由創建當前樣式逐漸改為新樣式的動畫效果
- 動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數
- 用百分比來規定變化發生的時間，或用 from 和 to，等同于 0% 和 100%
| @keyframes | 規定動畫。 |
| animation | 所有動畫屬性的簡寫屬性。 |
| animation-name | 規定 @keyframes 動畫的名稱。 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 |
| animation-timing-function | 規定動畫的速度曲線。默認是 “ease”。 |
| animation-fill-mode | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 |
| animation-delay | 規定動畫何時開始。默認是 0。 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 “normal”。 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 “running”。 |
動畫簡寫方式
/* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */animation: name duration timing-function delay iteration-count direction fill-mode知識要點
- 簡寫屬性里面不包含 animation-paly-state
- 暫停動畫 animation-paly-state: paused; 經常和鼠標經過等其他配合使用
- 要想動畫走回來，而不是直接調回來：animation-direction: alternate
- 盒子動畫結結束后，停在結束位置：animation-fill-mode: forwards
總結
以上是生活随笔為你收集整理的web前端学习之——页面美妆师css3基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （31）2021-01-20（JSON字
- 下一篇： 中标麒麟系统下（Neokylin7）达梦