前言
我們知道HTML元素可以分為兩類：
塊級(jí)元素
內(nèi)聯(lián)元素（或稱之為行內(nèi)元素）
區(qū)別如下：
| 元素分類 | 是否默認(rèn)獨(dú)占一行 | 設(shè)置寬高是否有效 |
|---|---|---|
| 塊級(jí)元素 | 是 | 是 |
| 內(nèi)聯(lián)元素 | 否 | 否 |
總結(jié)一下就是
塊級(jí)元素會(huì)默認(rèn)獨(dú)占一行，而內(nèi)聯(lián)元素們會(huì)在一行顯示
塊級(jí)元素可以可以設(shè)置width，height屬性，而內(nèi)聯(lián)元素設(shè)置寬高屬性無(wú)效
塊級(jí)元素默認(rèn)的width會(huì)撐滿父元素的width，這就是所謂的水流的概念，而行內(nèi)元素的width則由其自身內(nèi)容或其子元素的寬度決定的
而塊級(jí)元素常用的有div，p標(biāo)簽，內(nèi)聯(lián)元素有span，a，img等
以上就是HTML關(guān)于元素分類的描述，下面會(huì)用實(shí)例來(lái)展示這兩種元素針對(duì)width，height的特點(diǎn)
實(shí)例展示
各自默認(rèn)頁(yè)面呈現(xiàn)
- 定義index.html文件
- 打開瀏覽器，調(diào)試模式下
這里可以看到，小P元素是獨(dú)占頁(yè)面一整行的，并且其width寬度撐滿整個(gè)父元素的寬度為1350，而內(nèi)聯(lián)元素小S的寬度僅為500.17，且其右下角的盒模型體現(xiàn)出來(lái)的width為auto，即表示其內(nèi)容有多少，其內(nèi)聯(lián)元素的width就是多少
- 此時(shí)在小S的下面再添加一個(gè)行內(nèi)元素小S2，看下其在頁(yè)面的表現(xiàn)
頁(yè)面呈現(xiàn)：
可以發(fā)現(xiàn)小S2身為內(nèi)聯(lián)元素，其直接和小S顯示在了一行，其width寬度也是auto，隨小S2自身內(nèi)容的伸縮而變化
改變width？
我試著給小P以及小S，小S2各自設(shè)置一個(gè)具體的width屬性，在看看他們各自的表現(xiàn)如何
- 小P設(shè)置寬度width屬性為200px
發(fā)現(xiàn)小P設(shè)置width為200px以后，確實(shí)生效了
- 小S，小S2各設(shè)置width寬度為200px
這里可以看到小S和小S2的實(shí)際寬度沒有發(fā)生任何變化，width屬性設(shè)置了200px并沒有生效（雖然右下角的盒子模型的width屬性值確實(shí)被設(shè)置成了200px），這就是內(nèi)聯(lián)元素設(shè)置width不生效的情況
內(nèi)聯(lián)元素的寬度由其自身內(nèi)容決定，指定的width屬性不生效
盒子模型
頁(yè)面上的每一個(gè)元素包括內(nèi)聯(lián)元素，都可以看作是一個(gè)盒子，也即盒子模型
截圖來(lái)自Chrome瀏覽器
盒子模型由四個(gè)組成部分，分為content，padding，border，margin，其順序由內(nèi)而外
box-sizing屬性主要分為以下幾種：
content-box（瀏覽器默認(rèn)的計(jì)算方式）
當(dāng)box-sizing屬性設(shè)置為content-box時(shí)，表示我們給元素設(shè)置的width屬性只是該元素的和模型最內(nèi)層的content的寬度，至于該元素最終在頁(yè)面上的寬度表現(xiàn)等于： width + (padding * 2)border-box
當(dāng)box-sizing屬性設(shè)置為border-box時(shí)，表示我們給元素設(shè)置的width屬性等于整個(gè)盒子模型的border的大小，即你再怎么設(shè)置該元素的padding值，也不會(huì)改變?cè)撛卦陧?yè)面上的實(shí)際寬度，如果你將padding值變化了，那么為了保持整個(gè)盒子的boder寬度不變，只能動(dòng)態(tài)調(diào)整盒子的content值寬度來(lái)保證整個(gè)盒子的寬度為我們?cè)O(shè)置的width值
不同的瀏覽器廠商針對(duì)這里的實(shí)際元素的box-sizing計(jì)算方式卻是不一樣的
所以，為了避免同一份 CSS樣式在不同瀏覽器下表現(xiàn)不一致，最好做一下有關(guān)盒子模型計(jì)算size（box-sizing）的統(tǒng)一規(guī)定處理
總結(jié)
該文總結(jié)了關(guān)于HTML基礎(chǔ)知識(shí)之元素以及盒子模型的簡(jiǎn)單介紹，后續(xù)會(huì)繼續(xù)學(xué)習(xí)關(guān)于元素在文檔流中如何定位以及Flex布局相關(guān)的前端基礎(chǔ)知識(shí)
