關於演算法與資料結構的整理1.0
CSS學習
偽類選擇器
以:開頭的選擇器稱為偽類選擇器
連結偽類選擇器
用於處理a標籤連結的選擇器
-
a:link 指未被訪問時的a標籤
-
a:visited 指被訪問過的a標籤
-
a:hover 指滑鼠經過時的a標籤
-
a:active 指滑鼠點選時的a標籤
a:link { color: #000; text-decoration: none; } a:visited { color: orange; } a:hover { color: skyblue; text-decoration: underline; } a:active { color: green; }
注意：整體順序需要按照LVHA的順序書寫，a標籤具有預設的樣式，在給a標籤設定樣式時，需要單獨設定
focus偽類選擇器
用於選取獲得焦點的表單元素input，即input:focus，例如：
/*滑鼠聚焦時背景變為紅色*/
input:focus {
background-color: red;
}
元素顯示模式
元素顯示模式意思就是元素（標籤）以什麼方式顯示主要分為塊元素和行內元素兩種
塊元素
常見的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，塊元素有以下特點
- 自己獨佔一行
- 高度、寬度、內外邊距都能控制
- 寬度預設是容器（父級寬度）的100%
- 是一個容器及合資，裡面可以放行內或者塊元素
注意：文字類元素不能使用塊元素，
標籤主要存放文字，p裡面不能放塊元素，特別不能放div，同理
<h1>~<h6>也是。
行內元素
常見的有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，行內元素具有以下特點：
- 相鄰行內元素在一行上，一行可以顯示多個
- 高寬設定都是無效的
- 預設寬度是本身內容的寬度
- 行內元素只能容納文字或者其他行內元素
注意：連結裡不能再放連結，特殊情況
<a>裡可以放塊元素，到那時最好給a轉換一下塊級模式
行內塊元素
行內元素有幾個特殊的標籤：<img>、<input>、<td>，他們同時具有塊元素和行內元素的特點：
- 和相鄰的行內元素（行內塊）在一行上，但是他們之間會有空白縫隙，一行可以顯示多個
- 預設寬度就是本身內容的寬度
- 高度、行高、內外邊距都可以控制
元素顯示預設的轉換
特殊情況下，需要進行元素模式轉換，即需要將行內元素轉化成塊元素，就可以設定寬高了，常見的就是a標籤，有時我們需要增加a標籤的觸發範圍，就需要為a連結設定寬高，轉換為塊級元素語法為：
a {
/*行內元素轉換為塊級元素*/
display: block;
width: 100px;
height: 100px;
}
塊級元素也可以指定為行內元素：
div {
display: inline;
}
轉換為行內塊元素
span {
display: inline-block;
}
背景
背景顏色
body {
background-color: red;
}
背景圖片
body {
background-image: url(http://aaa/bbb/ccc);
}
背景平鋪
body {
background-image: url(http://aaa/bbb/ccc);
/*不重複*/
background-repeat: no-reapeat;
}
背景位置
-
方位名詞
採用top、left、center、right、bottom
body { background-image: url(http://aaa/bbb/ccc); /*不重複*/ background-repeat: no-reapeat; /*左上位置*/ background-position: left top; } -
精確單位
採用具體的畫素，第一個值表示x軸，第二個值表示y軸
body { background-image: url(http://aaa/bbb/ccc); /*不重複*/ background-repeat: no-reapeat; /*左上位置*/ background-position: 20px 50px; } -
混合單位
將方位名詞和畫素值混合使用
body { background-image: url(http://aaa/bbb/ccc); /*不重複*/ background-repeat: no-reapeat; /*距離上側50px，左右居中顯示*/ background-position: center 50px; }
背景固定
將背景固定在螢幕一個地方，不隨螢幕滾動而滾動
body {
background-image: url(http://aaa/bbb/ccc);
/*不重複*/
background-repeat: no-reapeat;
/*距離上側50px，左右居中顯示*/
background-position: center 50px;
/*固定顯示，如不宣告則預設滾動*/
background-attachment: fixed
}
圖片複合寫法
background: 背景顏色 背景圖片地址 背景平鋪 背景影象滾動 背景圖片位置
body {
background: black url(http://aaa/bbb/ccc) no-repeat fixed center top;
}
背景色半透明
body {
/*最後一個值是透明度*/
background: rgba(0, 0, 0, 0.3);
}
CSS選擇器的優先順序
| 選擇器 | 權重 |
|---|---|
| 繼承或者* | 0,0,0,0 |
| 標籤選擇器 | 0,0,0,1 |
| 類/偽類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內式 style = "" | 1,0,0,0 |
| !important | 無窮大 |
CSS選擇器優先順序疊加問題
當我們使用複合選擇器時，CSS的優先順序會進行疊加，比如：
/*最終優先順序為0,0,0,3*/
div ul li {
}
/*最終優先順序為0,0,1,2*/
.nav ul li {
}
/*最終優先順序為0,0,1,1*/
a:hover {
}
/*最終優先順序為0,0,1,1*/
.nav a {
}
/*最終優先順序為 0,1,0,1*/
#people a{
}
注意：權重的疊加不會進位，即低優先順序的選擇器再怎麼疊加也永遠不會大於高優先順序的，繼承的權重是0。
CSS盒子模型
盒子內容包括：邊框、外邊距、內邊距、實際內容
邊框border
div {
/*寬度 樣式 顏色 三個引數沒有順序*/
/*樣式：solid：實線邊框 dashed：虛線邊框 dotted： 點線邊框 第三個引數是 */
border: 1px solid red;
/*上邊框*/
border-top: 1px;
/*下邊框*/
border-bottom: 1px;
/*左邊框*/
border-left: 1px;
/*右邊框*/
border-right: 1px;
/*合併相鄰的邊框*/
border-collapse: collapse;
}
注意：給盒子加border會增大盒子的大小
外邊距margin
div {
/*四邊外邊距都是1px*/
margin: 1px;
/*上下1px 左右2px*/
margin: 1px 2px;
/*上1px 左右2px 下3px*/
margin: 1px 2px 3px;
/*上 右 下 左 順序*/
margin: 1px 2px 3px 4px;
}
外邊距讓盒子水平居中顯示
margin可以讓盒子水平居中顯示，但是必須為盒子設定寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
width: 500px;
height: 100px;
background-color: #ff8500;
/*水平居中對齊，左右設定為auto*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
外邊距合併問題
- 當上下兩個兄弟塊元素相遇時，如果上面的有margin-bottom 下面的有margin-top則會出現外邊距合併的問題，取較大者。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.damao, .ermao {
width: 200px;
height: 200px;
background-color: pink;
}
.damao {
margin-bottom: 100px;
}
.ermao {
/*取200px*/
margin-top: 200px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div></div>
</body>
</html>
解決思路：所以儘量只給一個盒子新增margin值。
-
巢狀塊元素外邊距塌陷，父子塊元素，都指定margin-top時，父元素會塌陷，塌陷的結果以最大的margin值為準
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p { margin-top: 100px; width: 400px; height: 400px; background-color: purple; } .c { /*塌陷了*/ margin-top: 200px; width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div class="p"> <div class="c"></div> </div> </body> </html>解決思路：
- 為父元素定義上邊框
- 為父元素定義上內邊距
- 為父元素新增overflow:hidden（常用）
內邊距padding
padding是盒子邊框與內容之間的間距
div {
/*四邊內邊距都是1px*/
padding: 1px;
/*上下1px 左右2px*/
padding: 1px 2px;
/*上1px 左右2px 下3px*/
padding: 1px 2px 3px;
/*上 右 下 左 順序*/
padding: 1px 2px 3px 4px;
}
注意：padding會影響盒子的大小，會撐大盒子，在做導航欄是經常利用padding撐開盒子的操作來解決導航欄文字長度不固定的問題，如果不給盒子指定寬度則不會撐大盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 200px;
width: 400px;
background-color: #ff8500;
}
p {
height: 100px;
background-color: #4c4c4c;
/*p沒有指定寬度則和父親一樣寬，這種情況給p設定padding也不會撐大盒子*/
padding: 0 20px;
}
</style>
</head>
<body>
<div>
<p>這種情況不會撐大盒子</p>
</div>
</body>
</html>
浮動
清除浮動的四種方法
-
額外標籤法也稱為隔牆法，是 W3C 推薦的做法。
額外標籤法會在浮動元素末尾新增一個空的標籤。例如
，或者其他標籤 （如
等。 -
父級新增 overflow 屬性
.parent { overflow: hidden; } -
父級新增after偽元素
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; } -
父級新增雙偽元素
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }