溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹css中display block的使用方法，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
先來看看塊級和行內元素的概念：
塊級元素：占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形；
行內元素 ：自己的獨立空間，它是依附于其他塊級元素存在的，因此，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。
display:block的介紹
css中的display是設置元素顯示的方式,block是一塊狀元素的方式顯示，簡單的來說就是設置display:block就是將元素顯示為塊級元素。
看完了display:block的意思后，如果你還是不太了解，那么我們接著就往下看，看看display:block怎么用，通過display:block的用法來更進一步的認識display:block的意思。
display:block的用法：
對于所有的塊級元素來說都是不需要用display:block來定義的，因為塊級元素的默認屬性就是block；所以display:block比較常用于像是<a>和<span>等不是塊級元素的元素中，下面我們就來看看具體的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
}
</style>
</head>
<body>
<span style="background-color: red ">億速云</span>
<span style="background-color: red ">億速云</span>
<span style="background-color: red ">億速云</span>
</body>
</html>上述代碼是沒有用display:block來定義的，效果如下：
從上面的效果圖可以很明顯的看到，對span設置寬高是沒有用的，而且內容都處于同一行，下面我們來看看用display:block定義會是怎樣的，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
width: 200px;
height: 30px;
display: block;
}
</style>
</head>
<body>
<span style="background-color: red ">億速云</span>
<span style="background-color: red ">億速云</span>
<span style="background-color: red ">億速云</span>
</body>
</html>使用display:block的效果如下：
上述效果可以很明顯看到對寬高設置有效了并且也都獨占于一行。
關于css中display block的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
