css元素的分類以及盒子模型

html標籤元素的分類

1. 塊狀元素
   常見的塊狀元素有：<div> <p> <h1>...<h6> <ol> <ul> <table> <form> 等
2. 內聯元素（行內元素）
   常見的內聯元素有: <a> <span> <br> <i> <strong> <label>
3. 內聯塊狀元素
   常見的內聯塊狀元素有:<img> <input>
   ##各種元素分類的特點
   塊狀元素特點：
4. 每個塊級元素都是霸佔一行的，塊狀元素的下一個元素是從下一行開始
5. 元素的高度、寬度、行高以及頂和底邊距都是可設定的
6. 元素寬度在不設定的情況下，是它本身父容器的100%

內聯元素特點：

1. 和其他元素都在一行上
2. 元素的高度，寬度以及頂部和底部邊距不可設定
3. 元素的寬度就是它包含的文字或圖片的寬度，不可設定

內聯塊狀元素特點：

1. 和其他元素都在一行上
2. 元素的高度、寬度、行高以及底邊距都可設定

###改變標籤元素型別的方法
display:block 可以將元素設定為塊狀元素
display:inline 可以將元素設定為內聯元素
display:inline-block可以將元素設定為內聯塊狀元素

##盒子模型
每個HTML元素都會有盒子模型，如下圖
[圖片上傳失敗…(image-94792d-1543076431850)]
可以看到，盒子模型中，一個標籤是由內容，內填充（padding）、邊框（border）、外邊距（margin）組成的
一個元素的寬度=左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距
一個元素的高度=上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距
我的簡書部落格：https://www.jianshu.com/p/601c217b33e1