複習css 樣式 內聯樣式，行內樣式，外部樣式優先順序 離HTML元素越近，優先順序越高 內聯樣式離元素近：行內樣式>內聯樣式>外部樣式 外部樣式離元素近：行內樣式>外部樣式>內斂樣式 本質：瀏覽器從上到下解析過程中，後出現的樣式會覆蓋較早出現的樣式 選擇器 基本選擇器 id > 類 > 標簽 本質：定 ...
複習css
樣式
內聯樣式，行內樣式，外部樣式優先順序
離HTML元素越近，優先順序越高
內聯樣式離元素近：行內樣式>內聯樣式>外部樣式
外部樣式離元素近：行內樣式>外部樣式>內斂樣式
本質：瀏覽器從上到下解析過程中，後出現的樣式會覆蓋較早出現的樣式
選擇器
基本選擇器
id > 類 > 標簽
本質：定位越精準，優先順序越高
層次選擇器
子孫選擇器：body p{} 選擇body下所有p元素，即所有p後代。也叫後代選擇器。
子選擇器：body > p{} 選擇body下第一層p元素，即所有p兒子。
相鄰弟弟選擇器：.className + p{} 選擇與某個類相鄰且靠後的第一個p元素，即第一個p弟弟。想象成i++，就是每次加一個。如果第一個弟弟不是p，那麼無反應。
弟弟選擇器：.className ~ p{} 選擇與某個類同一層且靠後的所有p元素，即所有p弟弟。想象成表示範圍的~。不關心相不相鄰，只要在後面即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試層次選擇器</title>
<style>
.active + p{
background: red;
}
.active ~ p{
background: red;
}
</style>
</head>
<body>
<p class="active">0</p>
<a href="">我是a標簽</a>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
結構偽類選擇器
ul li:first-child{}
ul li:last-child{}
p:nth-child(1){} 通過p找到父元素，然後選擇父元素的第一個兒子，這個兒子必須是p，否則無反應
p:nth-of-type(2){} 通過p找到父元素，然後選擇父元素的第二p個元素，這個p元素不一定位於第二的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試結構偽類選擇器</title>
<style>
p:nth-child(1) {
background-color: blue;
}
p:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<p>p1</p>
<a href="">aaa</a>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div>
<p>ddd</p>
</div>
</body>
</html>
屬性選擇器
a[id]{} 選擇有id的a
a[id="idName"]{} 選擇有id為idName的a
a[class*="className"]{} 選擇有class包含className的a，為啥是包含？因為一個元素可以有多個類名。
a[href^="http"]{} 選擇href以http開頭的a
a[href$="com"]{} 選擇href以com結尾的a
行高
一行內容所占的高度。
包括元素上方的高度，元素自身的高度，元素下方的高度。
設置單行文字上下居中：line-height = height
盒子模型
margin的妙用
margin:0 auto;/*使盒子水平居中*/
盒子的寬高
盒子的寬度
margin-left + border-left + padding-left + 內容寬度 + padding-right + border-right + margin-right
盒子的高度
margin-top + border-top + padding-top + 內容高度 + padding-bottom + border-bottom + margin-bottom
display
常見的行內元素：span，img，a
行內元素不可以設置寬，高，除非用display：block或display：inline-block。
span設為inline-block後，可以調整寬高，但是在同一行顯示。
任何元素設為block後一定是獨占一行。
div設為inline後，設置的寬高也不起作用了
inline-block的妙用：導航條的列表
浮動float
把屏幕比喻成地面，浮動的元素就是氣球，是先從地面浮起來，再向左向右浮動。
原本的div是只能上下佈局，引入float就使得div可以左右佈局。
清除浮動clear是在浮動的基礎上修改（調整浮動的位置）的，不是說取消浮動。
clear:left; /*左側不允許有浮動元素*/
clear:right; /*右側不允許有浮動元素*/
clear:both; /*兩側不允許有浮動元素*/
clear:none; /*不清除浮動*/
clear可以讓浮動的元素，在浮動的基礎上，重新構成一個標準的文檔流（從上往下顯示）。
個人理解：清除浮動就是擠開我這一層的浮動元素，我獨占某一層，從屏幕（平面）上看就是從上到下排列元素。
浮動的後遺症：父級元素塌陷
解決辦法：
1.將父級div設置一個固定的高度，從而把浮動的元素也包進去。
2.父元素中新增一個div，設置clear:both。
3.父元素屬性overflow:hidden/scroll/auto
4.父元素添加偽類：
#father:after{
content:'';
display:block;
clear:both;
}
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試父級塌陷</title>
<style>
.father {
border: 1px solid red;
}
.layer1, .layer2, .layer3 {
width: 500px;
height: 100px;
background-color: gold;
border: 1px blue dashed;
float: right;
display: inline-block;
}
.father:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="layer1">
我是layer1
</div>
<div class="layer2">
我是layer2
</div>
<div class="layer3">
我是layer3
</div>
</div>
</body>
</html>
我的理解是：擠開某一層的浮動元素，浮動元素在它自己那一層浮動著，我獨占某一層，然後撐開了父元素。
display與float比較
display不能控制方向
float容易引起父級塌陷
定位
相對定位
position:relative
相對於元素自身原來的位置偏移，原來空間仍然保留。
絕對定位
positive:absolute
最近的父級設置了position:relative/absolute情況下，相對於父級元素定位。
最近的父級沒有設置position:relative/absolute情況下，相對html定位，元素會移動。
不保留偏移之前的空間。
固定定位
position:fixed
相對於瀏覽器視窗定位，不論如何滑動，永遠固定在某個角落。常用來設計導航條和回到頂部按鈕。
