css學習
DIV+CSS
div
DIV是層疊樣式表(css)中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。 DIV元素是用來為HTML（標準通用標記語言下的一個應用）文件內大塊（block-level）的內容提供結構和背景的元素。
通俗來說：div在頁面佈局中，主要作為承載內容的容器！沒有任何的預設樣式，所有的外觀樣式都需要我們自己調整！
css就是用來表現HTML樣式的計算機語言，為html化妝！
css
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言(js)動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
css的引入方式
1.行間引入、行內樣式
在標籤的行間使用style標籤屬性來設定css樣式
弊端：
程式碼的複用性極差，程式碼可讀性也很差！
優勢：
優先順序高、除錯程式碼時比較方便！
css樣式屬性與標籤屬性的區別：
1、標籤屬性書寫的位置是在標籤行間，而css樣式屬性書寫的位置在特定的標籤屬性、標籤、檔案中！
2、標籤屬性的語法格式：標籤屬性名="值" 標籤屬性名="值"
css樣式屬性：css屬性名: 值; css屬性名: 值;
2.內部引入、內聯樣式
在head標籤內部，使用style標籤，配合選擇器為標籤設定css樣式
弊端：
沒有從本質上實現樣式與結構的分離
選擇器：css選取標籤的一種機制，不同的選擇器選擇標籤的機制是不一樣的，通過選擇器找到匹配的標籤後，才能設定css樣式
選擇器的書寫格式：
選擇器名稱 {
css屬性名: 值;
css屬性名: 值;
...
}
3. 外部引入、外聯樣式
外部的css檔案
1、首先我們需要單獨建立一個css檔案，在檔案中使用選擇器找到對應的標籤，來設定樣式
2、在html檔案內部的head標籤內，使用link標籤，來匯入外界的css檔案
注意事項：
1、在一個html檔案內部，可以使用多次link標籤，來引入多個外界的css檔案！
2、如果引入的多個檔案中，存在重複的樣式而且是使用同樣的選擇器來設定的，按照載入順序後覆蓋前！
選擇器
1.什麼是選擇器？
css選取標籤的一種機制，不同的選擇器選擇標籤的機制是不一樣的，通過選擇器找到匹配的標籤後，才能設定css樣式
常用的選擇器有三個：標籤、id、類class選擇器
標籤選擇器：
語法格式：標籤名 {css樣式集合}
選取原則：為這一類標籤設定樣式
2.id選擇器
語法格式：#id名稱 {css樣式集合}
選取原則：為添加了此id的標籤設定樣式，可以選擇唯一的一個標籤！
注意事項：
(1)在一個html檔案中，標籤的id名稱是不能重複的，是唯一的！
(2為標籤設定id值，需要在標籤行間使用id行間屬性來賦值
(3)id名稱切勿隨意命名，遵循變數名的命名規範即可！最好見名知意！
類class選擇器：
語法格式：.類名 {css樣式集合}
選取原則：為添加了此類名的標籤設定樣式，可以同時為多個標籤設定樣式！
注意事項：
(1)類名的命名規範與id名稱的命名規範一致！
(2)一個標籤可以新增多個類名，多個類名在class標籤屬性中以空格隔開
(3)一個類也可以新增給多個標籤
css樣式衝突問題
如果有一天你書寫的樣式出不來，原因是什麼？
1、寫錯了~
2、樣式被覆蓋了！
樣式覆蓋產生的原因有兩種：
1、相同型別的選擇器選擇到了同一個標籤，設定了同樣的樣式，按照文件載入順序後覆蓋前！
2、不同型別的選擇器選擇到了同一個標籤，設定了同樣的樣式，此時與載入順序無關，只與選擇器優先順序相關！
標籤 < 類class < id
常見的css樣式
文字樣式
常用樣式：
color：字型顏色
英文單詞、十六進位制程式碼、rgb(0~255，0~255, 0~255)
font-size：字型大小
font-weight：字型加粗效果
bold值，可以實現字型加粗效果
font-style：字型樣式
italic值，可以實現字型傾斜
font-family：字型，想要呈現不同的字型，首先你得保證瀏覽器內能有識別的字型庫！
text-decoration：文字修飾
underline下劃線、overline上劃線、line-througn刪除線、none無修飾
text-align：文字橫向的對齊方式
預設值left左對齊、center居中對齊、right右對齊
letter-spacing：字元間距
line-height: 行高
單行文字行高與容器高度一致，可以實現垂直居中
多行文字行高的設定會影響行與行之間的距離，為了確保行間距產生，那麼行高的值要大於字型大小
超連結偽類樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超連結偽類樣式/偽類選擇器</title> <style type="text/css"> a { font-size: 30px; } /*未被訪問*/ a:link { text-decoration: none; color: blue; } /*被訪問過*/ a:visited { color: green; } /*滑鼠懸停*/ a:hover { text-decoration: underline; color: red; } /*正在訪問、正在點選*/ a:active { color: pink; } </style> </head> <body> <a href="#">百度</a> </body> </html>
如果想要讓a標籤的四個偽類樣式都起作用，那麼必須按照lvha的順序來設定！一旦順序改變，則不起作用！
盒模型
盒模型，也稱為盒子模型，內容包含了：外邊距margin、邊框border、內邊距padding、內容content！
一個元素的顯示範圍不僅僅是我們對其設定的width寬度以及height高度！
橫向寬度：內容寬度 + 左側、右側邊框寬度 + 左側、右側內填充(padding)的距離
縱向高度：內容高度 + 上側、下側邊框寬度 + 上側、下側內填充(padding)的距離
一個元素的作用範圍是：
橫向寬度：內容寬度 + 左側、右側邊框寬度 + 左側、右側內填充(padding)的距離 + 左側、右側外邊距(margin)的距離
縱向高度：內容高度 + 上側、下側邊框寬度 + 上側、下側內填充(padding)的距離 + 上側、下側外邊距(margin)的距離
外邊距margin：
(1)四個方向，分別是margin-left、margin-right、margin-top、margin-bottom
(2)一個複合屬性margin
一個值 上下左右
兩個值 上下 左右
三個值 上 左右 下
四個值 上 右 下 左
(3)、在給定的外邊距區域內，不能存在任何內容，所以會讓元素本身發生偏移！
(4)、margin的衝突問題
如果縱向產生了衝突，取大作為兩者之間的距離
如果橫向產生了衝突，取和作為兩者之間的距離
(5)、外邊距的距離問題：
如果是同級，則為邊框外的側到邊框外側距離
如果是父子級，是子級邊框外側到父級邊框內側的距離
內邊距：
一個元素設定內邊距，代表其內側區域不能存在任何內容，所以也可以實現子級元素的位置偏移，但是要注意，一個元素設定了內填充，它的範圍會變大，所以我們應當在width及height上減去內填充的距離，以保持原樣！
浮動
浮動的知識點：
(1)float的值可以是left或者right，表示從父級的左側、右側開始橫向排列，如果空間不夠了，自動換行，這就是浮動帶來的佈局效果！
(2)浮動元素會脫離標準的文件流，不再佔據空間，所以如果不對其進行處理，會對沒有浮動效果的正常佈局產生影響，所以我們要清浮動！
清浮動的解決方案：
在浮動元素同級以下，設定一個空的div，併為這個div設定一個clear屬性。
both左右浮動都清除、left只清除左浮動、right只清除右浮動！
清浮動就是將浮動元素，按下去，回到標準的文件流中！
定位
HTML預設的佈局方式是不會出現重複的元素的，就是說在一個位置上不可能出現重複的元素。但是在某些情況下需要改變元素的位置和顯示效果，此時我們就需要用到定位技術！
定位的css屬性為position：
static：預設值，表示是普通的流式佈局，完全在文件中按照從上往下、從左往右顯示
定位之後，是要做位置的偏移的！只有設定了定位屬性之後，才能使用left、right、top、bottom讓一個元素髮生位置的改變！
relative：相對定位。偏移參照物為該元素原有的位置，而且發生偏移後，元素原先的位置依舊存在，不會影響其他元素的佈局！
left正值往右、right正值往左、top正值往下、bottom正值往上！
absolute：絕對定位。偏移參照物為離其最近的一個設定了定位屬性的父級元素！如果都沒有設定定位屬性，則以body元素為參照進行偏移！而且元素會完全脫離文件流，原有的空間也不復存在了！
left正值，從參照元素的左側邊框往右偏移
right正值，從參照元素的右側邊框往左偏移
top正值，從參照元素的上邊框往下偏移
bottom正值，從參照元素的下邊框往上偏移