echarts：實現滑鼠hover 座標軸也跟隨高亮
阿新 • • 發佈：2020-11-13
CSS選擇器
屬性選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>屬性選擇器</title> <style> /* [屬性名] 選擇含有指定屬性的元素 [屬性名 = 屬性值] 選擇含有指定屬性和屬性值的元素 [屬性名 ^= 屬性值] 選擇屬性值中以指定值開頭的元素 [屬性名 $= 屬性值] 選擇屬性值中以指定值結尾的元素 [屬性名 *= 屬性值] 選擇屬性值中含有某個值的元素 */ /* p[title] { color: yellowgreen; } */ /* p[title=firsesest] { color: yellowgreen; } */ /* p[title ^=se] { color: yellowgreen; } */ /* p[title $=six] { color: yellowgreen; } */ p[title *=se] { color: yellowgreen; } </style> </head> <body> <p title="firsesest">111111</p> <p>222222</p> <p title="secondsix">333333</p> <p>444444</p> <p title="five">555555</p> <p title="sesesixsix">666666</p> </body> </html>
偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>偽類選擇器</title> <style> /* 將ul中的第一個li設定為紅色 */ /* 偽類（不存在的類，特殊的類） 偽類用來描述一個元素的特殊的狀態 比如：第一個元素 、被點選的元素、滑鼠移入的元素等 偽類一般情況下都是使用:開頭 :first-child 第一個子元素 :last-child 最後一個子元素 :nth-child(n) 選中第n個子元素 n 直接寫n，表示第n個，範圍為0- 正無窮 2n或even 表示選擇偶數位的元素 2n+1或odd 表示選中奇數位的元素 以上這些偽類都是根據第一個子元素來進行排序的 :first-of-type :last-of-type :nth-of-type() 這幾個偽類的功能和上述的類似，不同點是它們是在同類型元素中進行排序的 :not() 否定偽類 --將符合條件的元素從選擇器中去除 */ /* ul>li:first-child { color: red; } */ /* ul中除了第三個li之外的其他的li都要變成紅色 */ ul>li:not(:nth-of-type(3)) { color: red; } /* :link 用來表示沒訪問過的連結（正常的連結） :visited 用來表示訪問過的連結 由於隱私的原因，visited這個偽類只能修改連結的顏色，一般不建議修改 */ a:visited { color: #bbffaa; } a:link { color: #000000; } /* :hover 用來表示滑鼠移入的狀態 */ a:hover { color: orange; } /* :active 表示滑鼠點選的狀態 */ a:active{ color: green; } </style> </head> <body> <!-- <ul> <li>第零個</li> <li>第一個</li> <li>第二個</li> <li>第三個</li> <li>第四個</li> <li>第五個</li> </ul> --> <!-- 1.沒有訪問過的連結 2.訪問過的連結 --> <a href="https:www.baidu.com">訪問過的連結</a> <br> <br> <a href="https:www.baidu123.com">未訪問過的連結</a> </body> </html>
偽元素選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>偽元素選擇器</title> <style> p { font-size: 20px; } /* 偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置） 偽元素使用 :: 開頭 ::first-letter 表示第一個字母 ::first-line 表示第一行 ::selection 表示選中的內容 ::before 元素的開始位置 ::after 元素的最後位置 before和after必須結合content屬性來使用 */ /* 需求：首字母下沉 */ p::first-letter { font-size: 50px; } /* 需求：第一行背景顏色為黃色 */ p::first-line { background-color: yellow; } /* 需求：滑鼠選中後背景顏色變為黃綠色 */ p::selection { background-color: yellowgreen; } /* 需求：在div標籤的Hello之前新增一些字元並修改顏色為紅色 */ div::before { content: 'hahaha'; color: red; } /* 需求：在div標籤的最後位置之後新增一些字元並修改顏色為綠色 */ div::after { content: '111111'; color: green; } </style> </head> <body> <div>Hello Are You Ok?</div> <p> hahahha佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。 </p> </body> </html>
樣式的繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>樣式的繼承</title>
<style>
/* 樣式的繼承
為一個元素設定的樣式同時也會應用到它的後代元素中
繼承只會發生在某個元素的後代元素上
繼承是發生在祖先元素和後代元素之間的
繼承的設計是為了方便我們的開發，
利用繼承可以將一些通用的樣式統一設定到共同的祖先元素上，這樣只需要設定一次即可讓所有的元素都具有該樣式。
但是，並不是所有的樣式都會被繼承
例如：背景相關的，佈局相關等的這些樣式都不會被繼承
*/
p {
color: red;
}
div {
color: yellowgreen;
}
</style>
</head>
<body>
<!-- p元素內部不能放塊級元素，可以放行內元素 -->
<p>
這是一個p元素啊 啊啊
<span>
p元素中的span啊啊啊
</span>
</p>
<span>p元素外部的span</span>
<div>
這是div元素啊
<span>
這是div元素中的span元素啊 啊
<em>
這是span元素中的em元素
</em>
</span>
</div>
</body>
</html>
選擇器權重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器的權重</title>
<style>
div {
color: yellowgreen;
}
/* #box1 {
color: red;
} */
.div1 {
color: black;
}
* {
font-size: 50px;
}
div {
font-size: 20px;
}
/*
樣式的衝突：
當我們通過不同的選擇器，選中相同的元素，並且為相同的樣式設定不同的值,此時就發生了樣式的衝突
發生樣式衝突時，應用哪個樣式由選擇器的權重（優先順序）決定。
選擇器的權重（從高到低）：
內聯樣式（行內樣式） 1,0,0,0
ID選擇器 0,1,0,0
類和偽類選擇器 0,0,1,0
元素選擇器 0,0,0,1
通配選擇器（*） 0,0,0,0
繼承的樣式 沒有優先順序
比較優先順序時，需要將所有的選擇器的優先順序進行相加計算，最後優先順序越高，越優先顯示（分組選擇器是單獨計算的（例如：div,p,span{}））
選擇器的累加不會超過其最大的數量級，即 類選擇器再高也不會超過ID 選擇器
如果優先順序計算後相等。此時則優先使用css樣式中靠下的樣式
可以在某一個樣式的後邊新增 !important ，則此時該樣式會獲得最高的優先順序，甚至超過內聯樣式，但在開發中要慎用（甚至使用js都無法修改此樣式）
*/
</style>
</head>
<body>
<div id="box1" class="div1">
hahahhahahdiv的啦啦啦啦
<span>這是div中的span元素</span>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景圖片練習</title>
<style>
.box1 {
width: 500px;
height: 500px;
/*
background-color:設定背景顏色
background-image:設定背景圖片
可以同時設定背景顏色和背景圖片，這樣背景顏色將會成為圖片的背景色
如果背景圖片小於元素，則背景圖片會自動在元素中平鋪，將元素鋪滿
如果背景圖片大於元素，將會有一部分背景無法完全顯示
如果背景圖片和元素一樣大，則會正常顯示
background-repeat:設定背景的重複方式
可選值：
repeat 預設值 背景會沿著x軸和y軸雙向重複
repeat-x 沿著x軸方向重複
repeat-y 沿著y軸方向重複
no-repeat 不重複
background-position:用來設定背景圖片的位置
設定方式：
1.通過top、left、right、bottom、center等幾個表示方位的詞來設定背景圖片的位置(實際上相當於是一個九宮格，通過其中的方位詞設定位置)
使用方位詞時必須要同時指定兩個值，如果只寫一個，則第二個預設就是center
2.通過偏移量來指定背景圖片的位置
水平方向的偏移量 垂直方向的偏移量（第一個水平、第二個垂直方向）
background-clip:設定背景的範圍
可選值：
border-box 預設值 背景會出現在邊框的下邊，邊框下也會有背景
padding-box 背景不會出現在邊框，只出現在內容區和內邊距
content-box 背景只會出現在內容區
background-origin: 背景圖片計算的偏移量的原點
可選值：
padding-box 預設值，background-position從內邊距處開始計算
content-box 原點在內容區，背景圖片的偏移量從內容區處開始計算
border-box 背景圖片的偏移量從邊框處開始計算
background-size: 設定背景圖片的大小
第一個值表示寬度
第二個值表示高度
如果只寫一個，則第二個值是auto，表示等比例縮放，可能出現顯示不全或拉伸
cover 表示圖片的比例不變,將元素鋪滿
contain 表示圖片比例不變，將圖片在元素中完整顯示
background-attachment:設定背景圖片是否跟隨元素移動
可選值
scroll 預設值 背景圖片會跟隨元素移動
fixed 表示背景圖片會固定在頁面中，不會隨元素移動
background 背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設定，並且沒有順序要求，也沒有必須要寫的屬性
background: #bfa url("../img/000.jpg") center center/contain no-repeat
但是注意： background-size一定要寫到 background-position的後面,並通過/來分割，不能單純的使用size屬性的值來設定樣式，示例：center center/contain
background-clip和 background-origin的屬性可選值值是一樣的，但是此時 background-origin必須寫在前面， background-clip在後面
*/
background-color: #bfa;
background-image: url("../img/000.jpg");
background-repeat: no-repeat;
background-size: 500px 500px;
background-attachment: fixed;
/* background-clip: border-box;
background-origin: padding-box; */
/* background-position: 100px 100px; */
/* background-position: right bottom; */
}
</style>
</head>
<body>
</body>
</html>
佈局
塊級元素盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>塊級元素的盒子模型</title>
<style>
.box1 {
/*
內容區 （content），元素中的所有的子元素和文字內容都在內容區中排列
內容區的大小由width和height兩個屬性來設定
*/
background: #aabbff;
width: 200px;
height: 200px;
/*
邊框（border）：邊框屬於盒子邊緣，邊框裡屬於盒子內部，出了邊框就都是盒子的外部
邊框的大小會影響整個盒子的大小
設定邊框，需要至少設定三個樣式，但width和color是有預設值的，border-style的預設值為none，如果不寫則預設為none,即不顯示
邊框寬度：border-width，可以用來指定四個方向的邊框的寬度（上、右、下、左）
四個值：上、右、下、左
三個值：上、左右、下
兩個值：上下、左右
一個值：上下左右均為此值
預設值 ，一般都是三個畫素，但建議都寫，不同瀏覽器可能預設值不同
除了border-width還有一組border-xxx-width， 用來指定某一個邊的寬度
xxx可以是top、right、bottom、left
邊框顏色：border-color
如果省略不寫，則預設使用color的值，如果沒有指定color的值，color值的預設值為黑色
邊框樣式：border-style
solid:表示實線
dotted:點狀虛線
dashed:虛線
double：雙線，雙線的寬度等於 border-width 的值。
none 預設值
簡寫屬性：border
通過該屬性可以同時設定邊框所有的相關樣式，並且沒有順序要求
*/
border: 10px #bdbdbd solid;
/*
內邊距：(padding) 內容區和邊框之間的距離是內邊距，一共有四個方向的內邊距
內邊距的設定會影響盒子的大小，背景顏色會延伸到內邊距上
*/
padding: 50px;
/*
外邊距（margin）外邊距不會影響盒子可見框的大小，但外邊距會影響盒子的位置，會影響到盒子實際佔用空間
一共有四個方向的外邊距
margin-top
上外邊距，設定一個正值，元素會向下移動，設定負值，元素會向上移動，其餘的外邊距同理
但預設情況下設定margin-right不會產生任何效果
元素在頁面中是按照自左向右的順序排列的，所以預設情況下如果我們設定的左和上外邊距會移動元素自身，而設定下和右邊距會移動其他的元素
*/
margin: 10px;
}
.inner {
width: 100%;
height: 100%;
background: #bbffaa;
}
.box3 {
width: 200px;
height: 200px;
background: orange;
}
.box4 {
width: 100px;
height: 100px;
background: pink;
position: relative;
top: 100px;
}
</style>
</head>
<body>
<!--
盒模型、盒子模型、框模型（box model）
CSS將頁面中所有的元素都設定為了一個矩形的盒子
將元素設定為矩形的盒子之後，對頁面的佈局就變成將不同的盒子擺放到不同的位置
每一個盒子都是由以下幾個部分組成：
內容區（content）
內邊距（padding）
邊框（border）
外邊距（margin）
一個盒子的可見框的大小，由內容區、內邊距 和邊框共同決定
所以在計算盒子大小時，需要將這三個區域的大小加到一起
-->
<!--
元素的水平方向的佈局
元素在其父元素中水平方向的位置由以下幾個屬性共同來決定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一個元素在其父元素中，水平方向必須要滿足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素內容區的寬度（是必須滿足的）
以上等式必須成立，如果相加結果使等式不成立則稱為過渡約束，則等式會自動調整。
調整的情況：
如果這七個值中沒有為auto的情況，則瀏覽器會自動調整margin-right的值，促使等式滿足
這七個值中有三個值可以設定為auto
width width的值預設為auto，如果不寫，則使用預設值
margin-left
margin-right
如果某個值為auto，則會自動調整為auto的那個值以使等式成立
如果將一個寬度和一個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0
如果三個值都設定為auto，則外邊距都是0，寬度最大
如果將兩個外邊距設定為auto，寬度為固定值，則會將為auto的兩個外邊距設定為相同的值，經常用來使該元素在其父元素中水平居中
-->
<!-- 子元素是在父元素的內容區中排列的，如果子元素的大小超過了父元素，則子元素會從父元素中溢位
可以在父元素中使用overflow屬性來設定父元素如何處理溢位的子元素
overflow
可選值：
visible 預設值，子元素會從父元素中溢位，在父元素外部的位置顯示
hidden 溢位的內容將會被裁減不會顯示
scroll 生成兩個滾動條，通過滾動條來檢視完整的內容
auto 根據需要生成滾動條，不會生成多餘的滾動條
overflow-x: 處理水平方向的溢位
overflow-y：處理垂直方向的溢位
-->
<!--
垂直方向外邊距的重疊（摺疊）
相鄰的垂直方向的外邊距會發生重疊現象
兄弟元素：
兄弟元素間的相鄰垂直外邊距會取兩者中的較大的那個值（兩者都是正值）
特殊情況，如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的值
兄弟元素之間的外邊距的重疊，對於開發是有利的，不需要進行處理
父子元素：
父子元素間相鄰的外邊距，子元素的值會傳遞給父元素（上外邊距）
父子外邊距的摺疊會影響到頁面的佈局，必須要進行處理
1. 可以給父元素設定外邊框，但要注意邊框也是有寬度和高度的，需要將父元素的高度減小邊框的大小，子元素的外邊距也要減去父元素的邊框的大小,但這樣比較麻煩（不推薦使用）
2. 可以通過子元素使用相對定位來解決
3. 可以通過為子元素開啟BFC來解決
-->
<!-- <div class="box1">
<div class="inner"></div>
</div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
行內元素的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行內元素的盒子模型</title>
<style>
.span1 {
/* width: 100px;
height: 100px; */
visibility: visible;
}
</style>
</head>
<body>
<!--
行內元素的盒子模型
行內元素不支援設定寬度和高度
行內元素可以設定padding，但是垂直方向的padding不會影響頁面的佈局
行內元素可以設定border，但是垂直方向的border不會影響頁面的佈局
行內元素可以設定margin，但是垂直方向的margin不會影響頁面的佈局
display:用來設定元素顯示的型別
可選值：
inline:將元素設定為行內元素
block:將元素設定為塊級元素
inline-block：將元素設定為行內塊級元素
既可以設定寬度和高度，又不會獨佔一行（一般不建議使用）
table ： 將元素設定為一個表格
none:元素不在頁面中顯示
visibility 用來設定元素的顯示狀態
可選值：
visible 預設值，元素在頁面中正常顯示
hidden 元素在頁面中隱藏，不顯示，但是依然佔據頁面中的位置
-->
<span class="span1">
span元素的啊啊啊啊
</span>
</body>
</html>
瀏覽器的預設樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀏覽器的預設樣式</title>
<!-- <link rel="stylesheet" href="./normalize.css"> -->
<!-- <link rel="stylesheet" href="./reset.css"> -->
<!--
重置樣式表：專門用來對瀏覽器的樣式進行重置的
reset.css:直接去除了瀏覽器的預設樣式
normalize.css 對瀏覽器的預設樣式進行了統一，所有的瀏覽器的樣式都設定為一樣的了、
二者一般不會同時使用
-->
<style>
/*
預設樣式：
通常情況下，瀏覽器都會為元素設定一些預設樣式
預設樣式的存在會影響到頁面的佈局，不同的瀏覽器的預設樣式也不一定相同，通常情況下，編寫網頁時要去除瀏覽器的預設樣式（主要是PC端頁面）
list-style 簡寫屬性在一個宣告中設定所有的列表屬性。
list-style:none; 去除列表的屬性
*/
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background: #bbffaa;
}
</style>
</head>
<body>
<div class="box1">
</div>
<p>這是一個段落啊 啊啊 啊</p>
<p>這是一個段落啊 啊啊 啊</p>
<p>這是一個段落啊 啊啊 啊</p>
<p>這是一個段落啊 啊啊 啊</p>
<ul>
<li>列表111</li>
<li>列表222</li>
<li>列表333</li>
<li>列表444</li>
<li>列表555</li>
</ul>
</body>
</html>
定位（position）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相對定位練習</title>
<style type="text/css">
body {
font-size: 36px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/*
定位（position）
定位是一種更加高階的佈局手段
通過定位可以將元素擺放到頁面的任意位置
使用position屬性來設定定位
可選值：
static: 預設值，元素是靜止的，沒有開啟定位
relative:開啟元素的相對定位
absolute：開啟元素的絕對定位
fixed：開啟元素的固定定位
sticky：開啟元素的粘滯定位
*/
position: relative;
left: 200px;
/* top: -200px; */
bottom: 200px
}
.box3 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<script>
</script>
</body>
</html>
相對定位
/*
相對定位：當元素的position屬性值設定為relative時則表示開啟了元素的相對定位
相對定位的特點：
1.元素開啟相對定位以後，如果不設定偏移量則元素不會發生任何變化
2.相對定位是參照元素在文件流中的位置（原來的位置）進行定位的
3.相對定位會提升元素的層級
4.相對定位不會使元素脫離文件流
5.相對定位不會改變元素的性質，塊還是塊，行內還是行內
偏移量（offset）：
當元素開啟了定位以後，可以通過偏移量來設定元素的位置
top -定位元素和定位位置的上邊的距離
bottom -定位元素和定位位置的下邊的距離
-定位元素垂直方向的位置由top和bottom兩個屬性來控制
通常情況下只會使用其中之一，
top值越大，定位元素越向下移動
bottom值越大，定位元素越向上移動
left -定位元素和定位位置的左邊的距離
right -定位元素和定位位置的右邊的距離
-定位元素水平方向的位置由left和right兩個屬性來控制，通常情況下只會使用其中之一，
left值越大，定位元素越向右移動
right值越大，定位元素越向左移動
*/
絕對定位
/*
絕對定位: 當元素的position屬性值設定為absolute時，則開啟了元素的絕對定位
絕對定位的特點：
1.開啟絕對定位後，如果不設定偏移量元素，則元素的位置不會發生變化
2.開啟絕對定位後，元素會從文件流中脫離
3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
4.絕對定位會使元素提升一個層級
5.絕對定位元素是相對於包含塊進行定位的
包含塊（containing block）：
正常情況下：包含塊就是離元素最近的祖先塊元素
<span>是行內元素，不算包含塊
絕對定位的包含塊：包含塊就是離它最近的開啟了定位的祖先元素，如果所有的祖先元素都沒有開啟定位，則根元素就是它的包含塊，則相對於根元素（html元素，即當前頁面，即頁面左上角為原點（0,0））進行定位
html（根元素、初始包含塊）
*/
固定定位
/*
固定定位：將元素的position屬性設定為fixed則開啟了元素的固定定位
固定定位也是一種絕對定位，所有固定定位的大部分特點都和絕對定位一樣，唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位
*/
粘滯定位
/*
粘滯定位
當元素的position屬性設定為sticky時，表示元素開啟了粘滯定位
粘滯定位和相對定位的特點基本一致，不同的是粘滯定位可以在元素到達某個元素時將其固定
*/
/*
粘滯定位相容性不太好，使用需謹慎
*/
絕對定位的佈局
/*
沒有開啟定位時的水平佈局：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其包含塊的內容區的寬度
開啟了絕對定位以後的水平佈局：
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含塊的內容區的寬度
*/
JS滾輪事件
// 火狐瀏覽器中支援DOMMouseScroll事件 ev.detail 向上為負,向下為正
// 非火狐瀏覽器才支援onmousewheel事件 ev.wheelDelta 向上為正，向下為負
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_滾輪事件</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="wrap"> </div>
</body>
<script>
window.onload = function () {
var wrapNode = document.querySelector("#wrap");
if (wrapNode.addEventListener) {
// 火狐瀏覽器中支援DOMMouseScroll事件
wrapNode.addEventListener("DOMMouseScroll", function (ev) {
ev = ev || event;
console.log(ev.detail);
// ev.detail 向上為負,向下為正
})
}
// 非火狐瀏覽器才支援onmousewheel事件
wrapNode.onmousewheel = function (ev) {
ev = ev || event;
console.log(ev.wheelDelta);
// ev.wheelDelta 向上為正，向下為負
}
}
</script>
</html>
滾輪事件練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滾輪事件練習</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<script>
window.onload = function () {
var wrapNode = document.querySelector("#wrap");
if (wrapNode.addEventListener) {
// 火狐瀏覽器中支援DOMMouseScroll事件
wrapNode.addEventListener("DOMMouseScroll", fn)
}
// 非火狐瀏覽器才支援onmousewheel事件
wrapNode.onmousewheel = fn;
var dir = "";
function fn(ev) {
ev = ev || event;
if (ev.wheelDelta) {
dir = ev.wheelDelta > 0 ? "向上滾動" : "向下滾動";
}
if (ev.detail) {
dir = ev.detail > 0 ? "向下滾動" : "向上滾動";
}
switch (dir) {
case "向上滾動":
wrapNode.style.height = wrapNode.offsetHeight - 10 + "px"
break;
case "向下滾動":
wrapNode.style.height = wrapNode.offsetHeight + 10 + "px"
break;
}
// 禁止事件的預設行為
// 火狐瀏覽器,dom2
if (ev.preventDefault) {
ev.preventDefault();
}
// 非火狐瀏覽器 dom0
return false;
}
}
</script>
</html>
DOM相關api
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>parentNode</title>
<style>
#inner2 {
position: absolute;
}
#wrap {
position: relative;
}
</style>
</head>
<body id="body">
<div id="wrap">
wrap
<div id="inner1">
inner1
<div id="inner2">
inner2
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
js方面的相容性問題
ev || event
滑鼠滾輪 （火狐瀏覽器相容性問題較大）
事件繫結
offsetParent
1.父級是否有定位（4種）
2.本身是否有定位（4種）
3.瀏覽器不一樣（5大PC瀏覽器 + IE(6 7 8)）
共128種
IE7以上：
不論父級有沒有定位，只要本身定位為fixed
==》 offsetParent:null（ie7以上（不是火狐） ）
==》 offsetParent:body（火狐）
本身定位不為fixed（IE7以上的瀏覽器包括火狐）
父級沒有定位：
==》 offsetParent:body
父級有定位：
==》 offsetParent:定位父級
如果body和html之間的margin被清掉了。IE7以下與IE7以上的結論相同
IE7以下，如果當前元素的某個父級觸發了haslayout,那麼offsetParent就會指向到這個觸發了layout特性的父節點上（最常見的觸發haslayout的屬性就是 overflow: hidden;）
### 注意點
1.分清parentNode和offsetParent的區別
parentNode：直接父級
parentNode表示直接父級，不論包含塊是怎樣，都表示的是當前元素的直接父級
offsetParent：類似於CSS的包含塊
2.offsetParent的作用：
offsetLeft和offsetTop是參照於offsetParent的內邊距邊界的
3.dom裡所有的元素都是有offsetLeft和offsetTop的，只要有offsetParent
*/
window.onload = function () {
var inner2 = document.querySelector("#inner2");
// parentNode表示直接父級，不論包含塊是怎樣，都表示的是當前元素的直接父級
console.log(inner2.parentNode.id);
}
</script>
</html>
offsetparent
// offsetLeft&offsetTop是所有元素共有的，只要有offsetParent
/*
IE7以上：
不論父級有沒有定位，只要本身定位為fixed
==》 offsetParent:null（ie7以上（不是火狐） ）
==》 offsetParent:body（火狐）
本身定位不為fixed（IE7以上的瀏覽器包括火狐）
父級沒有定位：
==》 offsetParent:body
父級有定位：
==》 offsetParent:定位父級
如果body和html之間的margin被清掉了。IE7以下與IE7以上的結論相同
IE7以下，如果當前元素的某個父級觸發了haslayout,那麼offsetParent就會指向到這個觸發了layout特性的父節點上（最常見的觸發haslayout的屬性就是 overflow: hidden;）
*/
獲取元素的絕對位置，相對位置和視口尺寸
// 獲取元素在頁面中的位置
// 絕對位置：到body的距離
// 相對位置：到視口的距離
// 可以通過element物件的getBoundingClientRect（）方法來獲取元素的四個角的相對位置，返回值為一個物件，物件中的值為：height、width、left、top、right、bottom
// getBoundingClientRect+滾動條滾動時元素滾動的距離 -----》元素的絕對位置
// 代表元素border-box 的尺寸
// height
// width
// 代表元素左上角的相對位置
// left
// top
// 代表元素右下角的相對位置
// right
// bottom
// document.documentElement.clientWidth並不是根標籤的可視區域，就是視口的大小
// document.documentElement.offsetWidth才是根標籤的border-box的大小
/* 獲取元素的絕對位置，相對位置和視口尺寸 */
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_獲取元素的絕對位置</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
height: 100%;
}
#wrap {
position: absolute;
background: pink;
left: 200px;
top: 200px;
}
#inner1 {
position: absolute;
background: deeppink;
left: 150px;
top: 150px;
}
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body id="body">
<div id="wrap">
wrap
<div id="inner1">
inner1
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
// 獲取元素在頁面中的位置
// 絕對位置：到body的距離
// 相對位置：到視口的距離
// 可以通過element物件的getBoundingClientRect（）方法來獲取元素的四個角的相對位置，返回值為一個物件，物件中的值為：height、width、left、top、right、bottom
// getBoundingClientRect+滾動條滾動時元素滾動的距離 -----》元素的絕對位置
// 代表元素border-box 的尺寸
// height
// width
// 代表元素左上角的相對位置
// left
// top
// 代表元素右下角的相對位置
// right
// bottom
var inner1 = document.querySelector("#inner1");
// point即為inner1的絕對位置
var point = getPointAb(inner1);
console.log(point);
// 如果存在border和margin存在會影響函式的取值
function getPointAb(node) {
// while迴圈疊加offsetParent的offsetLeft和offsetTop
var x = 0;
var y = 0;
while (node) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return { x: x, y: y };
}
// document.documentElement.clientWidth並不是根標籤的可視區域，就是視口的大小
// document.documentElement.offsetWidth才是根標籤的border-box的大小
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
</script>
</html>
文件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件流</title>
<style>
.box1 {
width: 100px;
background: #bbffaa;
}
.box2 {
width: 100px;
background: #000000;
}
span {
background: #bdbdbd;
}
</style>
</head>
<body>
<!--
文件流（normal flow）
網頁是一個多層的結構，一層摞著一層，通過css可以分別為每一層設定樣式，作為使用者只能看到最頂上的一層，這些層中，最底下的一層稱為文件流。文件流是網頁的基礎。
我們所建立的元素預設都是在文件流中進行排列的。
對於我們來說，元素主要有兩個狀態：
--在文件流中
--不在文件流中（脫離文件流）
元素在文件流中的特點：
塊元素：
--塊元素會在頁面中獨佔一行（自上向下垂直排列）
--預設寬度是父元素的全部（會把父元素撐滿）
--預設高度是被內容撐開（子元素撐開）,元素有多少，高度就是多少
行內元素
--行內元素不會獨佔頁面中的一行，只佔自身的大小
--行內元素在頁面中自左向右水平排列，如果一行之中不能容納所有的行內元素，則元素會換到第二行繼續自左向右排列（和習慣的書寫順序一致）
--行內元素的預設寬度和預設高度都是被內容撐開
脫離文件流的特點：
塊級元素：
1.塊元素不在獨佔一行
2.脫離文件流後，塊級元素的寬度和高度預設都會被內容撐開
行內元素：
行內元素脫離文件流後會變成塊級元素，其特點和塊級元素相同。
脫離文件流後，就不需要再區分塊級元素和行內元素了。
-->
<div class="box1">div1</div>
<div class="box2">div2</div>
<span>
span1
</span>
<span>
span2
</span>
</body>
</html>
長度單位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>單位</title>
<style>
.box1 {
/*
長度單位：
畫素
螢幕（顯示器）實際上是由一個個發光的小點點構成的
不同螢幕的畫素大小是不同的，畫素越小的螢幕顯示的效果就越清晰，所以同樣的200px在不同的裝置下顯示的效果是不一樣的。
百分比
-也可以將屬性值設定為相對於其父元素屬性的百分比
設定百分比可以使子元素跟隨父元素的改變而改變
em
em是相對於元素的字型大小來計算的，是相對於自身的字型大小
1em = 1font-size
em會根據字型大小的改變而改變
rem
rem是相對於根元素（html）的字型大小來計算的
*/
width: 200px;
height: 200px;
background: orange;
}
.box2 {
width: 10em;
height: 10em;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
顏色（RGB、hsl）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
/*
顏色單位：
在css中可以直接使用顏色名來設定各種顏色，例如red、yellow、green、blue等等
但是在css中直接使用顏色名是非常不方便的
RGB：
RGB是通過三種顏色的不同濃度來調配處不同的顏色，RGB為光的三原色。
R:red，G：green，B：blue
每一種顏色的範圍在0-255（0% - 100%）之間。
語法：rgb(紅色，綠色，藍色)
rgb(0,0,0)為黑色
rgb(255,255,255)為白色
rgba:就是在RGB的基礎上增加了一個a表示不透明度，1表示不透明，0表示全透明
需要四個值，前三個和rgb一樣，第四個表示不透明度，取值在0-1之間
16進位制的RGB值
語法：#紅色綠色藍色
顏色濃度通過00-ff表示
如果顏色兩位重複可以進行簡寫
#aabbcc ==>#abc
但#aabbcd 就不能使用簡寫
hsl值
H:色相（0-360）
S:飽和度 顏色濃度（0% - 100%）
L:；亮度顏色亮度（0% - 100%）
hsla值
a為不透明度，其餘的同hsl值一樣
*/
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
浮動
浮動的定義及其特點
/*
通過浮動可以使一個元素向其父元素的左側或右側移動
使用float屬性來設定元素的浮動
float 可選值：
none: 預設值 ，不浮動
left：元素向左浮動
right：元素向右浮動
元素設定浮動以後，水平佈局的等式便不需要強制成立了
元素設定浮動以後，會完全從文件流中脫離，不在佔據文件流中的位置，所以元素下邊的還在文件流中的元素會自動向上移動
浮動的特點：
1.浮動元素會完全脫離文件流，不再佔據文件流中的位置
2.設定浮動後，元素會向父元素的左側或右側移動
3.浮動元素預設不會從父元素中移出
4.水平方向上，浮動元素向左或向右移動時，不會超過它前面的其他的浮動元素
5.如果浮動元素的上邊是一個沒有浮動的塊級元素，則浮動元素將無法上移
6.在垂直方向上，浮動元素不會超過它前面的浮動的兄弟元素，最多是和它一樣高
7.浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以可以利用浮動來設定文字環繞圖片的效果
8.元素設定浮動以後，將會從文件流中脫離，從文件流中脫離後，元素的一些特點也會發生變化
脫離文件流的特點：
塊級元素：
1.塊元素不在獨佔一行
2.脫離文件流後，塊級元素的寬度和高度預設都會被內容撐開
行內元素：
行內元素脫離文件流後會變成塊級元素，其特點和塊級元素相同。
脫離文件流後，就不需要再區分塊級元素和行內元素了。
*/
高度塌陷
/*
高度塌陷問題
在浮動的佈局中，父元素的高度預設是被子元素撐開的。
當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失，出現高度塌陷問題
父元素高度丟失以後，其下的元素會自動上移，導致頁面的佈局混亂。高度塌陷問題是浮動佈局中比較常見的一個問題，這個問題必須要進行處理。
*/
/*
BFC（Block Formatting Context）塊級格式化環境
BFC是CSS中的一個隱含的屬性，可以為一個阿勻速開啟BFC，開啟BFC的元素會變成一個獨立的佈局區域
元素開啟BFC後的特點：
1.開啟BFC的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素的外邊距不會發生重疊
3.開啟BFC的元素可以包含浮動的子元素
可以通過一些特殊的方式來開啟元素的BFC(所有的開啟BFC的方式都會有一些副作用)
1. 設定元素的浮動。（副作用：下方元素會自動上移）（不推薦使用）
2. 將元素設定為行內塊元素。 （副作用：寬度沒有了，而且行內塊不適合作為外部的佈局容器）（不推薦使用）
3. 將元素的overflow設定為一個非visible（非預設值）的值。（副作用較小，是一個臨時的解決方式）
常用的方式，為元素設定 overflow: auto; 或overflow: hidden;來開啟BFC,使其可以包含浮動元素
4. 也可以通過設定絕對定位為absolute或者固定定位fixed來解決高度塌陷問題，但是並不推薦，也會造成父元素的高度丟失問題
5. 為父元素新增一個空的div標籤，設定div標籤的樣式為（clear:both;）但這樣會新增一個多餘的div元素，造成程式碼冗餘
6. 完美的解決方案：父元素通過after偽類來解決問題
父元素::after{
content: '';
display: block;
clear: both;
}
*/
清除浮動clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clear</title>
<style>
div {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background: #bbffaa;
float: left;
}
.box2 {
width: 400px;
height: 400px;
background: green;
float: right;
}
.box3 {
width: 200px;
height: 200px;
background: orange;
clear: left;
}
/*
由於box1的浮動，導致box3位置上移，也就是說box3受到了box1浮動的影響，位置發生了改變
如果我們不希望某個元素因為其他元素浮動而受到影響而改變位置，可以通過設定clear屬性來清除浮動元素對當前元素產生的影響
clear 作用：清除浮動元素對當前元素產生的影響
可選值：
left 清除左側浮動元素對當前元素產生的影響
right 清除右側浮動元素對當前元素產生的影響
both 清除兩側中最大影響的那一側
原理：設定清除浮動以後，瀏覽器會自動為元素新增一個上外邊距，以使其位置不受其他元素的影響
*/
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
after偽類解決高度塌陷問題
/*
解決高度塌陷問題的最好的方式：
使用::after偽類，
子類元素設定浮動以後，父元素通過使用::after偽類來設定父元素的樣式，
首先，通過content屬性設定after後的字元為空，其次通過clear屬性設定清除子元素的浮動的影響，最後設定父元素的after偽類為塊級元素即可完美解決高度塌陷問題。
父元素::after {
content: '';
display: block;
clear: both;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用after偽類來解決高度塌陷問題</title>
<style>
.box1 {
border: 1px #0556DF solid;
}
.box2 {
width: 200px;
height: 200px;
background: pink;
float: left;
}
.box1::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfix</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: purple;
}
/* .box1::before {
content: '';
display: table;
} */
.box2 {
width: 100px;
height: 100px;
background: #bbffaa;
margin-top: 100px;
}
/* 此樣式可以同時解決外邊距重疊問題和由於浮動導致的高度塌陷問題 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix" >
<div class="box2"></div>
</div>
</body>
</html>