设计师学习HTML/CSS之路-11
不了解前端的UI不是好美工，以下是慕課網HTML+CSS基礎教程學習筆記，不廢話，Start!
第12章 CSS布局模型
11-1 元素分類
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常見的塊狀元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 復制代碼常見的內聯元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 復制代碼常見的內聯塊狀元素有： <img>、<input> 復制代碼11-2 元素分類-塊級元素
塊級元素的特點：
設置display:block就是將元素顯示為塊級元素。如將內聯元素轉換為塊級元素：
span{display:block;} 復制代碼 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>內聯塊狀元素</title> <style type="text/css"> div,p,h1{background:pink;} div{display:block;} </style> </head> <body> <div>div1</div> <div>div2</div> <p>段落1段落1段落1段落1段落1</p> <h1>asda </h1> </body> </html> 復制代碼11-3 元素分類-內聯元素
內聯元素（行內元素）inline
塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。
內聯元素特點：
11-4 元素分類-內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>內聯塊狀元素</title> <style type="text/css"> a{display:inline-block;width:60px;/*在默認情況下寬度不起作用*/height:20px;/*在默認情況下高度不起作用*/background:pink;/*設置背景顏色為粉色*/text-align:center; /*設置文本居中顯示*/ } </style> </head> <body> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </body> </html> 復制代碼11-6 盒模型-邊框（一）
盒子模型的邊框（border）就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色（邊框三個屬性）。
如：
p{border:2px dotted #ccc;} 復制代碼上面是 border 代碼的縮寫形式，可以分開寫：
p{border-width:2px;border-style:dotted;border-color:#ccc; } 復制代碼border-style常見樣式有： dashed（虛線）| dotted（點線）| solid（實線）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>邊框</title> <style type="text/css"> p{border:2px dotted #ccc;} </style> </head> <body><p>一個完整的調色板，應包含主色、輔助色和灰度色。主色一般選用App圖標使用的品牌色，輔助色是指主色的近似色和對比色。</p><p>方法：先確定主色的HSB，近似色一般在色環中+-30至50的H值，對比色一般+-180至200的H值。</p> </body> </html> 復制代碼11-7 盒模型-邊框（二）
css樣式中允許只為一個方向的邊框設置樣式：
div{border-bottom:1px solid red;} 復制代碼同樣可以使用下面代碼實現其它三邊(上、右、左)邊框的設置：
border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 復制代碼如:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>邊框</title> <style type="text/css"> li{border-bottom:1px dotted red;} </style> </head> <body> <ul><li>第一條內容</li><li>第二條內容</li><li>第三條內容</li> </ul> </body> </html> 復制代碼11-8 盒模型-寬度和高度
一個元素的實際寬度=左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
li{border-bottom:1px dotted #ccc;width:200px;height:30px; } 復制代碼上段代碼表示為列表設置寬度為200px，高為30px的下劃線
補充：li是塊狀元素，塊狀元素有一個特點之一：在不設置寬度的情況下，顯示為父容器的100%。
11-9 盒模型-填充
元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左（順時針）。如下代碼
div{padding:20px 10px 15px 30px;} 復制代碼相當于以下代碼：
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px; } 復制代碼如果上、右、下、左的填充都為10px;可以這么寫:
div{padding:10px;} 復制代碼如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;} 復制代碼 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{width:100px;height:100px;padding:10px;border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html> 復制代碼11-10 盒模型-邊界
元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;} 復制代碼也可以分開寫：
div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px; } 復制代碼如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;} 復制代碼如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;} 復制代碼總結一下：padding和margin的區別，padding在邊框里，margin在邊框外。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>邊距</title> <style type="text/css"> div{width:300px;height:300px;border:1px solid red; } #box1{margin:30px;} </style> </head> <body><div id="box1">box1</div><div id="box2">box2</div> </body> </html> 復制代碼 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的设计师学习HTML/CSS之路-11的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hadoop-eclipse-plugi
- 下一篇： Web浏览器端通过https 使用mqt