第12天续，CSS基础
目錄
一、css語法 二、css的四種引入方式2.1 行內式2.2 嵌入式2.3 鏈接式2.4 導入式三、css選擇器3.1 基本選擇器3.2 組合選擇器3.3 屬性選擇器四、css屬性操作4.1 文本屬性4.1.1 文本顏色：color4.1.2 水平對齊方式：text-align4.1.3 文本其它屬性4.2 背景屬性4.3 邊框屬性4.4 列表屬性4.5 display屬性none （隱藏某標簽）block （內聯標簽設置為塊級標簽）inline （塊級標簽設置為內聯標簽）inline-block4.6 外邊距（margin）和內邊距（padding）4.6.1 盒子模型4.6.1 margin（外邊距）4.6.2 padding（內邊距）4.6.3 實例4.6.4 思考4.7 float屬性4.7.1 基本浮動規則非完全脫離文檔流父級坍塌現象一、css語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {property: value;property: value;property: value...}例如：
h1 {color:red; font-size:14px;}
二、css的四種引入方式
2.1 行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
例：
<p style="background-color: rebeccapurple">hello yuan</p>2.2 嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
例：
2.3 鏈接式
將一個.css文件引入到HTML文件中
例：
2.4 導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，
<style type="text/css">@import"mystyle.css"; 此處要注意.css文件的路徑</style>注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。
使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
三、css選擇器
3.1 基本選擇器
3.2 組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 :div,p { color:#f00; }E F 后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝E > F 子元素選擇器，匹配所有E元素的子元素F :div > p { color:#f00; }E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F :div + p { color:#f00; } E ~ F 普通兄弟選擇器（以破折號分隔） :.div1 ~ p{font-size: 30px; }注意，關于標簽嵌套：
一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要注意的是，p標簽不能包含塊級標簽。
3.3 屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。比如“[cheacked]”。以下同。） p[title] { color:#f00; }E[att=val] 匹配所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素td[class~=”name”] { color:#f00; }E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}四、css屬性操作
4.1 文本屬性
4.1.1 文本顏色：color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
例：p { color: rebeccapurple; }
4.1.2 水平對齊方式：text-align
text-align 屬性規定元素中的文本的水平對齊方式。
- left 把文本排列到左邊。默認值：由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
例：h2 {text-align:center;}
4.1.3 文本其它屬性
font-size: 10px; 文本字體大小line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字體大小的百分比；將文本行高（line-height）的值設置的和框高(height)的值一樣時，就可以實現文本行在框內垂直居中的效果。vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效；text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線；font-family: 'Lucida Bright'font-weight: lighter/bold/border/font-style: obliquetext-indent: 150px; 首行縮進150px；letter-spacing: 10px; 字母間距；word-spacing: 20px; 單詞間距text-transform: capitalize/uppercase/lowercase ; 文本轉換，用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。4.2 背景屬性
- background-color: green; 背景色
- background-image:url('1.jpg'); 以圖片為背景
- background-repeat: repeat; 背景平鋪滿，no-repeat不平鋪滿，repeat-x水平鋪滿，repeat-y垂直鋪滿；
- background-position: right top; 背景定位，也可以用像素表示（100px 50px），第一個值表示水平方向，第二個值表示垂直方向；
以上四項也可以簡寫：
例：background:#ffffff url('1.png') no-repeat right top;
4.3 邊框屬性
- border-width: 2px; 邊框寬度
- border-style (required): solid; 邊框線的樣式，solid: 實線; dashed: 虛線；
- border-color: red; 邊框線的顏色；
以上三項也可以簡寫為一行：
例：border: 30px rebeccapurple solid;
邊框也可以單獨設置各邊的屬性：
border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:none;4.4 列表屬性
list-style-type 設置列表項標志的類型。 list-style-image 將圖象設置為列表項標志。 list-style-position 設置列表中列表項標志的位置。list-style 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中list-style-type屬性指定列表項標記的類型：
例：ul { list-style-type: square; }
使用圖像來替換列表項的標記:
例：ul { list-style-image: url('s.png'); }
4.5 display屬性
display屬性值有以下四個：
- none
- block
- inline
- inline-block
none （隱藏某標簽）
例：p{display:none;}
注意與visibility: hidden;的區別：
- visibility:hidden;可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
- display: none;可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
block （內聯標簽設置為塊級標簽）
例：span {display:block;}
注意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。
inline （塊級標簽設置為內聯標簽）
例：li {display:inline;}
inline-block
display:inline-block可做列表布局，其中的類似于圖片間的間隙小bug可以通過如下設置解決：
#outer{border: 3px dashed;word-spacing: -5px; }4.6 外邊距（margin）和內邊距（padding）
4.6.1 盒子模型
- margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用于控制內容與邊框之間的距離；
- border(邊框): 圍繞在內邊距和內容外的邊框。
- content(內容): 盒子的內容，顯示文本和圖像。
4.6.1 margin（外邊距）
盒子與盒子之間的距離
單邊外邊距屬性：
margin-top:100px; 頂部 margin-bottom:100px; 底部 margin-right:50px; 右邊 margin-left:50px; 左邊簡寫屬性：
margin:10px 20px 20px 10px；上邊距為10px右邊距為20px下邊距為20px左邊距為10pxmargin:10px 20px 10px;上邊距為10px左右邊距為20px下邊距為10pxmargin:10px 20px;上下邊距為10px左右邊距為20pxmargin:25px;所有的4個邊距都是25px居中應用
margin: 0 auto; 將盒子水平居于屏幕正中間，距離屏幕頂部為0像素；如果這里的0換成20px，則會將盒子向下移動20像素；
4.6.2 padding（內邊距）
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
設置同margine；
4.6.3 實例
頁碼實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.outer{margin: 0 auto;width: 80%;}.content{background-color: darkgrey;height: 500px;}a{text-decoration: none;}.page-area{text-align: center;padding-top: 30px;padding-bottom: 30px;background-color: #f0ad4e;}.page-area ul li{display: inline-block;}.page-area ul li a ,.page-area ul li span{display: inline-block;color: #369;height: 25px;width: 25px;text-align: center;line-height: 25px;padding: 8px;margin-left: 8px;border: 1px solid #e1e1e1;border-radius: 15%;}.page-area ul li .page-next{width: 70px;border-radius:0}.page-area ul li span.current_page{border: none;color: black;font-weight:900;}.page-area ul li a:hover{color: #fff;background-color: #2459a2;}</style> </head> <body> <div class="outer"><div class="content"></div><div class="page-area"><ul><li><span class="current_page">1</span></li><li><a href="#" class="page-a">2</a></li><li><a href="#" class="page-a">3</a></li><li><a href="#" class="page-a">4</a></li><li><a href="#" class="page-a">5</a></li><li><a href="#" class="page-a">6</a></li><li><a href="#" class="page-a">7</a></li><li><a href="#" class="page-a">8</a></li><li><a href="#" class="page-a">9</a></li><li><a href="#" class="page-a">10</a></li><li><a href="#" class="page-a page-next">下一頁</a></li></ul> </div> </div> </body> </html>代碼實現的效果如下圖：
4.6.4 思考
思考1: body的外邊距
邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：
body{border: 1px solid;background-color: cadetblue; }>>>解決方法：
body{margin: 0; }思考2：margin collapse（邊界塌陷或者說邊界重疊）
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值
2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然后按此div 進行margin；
如下代碼實現：
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0px;}.div1{background-color: rebeccapurple;width: 300px;height: 300px;overflow: hidden;}.div2{background-color: green;width: 100px;height: 100px;margin-bottom: 40px;margin-top: 20px;}.div3{background-color:teal;width: 100px;height: 100px;margin-top: 20px;}</style> </head> <body> <div style="background-color: bisque;width: 300px;height: 300px"></div><div class="div1"><div class="div2"></div><div class="div3"></div> </div></body></html>>>>解決方法：
overflow: hidden;
4.7 float屬性
4.7.1 基本浮動規則
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等。
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。
非完全脫離文檔流
左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象。
示例代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.r1{width: 100px;height: 100px;background-color: #7A77C8;float: left;}.r2{width: 200px;height: 200px;background-color: wheat;}</style> </head> <body><div class="r1"></div> <div class="r2">region2</div> </body> </html>>>>解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。
父級坍塌現象
示例代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <style type="text/css">* {margin:0;padding:0;}.container{border:1px solid red;width:300px;}#box1{background-color:green;float:left;width:100px;height:100px;}#box2{background-color:deeppink; float:right;width:100px;height:100px; }#box3{background-color:pink;height:40px;} </style> </head> <body><div class="container"><div id="box1">box1 向左浮動</div><div id="box2">box2 向右浮動</div></div><div id="box3">box3</div> </body> </body> </html>例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
>>>解決方法:
1. 固定高度
給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
或者給.container加一個固定高度的子div：
<div class="container"><div id="box1">box1 向左浮動</div><div id="box2">box2 向右浮動</div><div id="empty" style="height: 100px"></div> </div> <div id="box3">box3</div>但是這樣限定固定高度會使頁面操作不靈活，不推薦！
2. 清除浮動（推薦）
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.r1{width: 300px;height: 100px;background-color: #7A77C8;float: left;}.r2{width: 200px;height: 200px;background-color: wheat;float: left;clear: left;}.r3{width: 100px;height: 200px;background-color: darkgreen;float: left;}</style> </head> <body><div class="r1"></div> <div class="r2"></div> <div class="r3"></div></body> </html>把握住兩點：
1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。
思考：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.r1{width: 300px;height: 100px;background-color: #7A77C8;float: left;}.r2{width: 200px;height: 200px;background-color: wheat;float: left;clear: both;}.r3{width: 100px;height: 200px;background-color: darkgreen;float: left;}</style> </head> <body><div class="r1"></div> <div class="r2"></div> <div class="r3"></div></body> </html>解決父級塌陷：
'''.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。display: block; <----加入的這個元素轉換為塊級元素。clear: both; <----清除左右兩邊浮動。visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；line-height: 0; <----行高為0；height: 0; <----高度為0；font-size:0; <----字體大小為0；}.clearfix { *zoom:1;} <----這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。 之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。 <div class="head clearfix"></div>'''3. overflow: hidden;
overflow：hidden;的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
posted on 2017-07-22 12:25 銀靈子辰 閱讀(...) 評論(...) 編輯 收藏 刷新評論刷新頁面返回頂部 Copyright ?2019 銀靈子辰 Powered By: 博客園 模板提供：滬江博客《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的第12天续，CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： telnet命令的使用
- 下一篇： CSS权重的等级划分