一、選擇器權(quán)重
- 類型選擇器（元素選擇器）----- 0001
- class選擇器 ------ 0010
- id選擇器 ----- 0100
- 偽類選擇器 ---- 0001
- 層級（包含）選擇器 ---- 多個選擇器的權(quán)重之和
- 群組選擇器 ---- 分開看每個選擇器的權(quán)重
權(quán)重高，優(yōu)先級就高
二、浮動
標(biāo)準(zhǔn)流
- 塊標(biāo)簽：一行占一個，從上往下，從左往右。默認(rèn)寬度是100%
- 行內(nèi)標(biāo)簽：一行可以顯示多個，從左往右布局，直到遇到邊界就自動換行。
脫流
- 浮動
- 定位
1. 定義：
就是讓豎著顯示的標(biāo)簽橫著來顯示，塊的默認(rèn)寬度是內(nèi)容的寬度
2. 形式：
float：left 和 right
3. 注意事項
- 如果要使用浮動，同一級的所有標(biāo)簽都要浮動
- 如果父標(biāo)簽浮動，子標(biāo)簽的位置會跟著浮動
- 布局基本順序：從上往下，從左往右
4. 文字環(huán)繞
文字標(biāo)簽不浮動，被環(huán)繞的標(biāo)簽浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*被環(huán)繞的對象浮動*/
#d1{
float: left;
width: 60px;
height: 60px;
/*background-color: yellow;*/
}
#d2{
width: 400px;
}
</style>
</head>
<body>
<img id="d1" src="img/luffy3.png"/>
<p id="d2">
方遞費(fèi)加哈薩克貨到付款撒都<br />分開哈薩克東方航<br />空撒貨到付款阿士大夫<br />看撒謊快遞費(fèi)開始澆返回
</p>
</body>
</html>
三、定位
1. 距離
- top：標(biāo)簽頂部距離其他標(biāo)簽的位置
- bottom：標(biāo)簽底部距離其他標(biāo)簽的位置
- left：標(biāo)簽左邊距離其他標(biāo)簽的位置
- right：標(biāo)簽右邊距離其他標(biāo)簽的位置
2. position
- absolute: 相對第一個position的值是非static,非initial的父標(biāo)簽進(jìn)行定位
- relative: 正常位置定位（按標(biāo)準(zhǔn)流定位）
- fixed: 相對于瀏覽器定位
- sticky: 不滾動的時候按標(biāo)準(zhǔn)流布局，滾動的時候相對瀏覽器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
position: relative;
width: 500px;
height: 500px;
background-color: cadetblue;
/*margin-top: 320px;*/
/*top: 320px;*/
top: 20px;
}
#d2{
position: fixed;
width: 100px;
height: 100px;
background-color: salmon;
/*top: 100px;*/
right: 20px;
bottom: 50px;
}
#d3{
/*float: right;*/
position: sticky;
/*top: 120px;*/
width: 100px;
bottom: 20px;
/*right: 20px;*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
<div id="" style="height: 20px; background-color: yellow; width: 200%;">
</div>
<div id="d3" style="height: 60px; background-color: purple;">
</div>
</body>
</html>
四、清除浮動
1. 原因：
實(shí)際開發(fā)中，會存在因浮動而產(chǎn)生高度塌陷
2.方式：
a.添加空的div：
- 在父標(biāo)簽(高度塌陷的標(biāo)簽)的最后添加一個空的div,并且設(shè)置這div的樣式表: clear:both（可能會產(chǎn)生大量的額外的代碼）
b.設(shè)置overflow：
- 在父標(biāo)簽中設(shè)置樣式表的overflow的值為hidden
c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}
五、display屬性
1.HTML中標(biāo)簽分為塊和行內(nèi)
2.CSS中中標(biāo)簽分為3類：塊、行內(nèi)塊、行內(nèi)（display）（在標(biāo)準(zhǔn)流中）
- block:塊（一個占一行，默認(rèn)寬度是100%，高度默認(rèn)根據(jù)內(nèi)容來確定；直接設(shè)置寬高有效）
- inline-block:行內(nèi)塊(一行可以有多個，默認(rèn)寬高是內(nèi)容的寬高；直接設(shè)置寬高有效)
- inline:行內(nèi)(一行可以有多個，默認(rèn)寬高是內(nèi)容的寬高；設(shè)置寬高無效)
通過改變標(biāo)簽的display的值，可以讓一個標(biāo)簽在塊、行內(nèi)塊個行內(nèi)之間任意切換
注意：inline-block標(biāo)簽的右邊默認(rèn)都有一個間隙，不能和其他標(biāo)簽無縫連接(這個間隙目前沒有辦法清除)
六、盒子模型
每一個標(biāo)簽都是由4個部分組成：
1.內(nèi)容：顯示標(biāo)簽內(nèi)容的部分，可見的（設(shè)置寬和高的值，就是設(shè)置內(nèi)容部分的大?。?br> 2.內(nèi)邊距(padding):可見的，不能顯示內(nèi)容（通過設(shè)置padding來改變其值，默認(rèn)是0）
3.邊框(border):可見的，如果有內(nèi)邊距邊框就顯示在內(nèi)邊距上，否則顯示在內(nèi)容上
4.外邊距(margin):不可見的，但是會占據(jù)瀏覽器的空間
