知識點二、標簽的轉換：display：block的作用。在網頁制作的過程中，我們可以根據實際情況，利用一些屬性把行級標簽和塊級標簽相互轉換使用。其中，display：block就可以把一個行級標簽，轉換為塊級標簽，使該標簽擁有長寬等屬性。通常我個人習慣在制作導航欄的時候，利用display：block把 a 標簽轉換為一個塊級標簽，然后賦予長寬。下面的案例還會說一下display里面的一些常用屬性。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{width: 200px;height: 200px;background: red;}
span{display: block;width: 200px;height: 200px;background: green}
/*
display:block：具有寬高，并且換行
display:inline-block：具有寬高，但不會換行
display:inline：不吸收寬高又不會換行
*/
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
知識點三、內邊距：padding。元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。padding 屬性定義元素邊框與元素內容之間的空白區域。padding 屬性接受長度值或百分比值，但不允許使用負值。
如果您希望所有 p 元素的各邊都有 10 像素的內邊距，只需要這樣：p {padding: 10px;}
還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：p {padding: 10px 0.25em 2ex 20%;}
也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：padding-top、padding-right、padding-bottom、padding-left。
前面提到過，可以為元素的內邊距設置百分數值。百分數值是相對于其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。
下面這條規則把段落的內邊距設置為父元素 width 的 10%：
p {padding: 10%;}
例如：如果一個段落的父元素是 div 元素，那么它的內邊距要根據 div 的 width 計算。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對于父元素寬度設置，而不是相對于高度。
padding和margin的區別：當盒子沒有寬高的時候，padding可以疊加到盒子的寬高中，而margin不行，除非有內容。盒子真正的寬度=本身的寬度+左邊距+右邊距+左邊框+右邊框;盒子真正的高度=本身的高度+左邊距+右邊距+左邊框+右邊框;
新聞熱點
疑難解答
