css行內元素和塊元素
阿新 • • 發佈：2018-12-13
一.塊級元素和內聯元素的區別：
1.塊元素，總是在新行上開始；內聯元素，和其他元素在一行；
2.塊元素，能容納其他塊元素或者內聯元素；內聯元素，只能容納文字或其他內聯元素；
3.塊元素中高度，行高以及頂和底邊距都可以控制；內聯元素中高，行高及頂和底邊距不可改變。
4.對於行內元素來說margin只有margin-left和margin-right有效，padding只有padding-left和padding-right有效
二.各自的特點：
1.塊元素的特點：
- 總是在新行上開始；
- 高度、行高以及外邊距和內邊距都可控制；
- 寬度預設是它容器的100%，除非設定一個寬度；
- 他可以容納內聯元素和其他塊元素。
2.內聯元素的特點：
- 和其他元素都在同一行；
- 高，行高及外邊距和內邊距不可改變；
- 寬度就是它的文字和圖片的寬度，不可改變；
- 內聯元素只能容納文字或者其他內聯元素。
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> span{ height: 100px; background-color: pink; line-height: 100px; } </style> <body> <span>1111</span> </body> </html>
注：
1.float
當把行內元素設定完float:left/right後，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。
2.position
當為行內元素進行定位時，position:absolute與position:fixed.都會使得原先的行內元素變為塊級元素。
3.行內元素 你設定了display:inline-block; 行內元素就可以設定margin，padding了