CSS實例 display display 邊距
阿新 • • 發佈：2017-08-23
字體顏色 div css樣式 cnblogs doctype img 堆疊 設置 add 
1 CSS學習大綱 2 在標簽上設置style屬性： 3 background-color:#2459a2 ; 4 height:48px ; 5 編寫CSS樣式： 6 1.標簽的style屬性 7 2.寫在head裏面，style標簽中寫樣式 8 ID選擇器 9 #i1{ 10 background-color:2459a2 ; 11 height:48px ;CSS學習大綱312 } 13 class選擇器 ***** 14 .c1{ 15 background - color: 2459a2 ; 16 height: 48px ; 17 } 18 <標簽 class=‘名字‘> </標簽> 19 標簽選擇器 20 div{ 21 background - color: 2459a2;22 height: 48px ; 23 } 24 所有的div都使用這個樣式 25 層級選擇器（空格） ***** 26 .c1 .c2 div{ 27 background - color: 2459a2; 28 height: 48px; 29 } 30 組合選擇器（逗號） *****31 #i1,.c1,div{ 32 } 33 屬性選擇器 ***** 34 對選擇到到標簽再通過屬性再進行一次篩選 35 .c1[n=‘alex‘]{width:100px ;height:200px;} 36 PS: 37 優先級，標簽上style優先，編寫順序，就近原則 38 2.5 css樣式也可以寫再單獨的文件中 39 <link rel="stylesheet" href="commons.css"/> 40 41 3、多行註釋 42 /* 43 ...內容... 44 */ 45 46 47 4、邊框 48 寬度，樣式，顏色 （border: 4px dotted red） 49 border-left 50 5、 51 height, 高度 百分比 52 width, 寬度 像素，百分比 53 text-align:ceter, 水平方向居中 54 line_height, 垂直方向根據標簽高度 55 color 字體顏色 56 font-size 字體大小 57 font-weight 字體加粗 58 59 6、float 飄 60 讓標簽浪起來，塊級標簽也可以堆疊 61 老子管不住DIV最後加： 62 <div style="clear: both;"></div> 63 64 7、display 塊級標簽和行內標簽屬性轉換 65 display:none;讓標簽消失 66 display: inline轉換成行內標簽 67 display: block轉換成塊級標簽 68 display:inline-block 具有inline，默認自己有多少占多少，也可以block設置高度，寬度 69 70 <span>行內標簽：無法設置高度，寬度，padding , margin 71 <div>塊級標簽：可以設置高度，寬度，padding , margin 72 73 8、padding , margin(0,aito) 74 邊距 75 margin 外邊距 76 padding 內邊距
1 <!DOCTYPE html> 2 <!--CSS實例1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .pg-header{ 9 height:38px; 10 background-color: #dddddd; 11 line-height: 38px; 12 } 13 </style> 14 15 </head> 16 <body style="margin: 0 auto;"> 17 <div class="pg-header"> 18 <div style="float: left;"> 19 收藏本站 20 </div> 21 <div style="float: right;"> 22 <a>登錄</a> 23 <a>註冊</a> 24 </div> 25 </div> 26 <div style="width: 300px;border: 1px solid red;"> 27 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 28 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 29 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 30 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 31 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 32 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 33 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 34 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 35 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 36 <div style="clear: both;"></div> 37 </div> 38 </div> 39 40 </body> 41 </html>CSS實例1
1 <!DOCTYPE html> 2 <!--CSS實例2--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .pg-header{ 9 height:38px; 10 background-color: #dddddd; 11 line-height: 38px; 12 } 13 </style> 14 15 </head> 16 <body style="margin: 0 ;"> 17 <div class="pg-header"> 18 <div style="width: 980px;margin: 0 auto;"> 19 <div style="float: left;"> 20 收藏本站 21 </div> 22 <div style="float: right;"> 23 <a>登錄</a> 24 <a>註冊</a> 25 </div> 26 <div style="clear: both;"></div> 27 </div> 28 </div> 29 <div> 30 <div style="width: 980px;margin: 0 auto;"> 31 <div style="float: left"> 32 logo 33 </div> 34 <div style="float: right"> 35 <div style="height: 50px;width: 100px;background-color: #dddddd"> </div> 36 </div> 37 <div style="clear: both;"></div> 38 </div> 39 </div> 40 41 <div style="width: 300px;border: 1px solid red;"> 42 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 43 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 44 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 45 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 46 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 47 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 48 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 49 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 50 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div> 51 <div style="clear: both;"></div> 52 </div> 53 </div> 54 55 56 57 </body> 58 </html>CSS實例2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 30%;background-color:red;float: left;"> 9 style="width: 30%;background-color:red;float: left 10 </div> 11 <div style="width: 50%;background-color:green;float: left;"> 12 style="width: 50%;background-color:red;float: left;" 13 </div> 14 </body> 15 </html>display
1 <!DOCTYPE html> 2 <!--CSS中display的應用--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style="background-color: red;display: inline;">display: inline轉換成行內標簽</div> 10 <span style="background-color: red;display: none">display:none 讓標簽消失</span> 11 <span style="background-color: red;display: block">display: block轉換成塊級標簽</span> 12 <br/> 13 <br/> 14 <br/> 15 <span style="background-color: red;height: 100px;width: 90px">行內標簽測試</span> 16 <span style="display: inline-block;background-color: red;height: 100px;width: 90px">行內標簽雙屬性測試</span> 17 <br/> 18 <br/> 19 <br/> 20 <div style="background-color: red;height: 100px;width: 90px">塊級標簽測試</div> 21 <br/> 22 <br/> 23 <br/> 24 <a style="background-color: red;">A標簽測試</a> 25 </body> 26 </html>CSS中display的應用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <br/> 9 <br/> 10 <br/> 11 <div style="border: 5px solid red;height: 100px;"> 12 <div style="background-color: green;height: 50px;margin-top: 10px;"> margin外邊距 </div> 13 </div> 14 <br/> 15 <br/> 16 <br/> 17 <div style="border: 5px solid red;height: 100px;"> 18 <div style="background-color: green;height: 50px;padding-top: 10px;"> padding內邊距 </div> 19 </div> 20 </body> 21 </html>CSS邊距
CSS實例 display display 邊距