CSS中,我們可以使用display屬性來將行元素變成塊元素。默認情況下,HTML中的元素可以分為兩種類型:行元素和塊元素。塊元素會占據一整行,而行元素只會占據它們需要的空間。
舉個例子,下面的代碼中,我們有兩個超鏈接,它們默認是行元素。
<a href="#">這是一個超鏈接</a><br> <a href="#">這是另一個超鏈接</a>
如果我們想讓超鏈接變成塊元素,我們可以添加一條CSS規則,使用display屬性將它們轉換為塊元素。
a { display: block; }
現在看一下我們的HTML代碼,超鏈接現在變成了塊元素。
<a href="#">這是一個超鏈接</a> <a href="#">這是另一個超鏈接</a>
同樣的,我們也可以使用display屬性將塊元素變成行元素。例如,我們可以將一個段落變成行元素。
p { display: inline; }
這里的CSS規則將一個段落轉換成行元素,它現在和文本一樣,只占用需要的空間。
總結來說,我們可以使用CSS的display屬性將行元素變成塊元素,或者將塊元素變成行元素,從而更好地控制HTML元素的布局。
上一篇css 表格跨行無效
下一篇css徑向漸變講解