不了解前端的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 元素分類-塊級元素
塊級元素的特點：
- 每個快級元素都從新的一行開始，而且其他的元素也另起一行。（占滿一行）；
- 元素的高度、寬度、行高以及頂和底邊距都可以設置；
- 元素寬度在不設置的情況下，是他本身父容器的100%。(和父元素的寬度一致)
設置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將元素設置為內聯元素。
div{display:inline;}
復制代碼內聯元素特點：
- 和其他元素都在一行上；
- 元素的高度、寬度以及頂部底部邊距不可設置；
- 元素的寬度就是他包含的文字或圖片的寬度，不可改變。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行內元素標簽</title>
<style type="text/css">
a,span,em,p{background:pink;/*設置a、span、em標簽背景顏色都為粉色*/
}
p{display:inline;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span>33333</span>
<span>44444</span><em>555555</em>
<p>asldkj</p>
</body>
</html>
復制代碼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>
復制代碼
)
![linux 關閉登錄權限,linux – /var/www/html的權限[已關閉]](http://pic.xiahunao.cn/linux 關閉登錄權限,linux – /var/www/html的權限[已關閉])
...)
