HTML中display屬性的特性與應用
HTML是一種用于創建網頁的標記語言，display屬性是HTML中常用的一個屬性之一，用于控制元素在頁面中的顯示方式。display屬性有不同的取值，每個取值都有自己的特性和應用。本文將介紹常見的幾個display屬性取值，并給出相應的代碼示例。
- display: block
block是display屬性的默認取值，表示元素會顯示為塊級元素。塊級元素會在頁面中占據一整行，獨占一行，直到遇到換行才會結束。塊級元素可以設置寬度、高度、內外邊距等屬性，可以容納其他元素。
示例代碼：
div {
display: block;
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
}
This is a block element.
登錄后復制
- display: inline
inline表示元素會顯示為內聯元素。內聯元素不會獨占一行，可以和其他元素在同一行顯示。內聯元素的寬度、高度、內外邊距等屬性不起作用，可以容納文本或其他內聯元素。
示例代碼：
span {
display: inline;
background-color: yellow;
padding: 10px;
}
This is an inline element.
登錄后復制
- display: inline-block
inline-block是display屬性的另一個常用取值，表示元素會以內聯塊元素的方式顯示。內聯塊元素可以在同一行顯示，同時可以設置寬度、高度、內外邊距等屬性。
示例代碼：
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
This is an inline-block element.
This is another inline-block element.
登錄后復制
- display: none
none表示元素不會被顯示出來，元素在頁面中不占據任何空間。使用display: none可以隱藏元素，相當于將元素從頁面中移除。
示例代碼：
p {
display: none;
}
This paragraph will not be displayed.
登錄后復制
以上是display屬性的幾個常見取值及相應的代碼示例。通過靈活運用display屬性，我們可以控制元素在頁面中的顯示方式，實現不同的布局效果。
