一個樣式名 對應一個樣式值， 名和值之間以:連接，以;結尾
將所有的段落設置為紅色(字體)
通配選擇器
作用：選中頁面中的所有元素
語法:*{}
元素（標簽）選擇器
作用:根據標簽名來選中指定的元素
語法:標簽名(}
id選擇器
作用，根據元素的id屬性值選中一個元素
語法: #id屬性值{}
類選擇器
作用:根據元素的c lass屬性值選中一組元素
語法: .class屬性值{}
class是一個標簽的屬性，它和id類似， 不同的是class可以重復使用
可以通過class屬性來為元素分組，可以同時為一個元素指定多個class屬性
id不能重復而class可以重復
交集選擇器
作用:選中同時復合多個條件的元素
語法:選擇器1選擇器2選選器3選擇器n{}
注意點:
交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
選擇器分組(并集選擇器)
作用:同時選擇多個選擇器對應的元素
語法:選擇器1，選擇器2，選擇器3,選擇器n{}
父元素
直接包含子元素的元素叫做父元素
子元素
直接被父元素 包含的元素是子元素
祖先元素
直接或間接包含后代元素的元素叫做祖先元素
一個元素的父元素也是它的祖先元素
后代元素
直接或間接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
擁有相同父元素的元素是兄弟元素
子元素選擇器
作用：選中指定父元素的指定子元素
語法:父元素>子元素
后代元素選擇器
作用:選中指定元素內的指定后代元素
語法:祖先后代
選擇下一個兄弟
語法:前一個+下一個
緊挨著的下一個元素標簽
選擇下邊所有的兄弟
語法:兄~弟
[屬性名]選擇含有指定屬性的元素
[屬性名=屬性值]選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值]選擇屬性值以指定值開頭的元素
[屬性名￥=屬性值]選擇屬性值以指定值結尾的元素
[屬性名*=屬性值]選擇屬性值中含有某值的元素的元素
偽類
偽類(不存在的類，特殊的類)
偽類用來描述一個元素的特殊狀態
偽類一般情況下都是使用:開頭
:first-child 第一個子元素
:last-child 最后一個子元素
:nth-child() 選中第n個子元素
特殊值:
n第n個n的范圍到正無窮
2n表示選中偶數位的元素
2n+1表示選中奇數位的元素
:first-of-type
:last-of-type
:nth-of-type()
這幾個偽類的功能和上述的類似，不同點是他們是在同類型元素中進行排序
:not()否定偽類
將符合條件的元素從選擇器中去除
:link用來表示投訪問過的鏈接(正常的鏈接)
: 用來表示訪問過的鏈接;由于隱私的原因，所以這個偽類只能修改鏈接的顏色
:hover用來表示鼠標稱
: 用來表示鼠標點擊
偽元素
偽元素，表示頁面中一些特殊的并不真實的存在的元素(特殊的位置)偽元素使用::開頭
::first-表示第一個字母
::first-line 表示第一行
::表示選中的內容
::元素的開始
::after元素的最后
和after 必須結合屬性來使用
樣式的繼承，我們為一個元素設置的樣式同時也會應用到它的后代元素上
繼承是發生在祖先后后代之間的
繼承的設計是為了方便我們的開發，利用繼承我們可以將一些通用的樣式統設置到共同的祖先元素上，這樣只需設置一次即可讓所有的元素都具有該樣式
注意:并不是所有的樣式都會被繼承:
比如背景相關的，布局相關等的這些樣式都不會被繼承。
樣式的沖實
當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設置不同的值時，此時就發生了樣式的沖突
發生樣式沖突時，應用哪個樣式由選擇器的權重(優先級)決定
選擇器的權重
內聯樣式1000
id選擇器0100
類和偽類選擇器0010
元素選擇器0001
通配選擇器 0000
繼承的樣式 沒有優先級
權重越高值越小，誰權重高顯示誰
比較優先級時，需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示(分組選擇器是單獨計算的)
選擇器的累加不會超過其最大的數量級，類選擇器再高也不會超過id選擇器
如果優先級計算后相同，此時則優先使用靠下的樣式
可以在某一個樣式的后邊添加! ，則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式，！慎用
長度單位:
像素
屏幕(顯示器)實際上是由一個一個的小點點構成的
不同屏幕的像素大小是不同的。像素越小的屏幕顯示的效果越清斷
百分比
也可以將屬性值設置為相對于其父元素屬性的百分比
設置百分比可以使子元素跟隨父元素的改變而改變
em
是相對于元素的字體大小來計算的
1em = 1font-size
em會根據自身字體大小的改變而改變
rem
rem是相對于根元素的字體大小來計算
顏色單位:
在CSS中可以直接使用顏色名來設置各種顏色
比如: red. . . blue. green。
但是在css中直接使用顏色名是非常的不方便
RGB值;
RGB通過三種顏色的不同濃度來調配出不同的顏色
Rred,，Bblue
每一種顏色的范圍在0-255(0%-100%)之間I
語法: RGB(紅色,綠色，藍色)
RGBA :
就是在rgb的基礎上增加了一個a表示不透明度
需要四個值，前三個和rgb一樣，第四個表示不透明度
1表示完全不透明0表示完全透明 .5半透明
十六進制的RGB值:
語法: #紅色綠色藍色
顏色濃度通過00-ff
如果顏色兩位兩位重復可以進行簡寫
# -->#abc
HSL值HSLA值
H色相(0 - 360)
S飽和度，顏色的濃度0 - 100%
L亮度，顏色的亮度0-100%
文檔流( flow)
網頁是一個多層的結構，一層摞著一層
通過CSS可以分別為每層來設 置以式
作為用戶來講只能看到最頂上一層
這些層中，最底下的一層稱為文檔流，文檔流是網頁的基礎
我們所創建的元素默認都是在文檔流中進行排列
對于我們來元素主要有兩個狀態
在文檔流中
不在文檔流中(脫離文檔流)
元素在文檔流中有什么特點:
塊元素
塊元素會在頁面中獨占-行
默認寬度是父元素的全部(會把父元素撐滿)
默認高度是被內容撐開(子元素)
行內元素
行內元素不會獨占頁面的一行，只占自身的大小
行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元
則元素會換到第二行繼續自左向右排列(書寫習慣一致)
行內元素的默認寬度和高度都是被內容撐開
盒模型、盒子模型、框模型(box model)
內容區() ，元素中的所有的子元素和文本內容都在內容區中排列
內容區的大小由width和兩個屬性來設置
width設置內容區的寬度
設置內容區的高度
邊框() ，邊框屬于盒子邊緣，邊框里邊屬于盒子內部，出了邊框都是盒子的外部
邊框的大小會影響到整個盒子的大小
要設置邊框（），需要至少設置三個樣式:
邊框的寬度-width
邊框的顏色-color
邊框的樣式-style
-width:
默認值，一般都是3個像素
width可 以用來指定四個方向的邊框的寬度
值的情況
四個值:上右下左
三個值:上左右下
兩個值:上下左右
一個值:上下左右
-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框規則和 -width-樣
-color也可以省略不寫，如果省略了則自動使用color的顏色值
-style指定邊框的樣式
solid表示實線
點狀虛線
虛線
雙線
-style的默認值是none表示沒有邊框
簡寫屬性，通過該屬性可以同時設置邊框所有的相關樣式，并且沒有順序要求
除了以外還有四個-XX 分別是-top right left
CSS將頁面中的所有元素都設置為了一個矩形的盒子
將元素設置為矩形的盒子后，對頁面的布局就變成將不同的盒子擺放到不同的位置
每一個盒子都由以下幾個部分組成
內邊距的簡寫屬性，可以同時指定四個方向的內邊距
規則和-width -樣
外邊距()
外邊距不會影響盒子可見框的大小
但是外邊距會影響盒子的位置
-共有四個方向的外邊距:
-top上外邊距，設置一個正ge元素會向下移動
-right默認情況下設置-right不會產生任何效果
-下外邊距，設置一個正值css 中設置滾動條顏色， 其下邊的元素會向下移動
-left左外邊距，設置一個正值，元素會向右移動
也可以設置負值，如果是負值則元素會向相反的方向移動
元素在頁面中是按照自左向右的順序排列的，所以默認情況下如果我們設置的左和上外邊距則會移動元素自身css 中設置滾動條顏色，而設置下和右外邊距會移動其他元素
的簡寫屬性
可以同時設置四個方向的外邊距,用法和一樣
會影響到盒子實際占用空間
內容區( )
內邊距（）
邊框()
外邊距（）
內邊距的設置會影響到盒子的大小
背景顏色會延伸到內邊距上
一個盒子的可見框的大小，由內容區內邊距和邊框共同決定，
所以在計算盒子大小時，需要將這三個區域加到一起計算
默認情況下父元素的高度被內容撐開
子元素是在父元素的內容區中排列的，
如果子元素的大小超過了父元素，則子元素會從父元素中溢出
使用 屬性來設置父元素如何處理溢出的子元素
可選值:
：默認值子元素會從父元素中溢出，在父元素外部的位置顯示
溢出內容將會被裁剪不會顯示
生成兩個滾動條，通過滾動條來查看完整的內容
Auto 根據需要生成滾動條
-x :單獨處理水平X軸
-y:單獨處理水平Y軸
垂直外邊距的重疊(折疊)
相鄰的垂直方向外邊距會發生重疊現象
兄弟元素
兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
特殊情況:
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
兄弟元素之間的外邊距的重疊，對于開發是有利的，所以我們不需要進行處理
父子元素
父子元素間相鄰外邊距，子元素的會傳遞給父元素(上外邊距)
父子外邊距的折疊會影響到頁面的布局，必須要進行處理
行內元素的盒模型
行內元素不支持設置寬度和高度
行內元素可以設置,但是垂直方向不會影響頁面的布局
行內元素可以設置,垂直方向的不會影響頁面的布局
行內元素可以設置,垂直方向的不會影響布局
用來設置元素顯示的類型
可選值:
將元素設置為行內元素
block將元素設置為塊元素
-block 將元素設置為內塊元素，行內塊，既可以設置寬度和高度又不會獨占一行
table將元素設置為一個表格
none元素不在頁面中顯示
用來設置元素的顯示狀態
可選值:
默認值，元素在頁面中正常顯示
元素在頁面中隱藏不顯示
默認樣式:
通常情況，瀏覽器都會為元素設置一些默認樣式
默認樣式的存在會影響到頁面的布局，通常情況下編寫網頁時必須要去除瀏覽器的默認樣式（pc頁面）
重置樣式表:專門用來對瀏覽器的樣式進行重置的
*{
: e;
: 0;
}
reset.css直接去除了瀏覽器的默認樣式
.css;對默認樣式進行了統一
默認情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定
box-用來設置盒子尺寸的計算方式(設置width 的作用)
可選值:
-box 默認值，寬度和高度用來設置內容區的大小
- box寬度和高度用來設置整個盒子可見框的大小
width和指的是內容區和內邊距和邊框的總大小
用來設置元素的輪廓線，用法和borde一樣r :
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小
box- 用來設置元素的陰影效果，陰影不會影響頁面布局
第一個值水平偏移量設置陰影的水平位置正值向右移動負值
第二個值垂直偏移量設置陰影的水平位置正值向下移動負值
第三個值陰影的顏色
第四個值陰影的顏色
- ：用來設置園角圓角設置的圓的半徑大小
- top- left -
- top-right-
- left-
- -right-
-可以分別指定四個角的圓角
四個值左上右上右下左下
三個值左上右上/左下右下
兩個值左上/右下右上/左下
將元素設置為一個圓形
- : 50% ;
通過浮動可以使一 個元素向其父元素的左側或右側移動
使用float 屬性來設置于元素的浮動
可選值:
none默認值，元素不浮動
left元素向左浮動
right元素向右浮動
注意，元素設置浮動以后，水平布局的等式便不需更強制成立，元素設置浮動以后，會完全從文檔流中脫離，所以元素下邊的還在文檔流中的元素會自動向上移動
浮動的特點:
1、浮動元素會完全脫離文檔流，不再占據文檔流中的位置
2、設置浮動以后元素會向父元素的左側或右側移動
3、浮動元素默認不會從父元素中移出
4、浮動元素向左或向右移動時，不會超過它前邊的其他浮動元素
5、如果浮動元素的上邊是一個沒有浮動的塊元素， 則浮動元素無法上移
6、浮動元素不會超過它上邊的浮動的兄弟元素，最多最多就是和它一樣高
簡單總結：
浮動目前來講它的主要作用就是讓頁面中的元素可以水平排列，
通過浮動可以制作些水平方向的布局。
浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，
所以我們可以利用浮動來設置文字環境圖片的效果
元素設置浮動以后，將會從文檔流中脫高，從文檔流中脫高后，
元素的一些特點也會發生變化
脫高文檔流的特點:
塊元素:
1、塊元素不在獨占頁面的一行
2、脫離文檔流以后，塊元素的寬度和高度默認都被內容撐開行內元素;
行內元素脫高文檔流以后會變成塊元素，特點和塊元素一樣
脫離文檔流以后，不需要再區分塊和行內了
高度塌陷的問題:
在浮動布局中，父元素的高度默認是被子元素撐開的，
當子元素浮動后，其會完全脫高文檔流，子元素從文檔流中脫高
將會無法撐起父元素的高度，導致父元素的高度丟失
父元素高度丟失以后，其下的元素會自動上移，導致頁面的布局混亂
所以高度塌陷是浮動布局中比較常見的一個問題，這個問題我們必須要進行處理!
BFC(Block ) 塊級格式化環境
BFC是一個CSs中的一個隱含的屬性，可以為一個元素開啟BFC
開啟BFC該元素會變成一個獨立的布局區域
元素開啟BFC后的特點:
1.開啟BFC的元素不會被浮動元素所覆蓋
2.開啟BFC的元素子元素和父元素外邊距不會重疊
3.開啟BFC的元素可以包含浮動的子元素
可以通過一些特殊方式來開啟元素的BFC:
1、設置元素的浮動（不推薦）
2、將元素設置為行內塊元素（不推薦）
3、將元素的設置為一個非的值
常用的方式為元素設置: 開啟其BFC以使其可以包含浮動元素
如果我們不希望某個元素因為其他元素浮動的影響而改變位置，
可以通過clear屬性來清除浮動元素對當前元素所產生的影響
clear
作用:清除浮動元素對當前元素所產生的影響
可選值:
left清除左側浮動元素對當前元素的影響
right清除右側浮動元素對當前元素的影響
both清除兩側中最大影響的那側
原理:
設置清除浮動以后。瀏覽器會自動為元素添加一個上外邊距，
以使其位置不受其他元素的影響
用CSS清除高度塌陷
在標簽最后添加：：after偽元素
：：after{
：” ”;添加空串
:block;讓空串編程塊元素
Clear:both;清除浮動影響
}
用HTML清除高度塌陷是在最后添加一個空div，讓其撐開父元素的高度
解決外邊距重疊
: :{:” ”;: table;}
這個樣式可以同時解決高度塌陷和外邊距重疊的問題。當你在遇到這些問題時，直接使用;
table既能解決外邊距重疊，又能解決高度塌陷；
.: :;
: :after{
:” ”';
: table;
clear: both;}
定位()
定位是種更加高級的布局手段
通過定位可以將元素擺放到頁面的任意位置
使用屬性來設置定位
可選值:
默認值，元素是靜止的沒有開啟定位
開啟元素的相對定位
開啟元素的絕對定位
fixed開啟元素的固定定位
開啟元素的粘滯定位
相對定位:
當元素的屬性值設置為時則開啟 了元素的相對定位
相對正位的特點
1.元素開啟相對定位以后，如果不設置偏移量元素不會發生任何的變化
2.相對定位是參照于元素在文檔流中的位置進行定位的
3.相對定位會提升元素的層級
4.相對定位不會使元素脫高文檔流
5.相對定位不改變元素的性質塊還是塊，行內元素還是行內元素
偏移量()
當元素開啟了定位以后，可以通過偏移量來設置元素的位置
top定位元素和定位位置上邊的距高
定位元素和定位位置下邊的距離
定位元素垂直方向的位置由top和兩個屬性來控制
通常情況下我們只會使用其中一個
top值越大，定位元素越向下移動
值越大，定位元素越向上移動
left定位元素和定位位置的左側距離
right 定位元素和定位位置的右側距離
定位元素水平方向的位置由left和right兩個屬性控制
通常情況下只會使用一個
left越大元素越靠右
right越大元素越靠左
絕對定位
當元素的posit ion屬性值設置為時，則開啟了元素的絕對定位
絕對定位的特點:
1.開啟絕對定位后，如果不設置偏移量元素的位置不會發生變化
2.開啟絕對定位后，元素會從文檔流中脫高
3.絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開
4.絕對定位會使元素提升一個層級
5.絕對定位元素是相對于其包含塊進行定位的
包含塊( block )
正常情況下:
包含塊就是離當前元素最近的祖先塊元素
絕對定位的包含塊:
包含塊就是離它最近的開啟了定位的祖先元素
如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊
Html (根元素.初始包含塊)
固定定位:
將元素的屬性設置為fixed則開啟了元素的固定定位
固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣
唯一不同的是固定定位永遠參照于瀏覽器的視口進行定位
固定定位的元素不會隨網頁的滾動條滾動
粘滯定位
當元素的屬性設置為時則開啟了元素的粘滯定位
粘滯定位和相對定位的特點基本一致，
不同的是粘滯定位可以在元素到達某個位置時將其固定
水平布局
left + -left + -left + -left + width + -right + -right + -right + right =包含塊的內容區的寬度