CSS之行內元素與塊元素

1、概念：

行內元素：又叫內嵌元素-只能容納文本或者其他內嵌元素，常見內嵌元素有<span>,<a>,<input>

塊元素：一般都從新行開始，可以容納文本，其他內嵌元素和其他塊元素，即使內容不能佔滿一樣，塊元素也要把整行佔滿，常見元素有<div>,<p>

這樣理解：行內元素它只佔能顯示自己內容的寬度，而且他不會佔據整行。塊元素它不管自己的內容有多少，會佔據整行，而且會換行顯示

：對照行內元素與塊元素的概念，可以快速理解行內元素與塊內元素的知識

2、行內元素與塊元素的區別

• 行內元素只佔內容的寬度，塊元素內容不管內容的多少要佔滿全行
• 行內元素只能容納文本和其他行內元素，塊元素可以容納文本、行內元素和塊元素(與瀏覽器類版本和類型有關)
• 一些CSS屬性對行內元素不生效，如margin，left,right,width,height.建議儘可能的使用塊元素定位。(與瀏覽器類版本和類型有關)

3、行內元素與塊元素的互換

如：display:inline --->轉為行內元素（如 div）

.d1{
background-color:silver;/*我的第一個div變成了行內元素*/
display:inline;
}

display:block ---->轉為塊元素(如a)

a{
display:block;
background-color:yellow;   /*連結到我的首頁變成了塊元素*/
}

 4、標準流與非標準流

• 流：現實中是流水，在網頁設計中就是指元素標籤排列的方式
• 標準流：元素在網頁中，排在前面的元素（標籤）內容前面出現，排在後面的元素內容後面出現
• 非標準流：當某個元素標籤脫離了標準流（如相對定位）排列，我們統稱為非標準流排列