在CSS樣式中，最常用到的display屬性有三個，block,inlineblock,inline,分別從1.是否獨佔一行2.是否能設置寬高3.margin和padding是否有效。
- block屬於塊級
- 塊級元素默認是獨佔一行的，且寬默認是父元素的100%，如果設置了寬高，依然是佔據一行
- 可以設置元素的寬高
- 在設置外邊距margin和padding時均有效
- inlineblock 行塊級
- 兼具inline的一行排列效果
- 也有寬高設置效果
- 在設置外邊距margin和padding時均有效
- inline 行內元素
- inline的只有一行排列效果，當內容超過一行 無法放下時，纔會，排列到下一行
- 沒有有寬高設置效果，且內容有多大 就會佔據多大的地方
- 在設置外邊距margin和padding時，只有左右邊距有效，上下邊距是無效。
注意：塊級元素設置成inline inlineblock時，會產生元素的左右邊距，可以在父級元素上 設置font-size:0;
<html>
<head>
<style type='text/css'>
.block_div{
width: 400px;
height: 150px;
background: red;
font-size: 0;
}
*{
margin: 0px auto;
}
.block_div2{
width: 30px;
height: 20px;
background: green;
/*內聯元素設置*/
/*display: inline;*/
font-size:15px;
display: inline-block;;
}
.block_div1{
/*外邊距設置*/
margin-top: 30px;
height: 20px;
background: yellow;
/*內聯元素設置*/
/*display: inline;*/
font-size:15px;
display: inline-block;;
}
.block_div3{
color: green;
padding: 10px;
width: 250px;
background: brown;
font-size:15px;
/*內聯元素設置*/
/*display: inline;*/
display: inline-block;;
}
.block_div4{
height: 20px;
background: blue;
/*內聯元素設置*/
/*display: inline;*/
font-size:15px;
display: inline-block;;
}
</style>
</head>
<body>
<!--block塊級元素-->
<!-- <div class='block_div'>
<div class='block_div2'></div>
<div class='block_div1'></div>
<div class='block_div3'>自動填滿父級內容且有設置邊距</div>
<div class='block_div4'></div>
</div> -->
<!--inline塊級元素-->
<div class='block_div'>
<div class='block_div2'>1</div>
<div class='block_div1'>2</div>
<div class='block_div3'>自動填滿父級內容且有設置邊距</div>
<div class='block_div4'>4</div>
</div>
</body>
</html>
學習博客：