當時用一個标簽時，第一件事就是弄清楚它是塊級元素還是行内元素
-
塊級元素
塊級元素會擴充到父元素同寬，body的預設寬度和浏覽器視窗一樣寬。
這時候你應該了解為什麼塊級元素會始終占一行了，沒錯，那就是因為它們始終和浏覽器同寬，沒有空間再容納另一個元素了
-
行内元素
行内元素會收縮包裹其内容，并且盡可能包緊。
1.塊級元素
* address - 位址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄清單
* div - 常用塊級容易，也是css layout的主要标簽！！！
* dl - 定義清單
* fieldset - form控制組
* form - 互動表單
* h1 - 大标題
* h2 - 副标題
* h3 - 3級标題
* h4 - 4級标題
* h5 - 5級标題
* h6 - 6級标題
* hr - 水準分隔線
* isindex - input prompt
* menu - 菜單清單
* noframes - frames可選内容，（對于不支援frame的浏覽器顯示此區塊内容
* noscript - ）可選腳本内容（對于不支援script的浏覽器顯示此内容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序清單
2.行内元素
* a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字型
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候需要)
* dfn - 定義字段
* em - 強調
* font - 字型設定(不推薦)
* i - 斜體
* img - 圖檔
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格标簽
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字型文本
* span - 常用内聯容器，定義文本内區塊！！！
* strike - 中劃線
* strong - 粗體強調
* sub - 下标
* sup - 上标
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框</title>
<style>
body{border:px solid #000000;height: px;margin: px;}
/*設定width再設auto會自動居中*/
h4{width: px; margin: px auto; background-color: #2c71b3; border: px solid #23dd27; }
</style>
</head>
<body>
<h4>邊框調試</h4>
</body>
</html>
![css僞類與僞元素差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)