塊級和內聯元素

以前就已經說過了塊級元素和內聯元素

可是我始終沒找到

因此今天我整理了一下資料將他做爲一個單獨的章節發出來

由於不少同窗都是新手小白

第一步：上理論

塊級元素：

每一個塊級元素默認佔一行高度，一行內添加一個塊級元素後沒法通常沒法添加其餘元素（float浮動後除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素通常可嵌套塊級元素或行內元素；

內聯元素：

也叫行內元素、內嵌元素等；行內元素通常都是基於語義級(semantic)的基本元素，只能容納文本或其餘內聯元素，例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。--------------------------------------------------------第二步：上教程
塊級元素：

如上圖所示

塊級元素就是一個盒子，內部能夠放盒子，也能夠放內聯元素

並且他能夠控制寬高且獨佔一行

得出：

1. 塊級元素可給於寬和高
   

2. 塊級元素獨佔一行

--------------------------------------------------------

行內元素：

如上圖所示

內聯元素又名行內元素

他的寬高是由內容的寬高控制

且多個內聯元素同處一行，直到瀏覽器裝不下才重起一行

得出：

1. 行內元素不能夠控制寬高
   

2. 行內元素沒有獨佔一行

--------------------------------------------------------

行內元素與塊級元素總結：

塊級元素：塊級元素可給於寬和高且獨佔一行；

行內元素：寬高是由內容的寬高控制且多個內聯元素同處一行，直到瀏覽器裝不下才重起一行；

那是不是固定的元素沒法更改呢？

通常塊級元素的display屬性默認爲block；

行內元素的display屬性默認爲inline；
經過修改元素的display屬性能夠達到修改元素的塊級和行內

如何修改？

display是css樣式

因此修改使用的是「:」而不是「=」

通常於head部分引用style設置，或元素前標籤引用style，或使用外部樣式

以下圖，

head部分引用style設置

--------------------------------------------------------

下圖

元素前標籤引用style

--------------------------------------------------------

外部樣式這裏就不引入了，後面實例會用到

轉自：公衆號 雙魚站

做者：雙魚站的小魚兒