1踩萎、css基本語法
css的基本語法格式與python中的dict類型有點類似：{ 屬性:值; 屬性:值; 屬性:值;}十气。
div{
width:100px;
height:100px;
color:red
}
css頁面引入方式
1）外聯(lián)式：通過link標簽尿瞭，鏈接到外部樣式表到頁面中乾蛤。
<link rel="stylesheet" type="text/css" href="css/main.css">
2）嵌入式：通過style標簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表日缨。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
3）內(nèi)聯(lián)式：通過標簽的style屬性钱反，在標簽上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......</div>
以上三種方式的優(yōu)先級依照就近原則匣距，即內(nèi)聯(lián)式 > 嵌入式 > 外聯(lián)式面哥，但是這種優(yōu)先級順序有一個前提，即三者的權值相同墨礁。
2幢竹、css文本設置
常用的應用文本的css樣式：
color 設置文字的顏色耳峦，如： color:red;
font-size 設置文字的大小恩静，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜蹲坷，如：font-style:'normal'; 設置不傾斜驶乾，font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
line-height 設置文字的行高循签，設置行高相當于在每行文字的上下同時加間距级乐， 如：line-height:24px;[圖片上傳失敗...(image-55a7fa-1568943518100)]
font 同時設置文字的幾個屬性，寫的順序有兼容問題县匠，建議按照如下順序?qū)懀?font：是否加粗 字號/行高 字體风科；如： font:normal 12px/36px '微軟雅黑';
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進乞旦，如：text-indent:24px; 設置文字首行縮進24px[圖片上傳失敗...(image-4a0af5-1568943518100)]
text-align 設置文字水平對齊方式贼穆，如text-align:center 設置文字水平居中
3、css顏色表示
css顏色值主要有三種表示方法：
顏色名表示兰粉，比如：red 紅色故痊，gold 金色
rgb表示，比如：rgb(255,0,0)表示紅色
16進制數(shù)值表示玖姑，比如：#ff0000 表示紅色愕秫，這種可以簡寫成 #f00
4慨菱、css選擇器
1) 標簽選擇器
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->
2) id選擇器
通過id名來選擇元素，不能復用戴甩，id名一般給程序使用符喝，所以不推薦使用id作為選擇器。
#box{color:red}
<div id="box">....</div> <!-- 對應以上一條樣式甜孤，其它元素不允許應用此樣式 -->
3) 類選擇器
通過類名來選擇元素洲劣，是css中應用最多的一種選擇器。
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4) 層級選擇器
主要應用在選擇父元素下的子元素课蔬，或者子元素下面的子元素囱稽，可與標簽元素結合使用，減少命名二跋，同時也可以通過層級战惊，防止命名沖突。
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
5) 組選擇器
多個選擇器扎即，如果有同樣的樣式設置吞获，可以使用組選擇器。
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6) 偽類及偽元素選擇器
常用的偽類選擇器有hover谚鄙，表示鼠標懸浮在元素上時的狀態(tài)各拷，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內(nèi)容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
5闷营、css盒子模式
把元素叫做盒子烤黍，設置對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)傻盟、盒子的邊框(border)速蕊、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)娘赴。
設置寬高
width:200px; /* 設置盒子的寬度规哲，此寬度是指盒子內(nèi)容的寬度，不是盒子整體寬度(難點) */
height:200px; /* 設置盒子的高度诽表，此高度是指盒子內(nèi)容的高度唉锌，不是盒子整體高度(難點) */
設置邊框
設置一邊的邊框，比如頂部邊框竿奏，可以按如下設置：
border-top-color:red; /* 設置頂部邊框顏色為紅色 */
border-top-width:10px; /* 設置頂部邊框粗細為10px */
border-top-style:solid; /* 設置頂部邊框的線性為實線袄简，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊议双，換成'right'就是設置右邊痘番，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合并成一句：
border:10px solid red;
設置內(nèi)間距padding
設置盒子四邊的內(nèi)間距汞舱，可設置如下：
padding-top：20px; /* 設置頂部內(nèi)間距20px */
padding-left:30px; /* 設置左邊內(nèi)間距30px */
padding-right:40px; /* 設置右邊內(nèi)間距40px */
padding-bottom:50px; /* 設置底部內(nèi)間距50px */
上面的設置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向伍纫，分別設置的是 上 右 下 左
四個方向的內(nèi)邊距值。 */
padding后面還可以跟3個值昂芜，2個值和1個值莹规，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內(nèi)邊距為20px，左右內(nèi)邊距為40px泌神，底部內(nèi)邊距為50px */
padding：20px 40px; /* 設置上下內(nèi)邊距為20px良漱，左右內(nèi)邊距為40px*/
padding：20px; /* 設置四邊內(nèi)邊距為20px */
設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法欢际。
6母市、盒子模型的實際尺寸
以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真實尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
實際效果：
通過上面的頁面得出結論：盒子的width和height設置的是盒子內(nèi)容的寬和高，不是盒子本身的寬和高损趋，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
7患久、盒模型使用技巧及相關問題
margin相關技巧
1、設置元素水平居中： margin:x auto;
2浑槽、margin負值讓元素位移及邊框合并
外邊距合并
外邊距合并指的是蒋失，當兩個垂直外邊距相遇時，它們將形成一個外邊距桐玻。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者篙挽。解決方法如下：
1、使用這種特性
2镊靴、設置一邊的外邊距铣卡，一般設置margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候邑闲，內(nèi)部的盒子設置的margin-top會加到外邊的盒子上算行，導致內(nèi)部的盒子margin-top設置失敗，解決方法如下：
1苫耸、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3儡陨、使用偽元素類：
.clearfix:before{
content: '';
display:table;
}
8褪子、css元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式骗村，設置的方法是通過overflow屬性來設置嫌褪。
overflow的設置項：
1、visible 默認值胚股。內(nèi)容不會被修剪笼痛，會呈現(xiàn)在元素框之外。
2、hidden 內(nèi)容會被修剪缨伊，并且其余內(nèi)容是不可見的摘刑，此屬性還有清除浮動、清除margin-top塌陷的功能刻坊。
3枷恕、scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容谭胚。
4徐块、auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容灾而。
5胡控、inherit 規(guī)定應該從父元素繼承 overflow 屬性的值。
9旁趟、塊元素铜犬、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素
元素就是標簽轻庆，布局中常用的有三種標簽癣猾，塊元素、內(nèi)聯(lián)元素余爆、內(nèi)聯(lián)塊元素纷宇，了解這三種元素的特性，才能熟練的進行頁面布局蛾方。
塊元素
塊元素像捶，也可以稱為行元素，布局中常用的標簽如：div桩砰、p拓春、ul、li亚隅、h1~h6硼莽、dl、dt煮纵、dd等等都是塊元素懂鸵，它在布局中的行為：
- 支持全部的樣式
- 如果沒有設置寬度，默認的寬度為父級寬度100%
- 盒子占據(jù)一行行疏、即使設置了寬度
內(nèi)聯(lián)元素
內(nèi)聯(lián)元素匆光，也可以稱為行內(nèi)元素，布局中常用的標簽如：a酿联、span终息、em夺巩、b、strong周崭、i等等都是內(nèi)聯(lián)元素柳譬，它們在布局中的行為：
- 支持部分樣式（不支持寬、高休傍、margin上下征绎、padding上下）
- 寬高由內(nèi)容決定
- 盒子并在一行
- 代碼換行，盒子之間會產(chǎn)生間距
- 子元素是內(nèi)聯(lián)元素磨取，父元素可以用text-align屬性設置子元素水平對齊方式
解決內(nèi)聯(lián)元素間隙的方法
- 去掉內(nèi)聯(lián)元素之間的換行
- 將內(nèi)聯(lián)元素的父級設置font-size為0人柿，內(nèi)聯(lián)元素自身再設置font-size
內(nèi)聯(lián)塊元素
內(nèi)聯(lián)塊元素，也叫行內(nèi)塊元素忙厌，是新增的元素類型凫岖，現(xiàn)有元素沒有歸于此類別的，img和input元素的行為類似這種元素逢净，但是也歸類于內(nèi)聯(lián)元素哥放，我們可以用display屬性將塊元素或者內(nèi)聯(lián)元素轉化成這種元素。它們在布局中表現(xiàn)的行為：
- 支持全部樣式
- 如果沒有設置寬高爹土，寬高由內(nèi)容決定
- 盒子并在一行
- 代碼換行甥雕，盒子會產(chǎn)生間距
- 子元素是內(nèi)聯(lián)塊元素，父元素可以用text-align屬性設置子元素水平對齊方式胀茵。
這三種元素社露，可以通過display屬性來相互轉化，不過實際開發(fā)中琼娘，塊元素用得比較多峭弟，所以我們經(jīng)常把內(nèi)聯(lián)元素轉化為塊元素，少量轉化為內(nèi)聯(lián)塊脱拼，而要使用內(nèi)聯(lián)元素時瞒瘸，直接使用內(nèi)聯(lián)元素，而不用塊元素轉化了熄浓。
display屬性
display屬性是用來設置元素的類型及隱藏的情臭，常用的屬性有：
- none 元素隱藏且不占位置
- block 元素以塊元素顯示
- inline 元素以內(nèi)聯(lián)元素顯示
- inline-block 元素以內(nèi)聯(lián)塊元素顯示
10、元素定位
文檔流
文檔流玉组，是指盒子按照html標簽編寫的順序依次從上到下谎柄，從左到右排列，塊元素占一行惯雳，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列鸿摇，后寫的排在后面石景，每個盒子都占據(jù)自己的位置。
關于定位
我們可以使用css的position屬性來設置元素的定位類型，postion的設置項如下：
relative 生成相對定位元素潮孽，元素所占據(jù)的文檔流的位置保留揪荣，元素本身相對自身原位置進行偏移往史。
absolute 生成絕對定位元素，元素脫離文檔流椎例，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方订歪，相對于上一個設置了定位的父級元素來進行定位，如果找不到刷晋，則相對于body元素進行定位。
fixed 生成固定定位元素眼虱，元素脫離文檔流，不占據(jù)文檔流的位置捏悬，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位邮破。
static 默認值，沒有定位抒和，元素出現(xiàn)在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性摧莽。
inherit 從父元素繼承 position 屬性的值。
定位元素的偏移
定位的元素還需要用left镊辕、right油够、top或者bottom來設置相對于參照元素的偏移值。
定位元素層級
定位元素是浮動的正常的文檔流之上的征懈，可以用z-index屬性來設置元素的層級
.box01{
......
position:absolute; /* 設置了絕對定位 */
left:200px; /* 相對于參照元素左邊向右偏移200px */
top:100px; /* 相對于參照元素頂部向下偏移100px */
z-index:10 /* 將元素層級設置為10 */
}
定位元素特性
絕對定位和固定定位的塊元素和行內(nèi)元素會自動轉化為行內(nèi)塊元素石咬。
11、背景
屬性解釋
background屬性是css中應用比較多卖哎，且比較重要的一個屬性鬼悠，它是負責給盒子設置背景圖片和背景顏色的删性，background是一個復合屬性，它可以分解成如下幾個設置項：
- background-color 設置背景顏色
- background-image 設置背景圖片地址
- background-repeat 設置背景圖片如何重復平鋪
- background-position 設置背景圖片的位置
- background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動
實際應用中焕窝，我們可以用background屬性將上面所有的設置項放在一起蹬挺，而且也建議這么做，這樣做性能更高它掂，而且兼容性更好巴帮，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設置background-color虐秋；“url(bgimage.gif)”是設置background-image榕茧；“no-repeat”是設置background-repeat；“l(fā)eft center”是設置background-position熟妓；“fixed”是設置background-attachment雪猪，各個設置項用空格隔開，有的設置項不寫也是可以的起愈，它會使用默認值只恨。
例如：
1、“background:url(bg.jpg)”抬虽，默認設置一個圖片地址官觅，圖片會從盒子的左上角開始將盒子鋪滿。
2阐污、“background:cyan url(bg.jpg) repeat-x”休涤，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”笛辟。
3功氨、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子手幢，盒子其他部分顯示背景顏色“cyan”捷凄。
4、“background:cyan url(bg.jpg) no-repeat”围来，背景不重復，背景和盒子左上角對齊桶错，盒子其他部分顯示背景顏色“cyan”院刁。
5黎比、“background:cyan url(bg.jpg) no-repeat left center”鸳玩，背景不重復，背景和盒子左中對齊颓帝，盒子其他部分顯示背景顏色“cyan”购城。
6虐译、“background:cyan url(bg.jpg) no-repeat right center”漆诽，背景不重復厢拭，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊畦贸，盒子其他部分顯示背景顏色“cyan”薄坏。
除可以在水平方向設置“l(fā)eft”胶坠、“center”鼻忠、“right”帖蔓，在垂直方向設置“top”塑娇、“center”、“bottom”之外哨啃，還可以設置具體的數(shù)值，例如下面這幅圖：
就是通過設置：“background:url(location_bg.jpg) -110px -150px”來實現(xiàn)的审姓。其中魔吐，第一個數(shù)值表示背景圖相對于自己的左上角向左偏移110px酬姆，負值向左辞色，正值向右相满，第二個數(shù)值表示背景圖相對于自己的左上角向上偏移150px壶唤，負值向上闸盔，正值向下迎吵。
12、css權重
CSS權重指的是樣式的優(yōu)先級拢蛋，有兩條或多條樣式作用于一個元素谆棱，權重高的那條樣式對元素起作用,權重相同的垃瞧，后寫的樣式會覆蓋前面寫的樣式坪郭。
權重的等級
可以把樣式的應用方式分為幾個等級，按照等級來計算權重
1嫌松、!important萎羔，加在樣式屬性值后外驱，權重值為 10000
2腻窒、內(nèi)聯(lián)樣式儿子，如：style=””柔逼，權重值為1000
3愉适、ID選擇器癣漆，如：#content惠爽，權重值為100
4婚肆、類，偽類和屬性選擇器用僧，如： content责循、:hover 權重值為10
5沼死、標簽選擇器和偽元素選擇器崔赌，如：div、p县钥、:before 權重值為1
6若贮、通用選擇器（*）谴麦、子選擇器（>）、相鄰選擇器（+）舷蟀、同胞選擇器（~）野宜、權重值為0
示例
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">這是一個div元素</div>
<!--
兩條樣式同時作用一個div匈子，上面的樣式權重值為10000+1虎敦，下面的行間樣式的權重值為1000搁吓，
所以文字的最終顏色為red
-->
<style type="text/css">
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>這是一個h2標題</h2>
</div>
</div>
<!--
第一條樣式的權重計算： 100+1+10+1，結果為112堕仔；
第二條樣式的權重計算： 100+10+1擂橘，結果為111通贞；
h2標題的最終顏色為red
-->
以上就是本次記錄的css基本知識昌罩，其中關于css元素浮動的內(nèi)容沒有記錄茎用。另外關于html5和css3還有一些其他比較常用的基本知識點轨功，會在后續(xù)的文章中進行記錄。
