html實踐——IFE task 02（盒子模型）

標籤：

1. 元素分類

在CSS中，html中的標籤元素大體被分為三種不同的類型：塊狀元素、內嵌元素(又叫行內元素)和內聯塊狀元素。

（1）常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

區塊層級元素特點：

• 每個區塊層級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個區塊層級元素獨佔一行）
• 元素的高度、寬度、行高以及頂和底邊距都可設定。
• 素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

  a{display:block;}可以將內嵌元素變成區塊層級元素

（2）常用的內嵌元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

內嵌元素特點：

• 和其他元素都在一行上；
• 元素的高度、寬度及頂部和底部邊距不可設定；
• 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

  a{display:inline;}可以將區塊層級元素變成內嵌元素

（3）常用的內聯塊狀元素有：

<img>、<input>

內聯塊狀（inline-block ）元素特點：

• 和其他元素都在一行上；
• 元素的高度、寬度、行高以及頂和底邊距都可設定。

2. 盒子模型概述

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。

3. CSS內邊距

元素的內邊距在邊框和內容區之間。控制該地區最簡單的屬性是 padding 屬性。

CSS padding 屬性定義元素邊框與元素內容之間的空白地區。

4. CSS邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

5. CSS外邊距

圍繞在元素邊框的空白地區是外邊距。設定外邊距會在元素外建立額外的“空白”。

設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

 【注意】

當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

html實踐——IFE task 02（盒子模型）