HTML5+CSS3學習筆記
阿新 • • 發佈：2022-04-12
1、獨佔一行的稱為塊元素 li是塊元素
2、a標籤中target屬性的可選值
<a href="https://www.baidu.com" target="_self">本頁面開啟</a>
<a href="https://www.baidu.com" target="_blank">新頁面開啟</a>
a標籤實現頁面的上下跳轉
<a id="btn2" href="#btn1">去底部</a>
<p>很長的中間內容</p>
....
<a id ='btn1' href="#btn2">去頂部</a>
偽類選擇器
ul>li:first-child/:last-child/ 選中第一個子元素/最後一個子元素/
ul>li:nth-child(m|n|2n/even|2n+1/odd) 選中第m個元素/全選/偶數位的元素/奇數位的元素
ul>li:not(:nth-child(m|n|2n/even|2n+1/odd)) 選中除了第m個元素/全選/偶數位的元素/奇數位的元素
a:link/:visited 沒有訪問過的連結/訪問過的連結(只能修改顏色)
a:active/:hover 滑鼠點選/滑過後觸發樣式
偽元素選擇器
p::first-letter 選中第一個字母新增樣式
p:first-line 選中第一行新增樣式
p::selection 滑鼠拖動選擇 新增樣式
div::before/::after 元素的開始/最後新增樣式 必須配合content屬性來使用
選擇器的優先順序
內聯樣式>id選擇器>類和偽類選擇器>元素(標籤)優先順序 加 !important就是最高優先順序
邊框線
solid:實線/dotted:點狀虛線/dashed:虛線/double:雙線
簡單佈局
1、子盒子溢位父盒子，在父盒子設定overflow:visible|hidden|scroll 顯示/隱藏/滾動條
2、設定auto的元素會自動補齊等式 外邊+邊+內邊+元素+內邊+邊+外邊=父盒大小(水平垂直通用)
當設定浮動後，自動補齊等式不需要強制成立
3、垂直方向外邊距摺疊:
兄弟元素相鄰外邊距的情況：正正取大者/正負取兩和/負負取絕對值較大
父子元素相鄰外邊距的情況：子元素會傳遞給父元素
解決方案一:子元素使用padding，同時父元素高度減去padding值
解決方案二:父元素新增border，同時父元素高度減去border值
最終方案:
4、行內元素不支援設定寬高，可以使用display:block設定成塊元素 然後再進行設定
:inline設定成行內元素 靠內容大小撐大
:inline-block設定成行內快元素 可以設定寬高 不獨佔一行
5、box-sizing:content-box|border-box 寬高用來設定內容區大小|寬高用來設定可視區大小
box-shadow:x,y,模糊半徑,rgba(0,0,0,透明度)
6、輪廓outline和邊框border用法類似 outline/border 不改變/改變 可視區大小即頁面佈局
7、浮動元素不會蓋住文字，文字會自動環繞在浮動元素周圍
浮動後元素會從文件流中脫離，改變原有性質：
行內元素可以設定寬高，塊元素不獨佔一行
8、高度塌陷問題以及解決方案BFC
父元素沒有設定高度，高度由子元素內容撐高。當子元素浮動脫離文件流，無法再撐起父元素的高度，導致父元素高度丟失，其下面的元素會由此上移，導致頁面佈局混亂。
元素開啟BFC
作用:可以包含浮動的子元素|不會被浮動元素覆蓋|子元素和父元素的內外邊距不會重疊
方式：1、父元素開啟浮動 會丟失寬度
2、父元素設定為行內快 會丟失寬度
3、子元素設定overflow:auto|hidden 常用
4、clear:left|right|both 清除左側浮動|右側浮動|兩側浮動影響較大的影響
最終方案：通過::after偽元素設定clear實現
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1{
border: 10px solid cadetblue;
}
.box2{
width: 200px;
height: 200px;
background-color: coral;
float: left;
}
/* 解決浮動高度塌陷問題最終方案 */
.box1::after{
/* ::after是行內元素 不能獨佔一行 */
display: table;
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
定位 position
relative：相對於自己進行偏移,沒有脫離文件流
absolute：相對於其包含塊(最近開啟定位的祖先)進行偏移,層級提升 脫離文件流
fixed：相對於視口進行偏移，特殊的絕對定位，不會隨網頁滾動條滾動,層級提升 脫離文件流
sticky:相對於body進行偏移，特殊的相對定位，使元素到達某處固定，沒有脫離文件流
設定auto的元素會自動補齊等式 left+外邊+邊+內邊+元素+內邊+邊+外邊+right=父盒大小(水平垂直通用)
z-index:整數 設定層級來控制定位元素的覆蓋 祖先層級再高也不會蓋住後代層級
字型
body{
/*設定全域性字型*/
@font-face {
font-family: '字型名稱';
src: url('伺服器中字型的路徑');
}
}
圖示字型fontawesome使用步驟
下載解壓：https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
引入：將CSS和webfonts移動到專案中，將all.css引入到網頁中
使用：<i class="fas xx-xx" style="樣式"></i>
文字
white-space:normal|nowrap|pre 處理網頁空白方式 正常|不換行|保留空白、
如果文字過長想要夾斷加省略號
.box{
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
背景 background
background-position:上下左右中，上下左右中 |偏移量 設定背景圖片位置
background-origin:border-box/padding-box/content-box 背景圖片偏移量原點從邊框處/內邊距處/內容區
background-size: width,height/cover/contain 背景圖片尺寸/圖片比例不變在元素鋪開/完整顯示
background-attachment:scroll/fixed 背景圖片隨著滾動條滾動/固定
background-clip:border-box/padding-box/content-box 背景出現在邊框下/內容區和內邊距/內容區
background-image: linear-gradient(red,yellow) 線性漸變色
background-image：radial-gradient(red,yellow) 徑線漸變色(放射效果)
過渡 transition
transition-property:屬性/all 指定要執行過渡的屬性
transition-duration:時間 指定過濾效果的持續時間
transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out 指定過渡的速度視覺
transition-timing-function：steps(數字) 分幾步實現過渡
transition-delay:時間 指定過渡效果的延遲
動畫 animation
設定關鍵幀
@keyframes test{ //關鍵幀名
0%{
//起始狀態
}
100%{
// 結束狀態
}
}
新增動畫
.box{
animation-name: test; //關鍵幀名
animation-duration: 2s; //動畫持續時間
}
animation-iteration-count:infinite/整數 動畫執行無限次/次數
animation-direction:normal/reverse/alternate 動畫執行方向 from->to/to->from/不斷切換方向
animation-play-state:running/paused 動畫的執行狀態 正常/停止
animation-fill-mode:none/forwards/backwards/both 動畫執行完成後狀態
回到初始位置/停在終點位置/延時處在開始位置/延時處在開始位置，停在終點位
簡寫
animation:關鍵幀名,持續時間,完成狀態,速度視覺
變形 transform
設定視距：html{perspective:800px}
transform-origin:0 0 設定變形的原點 預設值center
transform:translate(偏移量|百分比) 元素平移 百分比是基於自身 可以實現居中
transform:rotate(角度deg|數字turn) 元素旋轉
transform:scale(數字) 元素縮放
flex彈性盒 新的佈局手段替代浮動
使元素具有彈性，讓元素可以跟隨頁面大小的改變而改變
display:flex 使一個元素稱為彈性盒子 其子元素成為彈性元素(不包括全部後代)
一個元素可以即是彈性盒子也是彈性元素
彈性盒子屬性:
flex-direction:row/row-reverse|column/column-reverse 子元素按行左右/右左 按列上下/下上 排列 方向
flex-wrap:nowrap/warp/warp-reverse 子元素不自動/自動換行/反方向自動換行
flex-flow: 方向 是否換行 flex-direction+flex-wrap的簡寫屬性
justify-content:flex-start/center/flex-end/space-around/space-evenly/between 子元素水平對齊方式
開始/居中/尾部/空白分配到元素兩側/元素單側/元素之間
align-item:stretch/flex-start/center/flex-end/baseline 子元素垂直方向物件方式
子元素高度設定為相同值/頂部/居中/底部/基線對齊
align-content:flex-start/center/flex-endspace-around/space-evenly/between
父元素空白分配 下/上下/上/元素兩側 /元素單側/元素之間
彈性元素屬性：
flex-grow:數字 父盒子空間有多餘 子元素伸展係數 填滿父盒子 0為不伸展
flex-shrink:數字 父盒子空間不足 子元素收縮係數 適應父盒子 0為不收縮
flex-basis:畫素/auto 子元素開始大小/子元素本身大小 沒有grow和shrink的情況下使用
簡寫 flex:grow,shrink,basis
order：1.... 子元素排列順序
響應式佈局
媒體查詢
@media all/print/screen {樣式} 所有裝置/印表機/帶螢幕裝置 控制哪些裝置具有樣式
sass中&的作用：
.withdrawalBtn{
width: 590upx;
height: 80upx;
&.sure{
background: #FFDC03;
}
}
只有當同時擁有withdrawalBtn和sure兩個樣式,才會有背景顏色
未完待續