HTML CSS
h5語義元素
header 定義文檔或節的頁眉
nav 定義導航鏈接的容器
banner 定義文檔的版心
section 定義文檔中的節
article 定義獨立的自包含文章
aside 定義內容之外的內容（比如側欄）
footer 定義文檔或節的頁腳
details 定義額外的細節
summary 定義 details 元素的標題
contact 定義留言版信息
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video
html相關概念&&建站流程
- html
- 英文：Hyper Text Markup Language
- 中文：超文本標記語言
- 標記語言：描述網頁的一種語言
- 超文本：可以進行點擊且跳轉的文本或者圖片等
- 網頁的組成部分
- 結構(html)==w3c(萬維網聯盟)
- 樣式(css)==w3c(萬維網聯盟)
- 行為(js)==ECMA(歐洲廠商聯盟)
- html的發展史
- xhtml 可擴展的超文本標記語言
- xhtml和html的區別
- xhtml后面必須帶斜杠
- xhtml的屬性值必須是雙引號
- xhtml的標簽必須都是小寫
- xhtml和html的區別
- 建站流程
- 申請域名
- 租用服務器
- 建設網站
- 產品經理==>原型圖
- ui設計師==>ui設計圖
- 前端工程師==>將ui設計圖百分百還原
- 后端工程師==>將靜態網頁轉換成動態(數據動態)的
- 測試工程師==> 保證頁面功能/性能沒有問題
- 推廣
- 維護
html的基本結構
- 手動編寫
- 自動生成網頁基本結構
- 新建一個.html后綴名的文件
- 英文狀態下，寫出 ! 按回車或者tab鍵
- alt+b運行到瀏覽器
html的語法
- 標簽/標記/元素：放到尖括號里面的單詞
- 雙標簽/標記：成對出現的標簽
- 單標簽/標記/空標簽：單獨出現的標簽
- 屬性：放到標簽后面，且用空格隔開
- 屬性值：屬性和屬性值之間用等號連接，屬性值要用引號引起來，可以出現多個屬性，且每個屬性之間用空格隔開
html的基本標簽
- 文章類
- 標題標簽 h1-h6
- 雙標簽
- h1-h6字體逐漸變小，且加粗
- 獨占一行
- 段落標簽 p
- 雙標簽
- 獨占一行
- 修飾類標簽
- 加粗 b strong
- 雙標簽
- 加粗
- 在同一行顯示
- 傾斜 i em
- 雙標簽
- 傾斜
- 同一行顯示
- 標題標簽 h1-h6
- 下劃線 u
- 雙標簽
- 加下劃線
- 在同一行顯示
- 刪除線 del
- 雙標簽
- 加刪除線
- 在同一行顯示
- 下標 sub
- 上標 sup 0
- 水平線 hr
- 單標簽
- 換行標簽 br
- 單標簽，強制換行
- 空格 ?
- 左尖括號 <
- 右尖括號 >
- 版權符號 ?
- 注冊商標 ?
- 單標簽
- src 圖片路徑
- 絕對路徑
- 相對路徑
- 當前文件和目標文件在同一個目錄下面，直接圖片名.后綴
- 當前文件和目標文件的文件夾在同一個目錄下面 目標文件文件夾
名/圖片名.后綴 - 當前文件的文件夾和目標文件的文件夾在同一個目錄下面，當前文件套幾層就寫幾個…/目標文件文件夾名/圖片名.后綴
- 雙標簽
- 自帶下劃線，自帶字體顏色
- href: 鏈接的地址 默認值 href="#"
- target
- _self 當前窗口打開 默認值
- _blank 新開一個窗口打開
vscode快捷鍵
- 保存 ctrl+s
- 注釋 ctrl+/
- 向前縮進 shift+tab
- 向后縮進 tab
- 全選 ctrl+a
- 搜索 ctrl+f
- 撤銷 ctrl+z
- 反撤銷 ctrl+y
html的基本標簽
- 列表標簽
-
無序列表
<ul><li>哈哈1</li><li>哈哈2</li><li>哈哈3</li> </ul>- 快速生成4個li，里面的文本是哈哈+數值
ul>li*4{哈哈$} - ul和li都是獨占一行
- 應用場景：導航/新聞列表/商品列表
- 快速生成4個li，里面的文本是哈哈+數值
-
有序列表
<ol type="" start=""><li>哈哈1</li><li>啊哈哈2</li> </ol>- 設置排列方式 type
- 默認是數值排列
- 設置英文字母的排列 A/a
- 羅馬數字排列 I/i
- 設置排列的起始值(字母位置) start值必須是數字
-
-
自定義列表
<dl><dt>圖片，名字</dt><dd>圖片的說明，文字的解釋</dd><dd></dd><dd></dd> </dl>- 快捷生成自定義列表結構 dl>dt{圖片，名字}+dd*3{哈哈}
- dl,dt,dd獨占一行
- 應用場景：左邊是圖片，右邊是文本或者上面是圖片，下面是文本
- div標簽：劃分網頁板塊
- 獨占一行，沒有任何自帶樣式
- span：小文本
- 在同一行顯示，沒有任何自帶的樣式
- 表格 table table>tr>td 三行三列的表格：table>tr3>td3
- 邊框 border=“數字” 數字越大越粗
- 寬度 width=“數字”
- 高度 height=“數字”
- 邊框顏色 bordercolor=“顏色單詞”
- 單元格之間的間距 cellspacing=“數字” cellspacing="0"去掉默認間距
- 內容距離單元格之間的距離 cellpadding=“數字” cellpadding="0"去掉距離
- 表格的對齊方式 align
- left 默認左對齊
- center 居中
- right 居右
- align: 調整文字在單元格內的水平對齊方式
- left 默認左對齊
- center 居中
- right 居右
- align: 調整文字在單元格內的水平對齊方式
- left 默認左對齊
- center 居中
- right 居右
紅色號
初識css
css
- 層疊樣式表
- 樣式表
-
行內(內聯)樣式表
- 生成一個style的html屬性
- 屬性值為 css屬性：css屬性值;
-
內部樣式表
- 生成style的雙標簽
- 將標簽放到head標簽里面
-
外部樣式表
- link引入css
- 在站點下面創建一個css文件夾
- 在文件夾里創建.css后綴的文件
- 創建一個link的單標簽，放到head標簽里面 <link rel="stylesheet" href="" type="text/css"> rel:確定關聯的文件類型 href: css文件路徑 type: css文件類型
- 在css文件中直接寫css對應的語法，不需要加style標簽
- @import引入css文件
- 創建style的雙標簽，放到head里面 <style>@import url("css文件的路徑");</style>
-
- 兩者的區別
- 老祖宗的差別：link屬于HTML提供的引用方式，@import是css提供的引用方式，link還可以引入其他文件類型，@import只能引入css文件 @import url("圖標路徑"); 不可以引入 2. 加載順序的區別：link和HTML是同時加載的，@import是當所有html文件加載后再去加載css文件，所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式 3. 兼容性 @import只有ie5以上才支持
- 寬度 width 數字+px 值為0可以省略單位,只對獨占一行的元素才有效果
- 高度 height 數字+px 值為0可以省略單位,只對獨占一行的元素才有效果
- 字體顏色 color 顏色單詞
- 背景色 background-color 顏色單詞
- 內聯樣式表 一般不使用，如果有簡單的幾個屬性的話可以寫
- 內部樣式表 樣式較少，平時寫小案例
- 外部樣式表 開發整頁或者整站項目進行使用，做到結構和表現分離
- 行內樣式表>內部樣式表
- 行內樣式表>外部樣式表
- 內部樣式表和外部樣式表根據書寫順序，后寫的優先級高（就近原則）
- 標簽選擇器
- id選擇器
- 標簽添加id屬性
- #id名{}
- id名不能重復
- 一個標簽內id名不能有多個 多個之間用空格隔開
- id用來劃分網頁的外圍結構
- class選擇器
- 標簽添加class屬性
- .class名{}
- class名可以重復
- 一個標簽可以有多個class名，多個之間用空格隔開
- 通用選擇器 可以選擇到頁面中所有的標簽
- *{
margin:0;去掉外邊距
padding:o;去掉內填充
}
- *{
- 偽類選擇器
- 選擇器:hover{}
- 駝峰命名法（bigBox）
- 下劃線連接命名法(big_box）
- 橫線鏈接(big-box)
- ctrl+r 顯示/隱藏參考線
- ctrl+k 單位與標尺，修改單位為像素
- alt+滾輪 放大或縮小
css選擇器
- 偽類選擇器 (偽類：在某種狀態下) 愛恨法則 (love hate)
- 選擇器:link a標簽未點擊之前的狀態
- 選擇器:visited a標簽訪問過后的狀態
- 選擇器:hover 鼠標滑過某個標簽的狀態 可以是所有的標簽
- 選擇器:active 鼠標在a標簽按下的狀態
- 后代選擇器
- 選擇器 選擇器 {}
- 每個選擇器之間有后代的關系
- 后代可以嵌套多個
- 只要是后代關系就可以使用后代選擇器
- 選擇器 選擇器 {}
- 群組選擇器 將相同的樣式寫到群組選擇器里面
- 選擇器,選擇器{}
- 選擇器可以是任何選擇器
- 可以放置多個選擇器
- 選擇器,選擇器{}
- 選擇器的權重(優先級)
- 權重值
- 內聯樣式 權重值 1000
- id選擇器 權重值 100
- class選擇器和偽類選擇器 權重值 10
- 標簽選擇器 權重值 1
- 特點
- 權重值越高，優先級就越高，優先顯示該樣式
- 后代選擇器的權重值為所有選擇器的權重值的和
- 繼承樣式的優先級是最低的，自己本身的要高于繼承得來的樣式
- 群組選擇器的權重值為自己本身的權重值
- 權重值相同的情況下，根據就近原則
- 權重值
- 層疊
- 用不同的選擇器選擇同一個元素，設置了通用的css屬性，但是設置了不同的屬性值，會產生樣式的沖突，根據選擇器的權重值來優先顯示，權重值越高，優先顯示該樣式,沒有沖突的樣式照常顯示
css屬性
- 文本屬性
- 字體大小 font-size 默認字體大小 16px
- 數值+px
- 數值+em 1em=16px 幾個em就表示是父元素字體大小的幾倍
- 數值+rem 1rem=16px 幾個rem就表示是**根元素(html)**字體大小的幾倍 移動端使用
- 字體類型 font-family
- 中文，必須要加引號
- 英文，一個單詞的字體類型可以不加引號，多個單詞的字體類型要加引號
- 多個字體類型之間用逗號隔開，瀏覽器會從左向右檢索字體類型，如果存在該字體則顯示，檢索到組后不存在就顯示默認的字體類型
- 文本加粗 font-weight
- bold 加粗
- normal 去掉加粗標簽的加粗樣式
- 數值 100-900之間的數，并且整百增加，不要加單位 100-400偏細 500正常 600-900加粗
- 文本傾斜 font-style
- italic 傾斜
- normal 去掉傾斜標簽的傾斜樣式
- 文本顏色 color
- 顏色的單詞
- 十六進制 #313131
- rgb(r,g,b); r,g,b(0-255)
- 文本水平對齊 text-align
- left 左對齊
- center 居中對齊
- right 右對齊
- justify 兩端對齊 文字或單詞兩端對齊 增大之間的空隙
- 垂直對齊 vertical-align 對圖片生效，這個屬性加在img標簽
- top 頂部對齊
- middle 居中對齊
- baseline 基線對齊 圖片和文字默認的對齊方式
- bottom 底部對齊
- 行高 line-height
- 數值 表示是字體大小的倍數
- 數值+px
- 單行文本垂直方向居中對齊 將行高和高度的值設置成一樣的
- 添加多行文本之間的間距，多行文本之間間距的量取是從第一個的頭到第二行的頭
- 文本修飾 text-decoration
- none 去掉下劃線
- underline 下劃線
- overline 上劃線
- line-through 刪除線
- 大小寫的轉換 text-transform
- capitalize 每個單詞的首字母大寫
- uppercase 字母全部大寫
- lowercase 字母全部小寫
- none 默認值
- 字體簡寫/復合寫法 font
- 順序: font-style(字體樣式) font-weight(字體加粗) font-size(字體大小)/line-height(行高) font-family(字體類型)
- font-style和fong-weight可以省略不寫，為默認樣式
- 后面的順序必須是一定的，且不能省略
- 字符間距 letter-spacing 可以為負數
- 英文：字母之間的間距 數值+px
- 中文：漢字之間的間距 數值+px
- 詞間距 word-spacing 對于英文來說
- 單詞之間的距離
- 文本縮進 text-indent
- 數值+px
- 數值+em 相對當前的字體大小
- 懸掛式縮進 設置值為負數
- 字體大小 font-size 默認字體大小 16px
css屬性
-
無序列表屬性
- 列表符號的類型 list-style-type
- disc 實心圓 默認值
- circle 空心圓
- square 方型
- none 去掉列表符號
- 列表符號所在的位置 list-style-position
- inside 在li的里面
- outside 默認值 在li的外面
- 列表符號圖片 list-style-image:url()
- 列表符號的類型 list-style-type
-
邊框屬性 border 不設置邊框顏色 默認是和字體顏色一樣
- border-width: 當前邊框的寬度 數值+px
- border-style 邊框類型
- solid 默認值 實線
- dotted 點狀
- dashed 虛線
- double 雙實線
- border-color 邊框顏色
- 簡寫形式 border: 邊框寬度 邊框類型 邊框顏色 順序不固定
- 邊框方向
- border-left:邊框寬度 邊框類型 邊框顏色; 左邊框
- border-right:邊框寬度 邊框類型 邊框顏色; 右邊框
- border-top: 邊框寬度 邊框類型 邊框顏色; 上邊框
- border-bottom: 邊框寬度 邊框類型 邊框顏色; 下邊框
- 去掉邊框
- 去掉左邊框 border-left:none
- 邊框實現三角形
-
鼠標樣式 cursor
- pointer 手型
- help 幫助
- not-allowed 禁止選擇
- wait 等待
-
背景屬性
- 背景色 background-color
- 背景圖 background-image:url(圖片路徑)
- 背景圖重復 background-repeat
- repeat 默認值 重復
- no-repeat 不重復
- repeat-x 只在x軸或者橫向重復
- repeat-y 只在y軸或者縱向重復
- 背景圖位置 background-position
- background-position：x軸/橫向 y軸/縱向
- 數值+px
- 百分比 相對于當前元素的寬度和高度
- 關鍵詞
- x軸/橫向：left/center/right
- y軸/縱向：top/center/bottom
- 背景圖復合寫法
background: 背景圖顏色 背景圖的路徑 背景圖是否重復 背景圖的位置 順序不固定，一般是這個順序 - 背景圖固定 background-attachment
- scroll 滾動 默認值
- fixed 固定
- 背景圖的大小 background-size
- cover 背景圖拉伸 充滿整個元素
浮動
- float
- none 默認值 不浮動
- left 左浮動
- right 右浮動
- 浮動特點
- 1.從父元素的邊緣開排列
- 2.父元素的寬度不夠時，浮動元素會掉下來
- 3.浮動元素會脫離文檔流
- 4.浮動元素不會超過沒有設置浮動的元素
- 5.內聯元素會變成塊元素
- 浮動的應用場景
- 將縱向排列的元素橫向排列
元素類型
- 塊級元素 （div p ul li form table dl dt dd ol ）
- 獨占一行
- 可以設置寬高
- 內聯元素（span b strong i em a img input u sup sub）
- 不可以設置寬高
- 在同一行排列
- 內聯塊元素(置換元素)（img input）
- 可以設置寬高
- 在同一行顯示
css屬性
- 邊框做三角形
- transparent:透明屬性
- 鼠標樣式 cursor
- pointer 手型
- help 幫助
- not-allowed 禁止選擇
- wait 等待
盒模型
- 內容區 content 寬高生成內容區
- 內填充 padding:數值+px
- 值的設置
- 1個值 padding:20px; 四周
- 2個值 padding:10px 20px;上下 左右
- 3個值 padding:10px 20px 30px; 上 左右 下
- 4個值 padding:10px 20px 30px 40px; 上 右 下 左
- 單獨方向設置 padding-方向(left/top/bottom/right)
- padding的特點
- padding值的設置會把盒子撐大,如果不想被撐大，要在原來的寬高的基礎上減去對應方向的padding值
- 調整子元素(內容)在父元素(盒子)內的位置
- 背景色可以在padding區域進行顯示
- padding值不可以設置負數
- 值的設置
- 邊框 border 邊框也會撐大盒子
- 外邊距 margin:數值+px
- 值的設置和padding一樣
- 單方向設置
- margin的特點
- 不會撐大顯示的區域，但是會影響到別的盒子
- margin可以設置負數
- 背景色在margin邊框的外面顯示
- 用來調整盒子到盒子之間的距離
- margin:0 auto; 上下 左右 左右根據瀏覽器窗口的寬度去掉當前盒子的寬度后，左右兩邊平均分配
- margin值設置的bug
- 在一個盒子里面，當對該盒子的第一個子元素設置margin-top的上邊距的時候，會錯誤的加載父元素的身上，叫做margin的傳遞
- 給父元素添加邊框 透明的邊框
- 給父元素添加 overflow:hidden; 溢出隱藏
- 給父元素或者該元素添加浮動
- margin的重疊：給上面的盒子添加下邊距，下面的盒子添加上邊距的時候，會產生上下邊距的重疊，取最大值顯示間距
- 設置一個方向的間距
- 浮動
img引入圖片的bug
- 圖片自帶3px的底部留白
- 給圖片設置vertical-align:bottom/middle/top
去掉input按下時候的樣式
- outline:none; 去掉邊框
元素類型
- 塊級元素 div p ul li h1-h6 ol dl dt dd
- 可以設置寬高
- 盒模型屬性都生效
- 獨占一行
- 塊級元素可以作為容器，p一般不包括p
- 內聯元素 span b strong i em a u del img sup sub
- 在同一行顯示
- 不可以設置寬高，寬高由內容撐開
- padding和margin屬性的左右顯示準確，上下顯示不準確
- margin:0 auto，不生效
- 可以給內聯元素添加一個外層的盒子形成一個大的區域，給該盒子設置 text-align:center的居中屬性
- 添加浮動可以解決內聯元素之間的間歇，也能將內聯元素的元素類型轉換為塊元素
- 內聯塊元素 input img
- 可以設置寬高
- 在同一行顯示
- 盒模型屬性都適用
- 為什么img和input可以設置寬高？？
- 置換元素：img和input屬于置換元素
img的src和input的type是不確定的，可以更換
- 非置換元素: 除了置換元素之外
- 置換元素：img和input屬于置換元素
- 元素類型的轉換 display
- block 塊級元素
- inline 內聯元素
- inline-block 內聯塊元素
- 盒子和盒子之間會產生空隙，兩個標簽之間的回車導致
- 將元素的代碼在同一行編寫
- 給在同一行的顯示的元素的父元素設置font-size:0;給該元素設置正常的字體大小
- none 隱藏元素 隱藏之后不占位
- visibility:hidden; 隱藏元素，隱藏之后占位
單行文本溢出顯示省略號
- 溢出屬性 overflow
- visible 默認值
- hidden 溢出隱藏
- scroll 顯示滾動條
- overflow-y y軸滾動
- overflow-x x軸滾動
- auto 內容沒有超出的時候正常顯示，超出之后才顯示滾動條
- 單行文本超出寬度顯示省略號
- 設置寬度
- 設置不換行 white-space:nowrap
- 設置溢出隱藏 overflow:hidden;
- 設置文本溢出顯示省略號 text-overflow:ellipsis;
圓角屬性 border-radius:數值+px或百分比
定位 position
- static 默認值
- relative 相對定位
- 參考物：自己本身的位置
- 方向：left/right/top/bottom: 數值+px 可以設置負數 百分比,
- 特點
- 移動之后依然占據空間
- 應用：移動盒子
- absolute 絕對定位
- 參考物：參考有定位屬性(除了static)的祖先元素,定位元素通過一層一層想上找，找到有定位的祖先元素，如果找到body依然沒有找到有定位的祖先元素，參考瀏覽器窗口(子絕父相)
- 方向：left/right/top/bottom: 數值+px 可以設置負數
- 特點
- 脫離文檔流，且文字能被遮擋
- 塊級元素設置margin:0 auto;會失效
- 內聯元素設置定位轉換成塊元素
- 應用場景：有重疊效果的需求
- 實現盒子水平垂直居中
- 第一種
- 設置該元素left:50%;(參考元素寬度的一半)margin-left:當前盒子寬度的一半
- 設置該元素top:50%;(參考元素高度的一半)margin-top:當前盒子高度的一半
- 第二種
- 設置left:0;top:0;right:0;bottom:0;
- 設置margin:auto; 上下左右居中
設置透明色
background-color: rgba(253, 196, 215);
a的取值是0-1之間的數 0:完全透明 1:不透明 值越小越透明
設置圓形
border-radius: 50%或者100%;
定位 position
- fixed 固定定位
- 參考物：瀏覽器的窗口
- 移動：left/top/right/bottom
- 特點
- 不會跟隨滾動條的滾動而滾動
- 脫離文檔流
- 寬度自適應的時候，寬度不顯示，可以通過設置width:100%;
- 應用場景
- 固定導航
- 固定側邊欄
- 廣告
- 粘性定位 sticky
- 參考物：瀏覽器的窗口
- 移動: top
- 特點：沒有達到top值之前正常顯示，達到top值之后類似于固定定位，不會跟隨滾動條滾動而滾動
- 定位屬性的層級關系 z-index
- 默認最后書寫的，顯示在最上面
- auto(默認值)/number:數字 沒有單位
- 值越大，顯示的在最前面，可以設置負數
錨點
- 應用：在同一個頁面實現不同板塊的跳轉
寬高自適應
- 寬度自適應
- 塊元素
- 不設置寬度，和父元素一樣寬
- 設置百分比
- 內聯元素
- 寬度由內容撐開
- 最大寬度：max-width;最大不能超過該值 min-width:最小寬度不能超過該值
- 塊元素
- 高度自適應
- 高度由內容撐開; height:auto;
- 最大高度：max-height 最小高度 min-height
- 設置百分比參考父元素的高度 如果要參考body高度的話，需要設置
html,body{height:100%}
- 高度塌陷
- 條件
- 父元素不設置高度，想要通過子元素撐開
- 子元素設置了浮動
- 解決方法
- 給父元素(高度坍塌的元素)設置overflow:hidden; 觸發BFC(塊級格式上下文)
- 弊端: 會把父元素之外的元素隱藏掉
- 在浮動元素的下方添加一個空的div標簽,添加css屬性
clear: left/right/both 清除浮動元素帶給自己的影響,只對塊級元素生效
2. 弊端：代碼冗余 - 萬能清除法
- 條件
BFC規范
- BFC: Block formatting context (塊級格式化上下文)
- 觸發條件
- float值為left/right
- position的值為absolute和fixed
- display為inline-block(內聯塊), table-cell(單元格), table-caption(表格標題), flex(彈性盒), inline-flex(彈性盒)
- visible的值hidden/scroll/auto
- 特性
- 在BFC區域，浮動元素的高度會計算在內
- 浮動元素不與BFC區域重疊
- 應用
- 解決高度塌陷(觸發條件加在高度塌陷的父元素身上)
- 實現兩欄布局(右側區域觸發BFC)
- 解決margin的傳遞(觸發條件加在父元素身上)
css3漸變 ie9以下不支持
- 線性漸變
- background-image/background:linear-grident(方向,顏色1,顏色2……)
- 漸變方向
- to bottom 向下
- to right 向右
- to top 向上
- to left 向左
- to right bottom 向右下角
- to left top 向左上角
- to right top 向右上角
- to left bottom 向左下角
- 數值+deg(角度)
- 設置百分比
- 重復性的線性漸變
background:repeating-linear-gradient(red 40%, blue 60%); - 徑向漸變
bakrgound-image/background:radial-gradient(位置,顏色1,顏色2)- 位置
- center 中心
- 水平方向：left/center/right
- 垂直方向：top/center/bottom
- 兼容寫法
- 位置
- 重復性的徑向漸變
background: repeating-radial-gradient(red 20%, yellow 40%);
css3過渡
- transition: 需要過渡的屬性 transition-duration transition-timing-function(順序不固定，當只有一個時間的時候，表示過渡時間，兩個時間第一個表示過渡時間，第二個表示延遲時間)
- transition-property 需要過渡的屬性 transition-delay
- transition-duration 過渡所需要的時間 s(秒)/ms(毫秒) 1s=1000ms
- transition-delay 過渡延遲時間 s(秒)/ms(毫秒)
- transition-timing-function 過渡效果
- linear: 勻速
- ease: 逐漸慢下來
- ease-in: 加速
- ease-out: 減速
- ease-in-out 先加速后減速
- 貝斯埃爾曲線：http://cubic-bezier.com/
- 過渡屬性加在原本的盒子身上
- 過渡的屬性要對應
瀏覽器的前綴
- ie -ms
- 谷歌 -webkit-
- 火狐 -mz-
- 歐鵬 -o-
雪碧圖/精靈圖
- 將多張圖整合到同一個圖片上
- 應用：background-position調整位置
css-2d
- 位移 transform 向右和向下為正數
- transform:translateX(移動距離) px/%(相對當前盒子的寬度)
- transform:translateY(移動距離) px/%(相對當前盒子的高度)
- transform:translate(X,Y) x和y都移動
- 利用位移實現水平垂直居中(子元素未知寬高)
- 旋轉 transform 正值：順時針 負數：逆時針
- transform:rotateX(數值deg)
- transform:roteteY(數值deg)
- transform:rotateZ(數值deg)/transform:rotate(數值deg)
- 縮放 transform 不要使用負數
- transform:scaleX(數值) 1表示正常 >1 放大 <1縮小 水平縮放
- transform:scaleY(數值) 1表示正常 >1 放大 <1縮小 垂直縮放
- transform:scale(X,Y) 1表示正常 >1 放大 <1縮小 水平和垂直 值一樣，可以寫一個
- 傾斜 transform
- transform: skewX(數值deg) x軸傾斜
- transform: skewY(數值deg) y軸傾斜
- transform: skew(X,Y) x和y都傾斜
- 旋轉/縮放中心 transform-origin:水平 垂直;
- 水平 left/center/right
- 垂直 top/center/bottom
- 數值px
- 百分比
- 旋轉和位移同時使用
先位移，后旋轉
transform: translateX(400px) rotateZ(80deg);
先旋轉，坐標軸變化，根據變化后的軸的方向去位移
transform: rotateZ(80deg) translateX(400px);
動畫
- animation
-
使用：animation: 動畫名 動畫持續時間 延遲時間 動畫效果 執行次數
- animation-name: 動畫名
- animation-duration: 動畫的持續時間 s/ms
- animation-delay: 動畫的延遲時間 s/ms
- animation-timing-function: 動畫的效果
- animation-iteration-count: 具體的數值/infinite(無限循環)
- anmiation-direction: 動畫執行的方向
- normal 正向
- reverse 反向
- alternate 正向和反向交替運動
- animation-play-state 動畫是否播放
- running 播放默認值
- paused 暫停
-
定義動畫
css3-3d
- 形成3d空間,加在變形元素的父元素身上
transform-style:preserve-3d; - 位移
- transform: translateZ(距離)；px/%
- transform: translate3d(x,y,z); 三個軸都移動
- transform: translateX() translateY() translateZ();
- 旋轉
- transform: rotateX(); x軸的旋轉
- transform: rotateY(); Y軸的旋轉
- transform: rotate3d(數字,數字,數字，角度) 數字：0/1 0不旋轉 1旋轉
- transform: rotateX() rotateY() rotateZ()
- 縮放
psd切圖
- 文件–》生成–》圖像資源打勾
- ctrl+k 找到左側工具欄–>增效工具–>右側 啟用生成器打勾==》確定
- 窗口–》圖層
- 選中工具選擇并點擊想要保存的圖片，圖層區域會對應的出現該圖，雙擊–》修改名字且要加圖片的后綴.png
- 到psd的源文件的文件夾里 會生成 assets的資源文件夾，所有的圖片都在下面
網格(grid)布局
- 父元素
- 形成網格布局 display:grid;
- 列 grid-templete-columns;
- 數值 數值,有幾列就寫幾個數值+px
- 百分比
- 數值+fr
- repeat(重復次數,列的寬度)
- 行 grid-templete-rows: 數值 數值—;
- 數值 數值,有幾列就寫幾個數值+px
- 百分比
- 數值+fr
- repeat(重復次數,列的寬度)
- grid-template-areas: 劃分區域
- 行間距: row-gap:數值+px
- 列間距: column-gap:數值+px
- 水平方向對齊 justify-content
- start
- end
- center
- space-between
- space-around
- space-evenly
- stretch
- 垂直方向對齊 align-content
- start
- end
- center
- space-between
- space-around
- space-evenly
- stretch
- 內容在網格里的水平對齊方式 justify-items
- start
- end
- center
- stretch
- 內容在網格里的垂直對齊方式 align-items
- start
- end
- center
- stretch
- 子元素
- grid-area: 區域的名稱,不要加引號
網格布局的步驟
圖片整合 雪碧圖/精靈圖
- 主要使用的屬性：background-position: 背景圖的位置
- 優點
- 減少瀏覽器請求圖片的次數
- 減少圖片的體積
- 缺點
- 可維護性差，修改圖標可能會影響到別的圖標
- 適應性較差
瀏覽器大戰
瀏覽器內核
- ie瀏覽器：Trident
- 火狐：Gecko 代碼開源
- 蘋果 & 谷歌舊版本: Webkit
- 谷歌 & 歐鵬: Blink
兼容
- 在ie瀏覽器中，a標簽套圖片會自帶邊框 ie10及以下
- 解決：去掉邊框 img{border:none}
- 圖片自帶底部3px的留白
- vertical-align: bottom/middle/top 給圖片添加
- display:block; 給圖片添加
- font-size:0; 給父元素添加
- 表單元素對齊不一致
- 設置怪異盒模型
- 設置浮動
- 透明度 opacity 在ie瀏覽器中不支持 0-1
- opacity的值照常設置，適應正常的瀏覽器
- 單獨設置ie中透明屬性：filter:alpha(opacity=value);取值范圍 value: 1-100(整數)1 完全透明 100不透明
過濾器
- 下劃線屬性過濾器
- ie6以下會出現最小高度失效的問題,會把height當作最小高度
- 語法：選擇符{_屬性：屬性值；}
- _屬性名; _height只有ie6及以下才識別，可以設置_height:數值+px；單獨針對ie6
- !important關鍵字過濾器 權重值最高
- 語法：選擇符{屬性：屬性值!important;}
- color: blue !important; 用的較少，因為權重太高，不好覆蓋
- *屬性過濾器
- *屬性名； *color:red; 只有ie7及以下才識別
- \9 只有ie瀏覽器識別，別的瀏覽器不識別
- 語法：選擇符{屬性：屬性值\9;}
- \0 只有ie8以上才識別，別的瀏覽器也不識別
- 語法：選擇符{屬性：屬性值\9;}
優化
- 主題的優化，網頁的標題
- 頁面頭部優化
- 向搜索引擎說明你的網頁的關鍵詞；
- 告訴搜索引擎你的站點的主要內容；
- 圖片的優化
- 添加alt屬性，在圖片未加載的時候顯示
總結
- 上一篇： 持币大户谈PRS投资策略
- 下一篇： 【前端系列教程之CSS3】04_CSS定