CSS知識點總結
一．什么是css？
CSS（Cascading Style Sheets）層疊樣式表，專注于頁面的表現(xiàn)層。
二．CSS引入方式
1.行內樣式
在開始標簽上加style=”樣式屬性名1:樣式屬性值1;樣式屬性名2:樣式屬性值2;...”
2.內嵌式
把所有的css樣式都寫在<style></style>標簽內，<style></style>放在head標簽內
3.外鏈式
把所有的css樣式均放在一個css單獨的文件里（后綴名xx.css）,在html里通過<link? rel="stylesheet"?? href="css的文件路徑" />來引入外部的css
優(yōu)先級：
行內最大，其次 誰離標簽近，誰的優(yōu)先級高（最晚優(yōu)先級最高）
三．選擇器
1.統(tǒng)配符選擇器 選擇所有的元素????????? 權重: 0.5
*{}
2.標簽選擇器????????? 權重: 1
?標簽名{}
3.類選擇器????????? 權重:10
?.類值{}
拓展： 選擇器.類值{} div.box{} 類叫box的div元素
4.id選擇器?????? 權重:100
#id值{}
5.包含選擇器（后代選擇器）? ?權重相加
選擇器a?? 選擇器b{}? ?選擇器a里的所有選擇器b?? 選擇器b只要被選擇器a包著
?例：.box div{}??? 表示類box里的所有div元素
擴展：選擇器直接子元素
?選擇器a>選擇器b{}??? 選擇器a里的所有直接選擇器b?? 父子關系
例：?.box>span{}???? 表示類box里的所有直接子元素span
6.分組選擇器
選擇器1,選擇器2,....{}
選擇器權重：
行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器
四．字體樣式
1. font-family???????????????? 字體系列
例如：font-famiy:”宋體”,”微軟雅黑”,...
2.font-size??????????????????? 字體大小
3.font-style?????????????????? 字體風格
值：1）normal???????????? 默認 不傾斜
?????? 2）italic???????????????? 斜體
??????3）oblique???????????? 傾斜
4.font-weight???????????? 字體粗細
值：1）bold?????????????? 粗體
?????? 2）bolder?????????? 更粗體
??????3）lighter??????????? 細體
????? 4）100-900??????? 數(shù)值越大，字體越粗
5.line-height???????? ? 行高
值：1）數(shù)值+單位
?????? 2）數(shù)值????????? 字體的倍數(shù)
縮寫：
?font : font-style值? ?font-weight值?? font-size值/line-height值? ?font-family值
五．文本樣式
1. text-decoration?????????? 文本修飾
值：1）none????????????????? 無修飾
?????? 2）underline?????????? 下劃線
??????3）line-through?????? 中劃線
??????4）overline???????????? 上劃線
2. text-align??????? 文本對齊方式
值：1）left???????? 默認??? 左對齊
?????? 2）center??? 居中對齊
?????? 3）right??????? 右對齊
?????? 4）justify????? 兩端對齊
3.text-indent 文本縮進
值：數(shù)值+單位（px或em）????? 為正數(shù)時，縮進；為負數(shù)時，懸掛
4.text-transform??????????? 文本大小寫轉換
值：1）uppercase???????? 全大寫
?????? 2）lowercase?????????? 全小寫
?????? 3）capitalize???????????? 首字母大寫
5.text-overflow?????????????? 文本溢出處理
值：1）ellipsis????????????? 文本溢出以省略號顯示
?????? 2）.....
文本溢出以省略號顯示
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;??? 強制不換行
6.letter-spacing??????????? 字母與字母之間的距離 漢字與漢字之間的距離
7.word-spacing??????????? 單詞與單詞之間的距離
8.overflow?????????????? 內容溢出處理
值：1）visible????????? ? 溢出部分可見
2）hidden????? ??????????? 溢出部分隱藏
3）scroll????????????????? ? 溢出部分以滾動條形式顯示
4）auto????????? ??????????? 溢出部分瀏覽器自動處理
六．盒子模型
1.border?? ?邊框
border-width?? ?邊框的寬度
border-color???? 邊框的顏色
border-style????? 邊框的樣式
值：1）solid 實線
???????2）double 雙實線
?????? 3）dotted 點狀線
???????4）dashed 虛線
??????? ?....
縮寫:
border : border-width值?? border-style值?? border-color值;
border-top??? 上邊框
?border-bottom??? 下邊框
?border-left?????? 左邊框
?border-right????? 右邊框
2.padding?? 內邊距?? 內補丁? ?內填充
padding-top??? 上內邊距
?padding-bottom??? ?下內邊距
padding-left??????? ?左內邊距
padding-right??????? 右內邊距
縮寫：
?padding:值;??????????? 上下左右的內邊距一樣
?padding:值1 值2;?????????? 值1代表上下內邊距，值2代表左右內邊距
?padding:值1 值2 值3;???????????? 值1代表上內邊距，值2代表左右內邊距，值3代表下內邊距
padding:值1 值2 值3 值4;???????????? ?值1代表上內邊距，值2代表右內邊距，值3代表下內邊距，值4 代表左內邊距，按照順時針方向。
3.margin??? ?外邊距
?margin-top???? 上外邊距
margin-bottom????? 下外邊距
margin-left?????? 左外邊距
?margin-right??????????? 右外邊距
縮寫：
?margin:?????????????????? 同padding
?margin:0 auto;?????????????? 塊級元素居中顯示
?4.background??????? 背景
?1）background-color????? 背景顏色
?2）background-image??????? 背景圖片
????????? 值：url(“圖片的路徑”)
3）background-repeat 背景圖片是否平鋪
?????????? 值：a）repeat 默認 水平、垂直都平鋪
????????????????? b）no-repeat 水平、垂直都不平鋪
??????????????????c）repeat-x 水平平鋪
???????????????? ?d）repeat-y 垂直平鋪
4）background-position????????? 背景圖片的位置
?語法： x軸坐標????y軸坐標
?值：a）表示位置的英文單詞??????????? ?例如：left center right top bottom
??????? b）百分比
????????c）數(shù)字+單位
5）background-size??????????? ?背景圖片的大小
?語法：背景圖片的寬度??? 背景圖片的高度
?值：a）百分比?????? （盒子的百分比）
?b）數(shù)字+單位
?c）cover???????? ?背景圖片等比例的擴展至足夠大，以使它鋪滿整個區(qū)域，可能會引起圖片裁剪。
?d）contain??????????背景圖片等比例地擴展至足夠大，以使它的寬度或高度適應內容區(qū)域，可能會使區(qū)域留白。
?6）background-origin??????????? 背景圖片開始渲染的位置
值：a）padding-box?????????? 默認???????? 從左上角內邊距的位置開始渲染
b）content-box?????????????? 從內容區(qū)域左上角開始渲染
c）border-box???????????????? 從左上角邊框區(qū)域開始渲染
?7）background-attachment??????????????? 背景圖片是否固定
?值：1）scroll????????? 默認???????? 圖片隨頁面其余部分滾動而滾動
?2）fixed??????????? ?圖片固定不動
縮寫：
?background : 背景顏色? ?背景圖片?? 背景是否平鋪? ?背景位置/背景大小? ?背景渲染位置?? 背景是否固定;
七．浮動
?float 浮動
值： 1)none??? 默認??? 不浮動
?2)left????????? ?左浮動
?3)right????????? 右浮動
?清除浮動：
?1）給有浮動的子元素的父元素加height
?2）給有浮動的子元素的父元素加overflow:hidden
3）給所有有浮動的元素最后增加一個空元素，給該空元素加樣式clear:left / right / both
?clear:left???????????? ?清除左浮動
clear :right?????????????? 清除右浮動
?clear:both???????????????? 清除左右浮動
clear:none?????????? 不清除浮動
4）給有浮動的子元素的父元素增加偽元素，在偽元素里增加樣式：
::after{
????????display:block;
????????content:"";
????????clear:both;
????????}
八．定位
?position????? 定位
?值： 1）static??????????? 默認????????? 不定位
2）relative????????????? 相對定位?????????? 相對于自己原來正常文檔流的位置定位
3）absolute????????? ?絕對定位
?????? a）有絕對定位元素的包含框無定位，該元素相對于瀏覽器定位
???????b）有絕對定位元素的包含框有定位，該元素相對于離自己最近的有定位的包含框定位
4）fixed??????????????? 固定定位???????? 始終相對于瀏覽器定位
借助left、right、top、bottom這四個值改變元素位置
?z-index?????????? 值：數(shù)字??????????? z軸的排列順序?????????????? z-index值越大越在最上層
其他：
?偽類
?:link?????????? 未訪問的狀態(tài)
?:visited?????????? 訪問后的狀態(tài)
?:hover???????? 鼠標懸停時的狀態(tài)
?:active???????? 鼠標激活時的狀態(tài)
?LoVe HAte?? 愛恨原則
元素的相互轉換
其他元素轉換為塊級元素????????? display:block
其他元素轉換為行內元素???????? ?display:inline （內邊距都能設置 外邊距只能設置左右的外邊距）
?其他元素轉換為行內塊級元素?????????? ?display:inline-block
任何元素隱藏?????????? display:none
?CSS書寫順序
?1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
?4.背景(background, border等)
?5.其他(animation, transition等)
