標籤：pac png more 空白 字型樣式 memory ica ref html
CSS屬性操作
CSS文本
文本顏色
<head> <style> p{ /*color:#8B5742 ;色碼錶*/ color: RGBA(255,0,0,0.5); /*調色，紅綠藍透明度*/ /*color: blue;顏色名*/ } </style></head><body> <p>i am p</p></body>
水平對齊：text-align 屬性規定元素中的文本的水平對齊
<head> <style> div{ /*background-color: wheat;*/ /*width: 100%;*/ /*height: 300px;*/ /*line-height: 300px;*/ text-align: center; /*置中顯示*/ /*text-align: left;居左顯示*/ /*text-align: right;居右顯示*/ /*text-align:justify;左右對齊*/ } </style></head><body> <div>Everyone has their own dreams, I am the same. But my dream is not a lawyer, not a doctor, not actors, not even an industry. Perhaps my dream big people will find it ridiculous, but this has been my pursuit! My dream is to want to have a folk life! I want it to become a beautiful painting, it is not only sharp colors, but also the colors are bleak, I do not rule out the painting is part of the black, but I will treasure these bleak colors! Not yet, how about, a colorful painting, if not bleak, add color, how can it more prominent American? Life is like painting, painting the bright red color represents life beautiful happy moments. Painting a bleak color represents life difficult, unpleasant time. You may find a flat with a beautiful road is not very good yet, but I do not think it will. If a person lives flat then what is the point? Life is only a short few decades, I want it to go Finally, Each memory is a solid.</div></body>
文本其他屬性
<!--font-size: 10px; 字型大小--><!--line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白地區的高度 50%:基於字型大小的百分比，底線基準中線頂線概念--><!--vertical-align:－4px 設定元素內容的垂直對齊 ,只對行內元素有效，對區塊層級元素無效--><!--text-decoration:none text-decoration 屬性用來設定或刪除文本的裝飾。主要是用來刪除連結的底線--><!--font-family: ‘Lucida Bright‘ 字型--><!--font-weight: lighter/bold/border/ 字型寬度--><!--font-style: oblique 字型樣式斜體--><!--text-indent: 150px; 首行縮排150px--><!--letter-spacing: 10px; 字母間距--><!--word-spacing: 20px; 單詞間距--><!--text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫-->
背景屬性
<head> <style> .c1{ border: 1px solid red; /*邊框：1像素、實線、紅色*/ /*background-color: plum; 背景色*/ width: 100%; height: 600px; background-image: url("http://dig.chouti.com//images/logo.png"); /*背景圖片*/ background-repeat: no-repeat; /*平鋪方式，預設橫向縱向同時鋪*/ background-position:center center; /*對齊，置中。right top（20px 20px）*/ /*background: url("http://dig.chouti.com//images/logo.png") no-repeat center center; 簡寫方式*/ } </style></head><body> <div class="c1"></div></body>
邊框屬性
<head> <style> .c1{ width: 100px; height: 200px; /*border-style: dashed; 類型*/ /*border-color: red; 紅色*/ /*border-width: 5px; 寬度*/ /*border:3px dashed red; 簡寫方式：寬度、類型、顏色*/ border-right: 3px dashed red; /*單獨的方向*/ /*border-top-style:dotted;*/ /*border-right-style:solid;*/ /*border-bottom-style:dotted;*/ /*border-left-style:none;*/ } </style></head><body> <div class="c1"></div></body>
列表屬性
<head> <style> ul{ /*list-style-type: square; 清單項目標誌類型*/ /*list-style-image: url("a.jpg"); 將映像設定為清單項目標誌*/ /*list-style-position：inside; !*預設outside，設定列表中清單項目標誌的位置。*!*/ list-style: none; /*簡寫屬性，設定為空白*/ } </style></head><body><ul> <li>1111</li> <li>2222</li> <li>3333</li></ul></body>
外邊距和內邊距
盒子模型
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和映像。
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;置中
padding屬性
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
設定同margine；
<!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>頁碼執行個體
思考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>View Code
>>>> 解決方案：
overflow: hidden;
CSS基礎-DAY2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
