HTML中的行塊屬性
阿新 • • 發佈：2021-11-08
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: lightblue; display: inline-block; 塊元素轉換為行內塊元素,塊元素的寬高屬性失效 } span{ width: 300px; height: 300px; background: pink; /*display: inline-block;*/ }input{ height: 30px; width: 300px; } img{ width: 200px; height: 300px ; } </style> </head> <body> <div>我是div</div> <div>我是div</div> <br> <span> 從前書信很慢，車馬很遠，一生只能愛一人。 以後的日子不奢望做的每一個選擇都正確，只希望每一個選擇造成的後果自己都能接受。 喜歡就別克制住愛意，留不住就祝她歲歲平安。 書要好好讀，喜歡的人要好好在一起。 </span> <hr> <span> 做自己的治癒者，和自己握手言和。 這世間所有的溫柔都值得我們踮起腳尖。 習慣了這個詞他強大了，代替了所有的一言難盡。 熱水治不了百病，情話過不了一生。 </span> <hr> <input type="text" name=""> <input type="text" name=""> <img src="./shuai.jpg"> <!-- 塊屬性： div ， p ，ul ，ol ，li ，h1-h6等 特點： 1.可以設定寬高 2.不可以與別人共處一行 3.不設定寬高的情況下，寬度為100% 行內屬性： span ， a 特點： 1.不可以設定寬高 2.可以和別人共處一行 3.其寬高由內容撐開 行內塊屬性：img input 特點： 1.可以設定寬高 2.可以和別人共處一行 --> </body> </html>
1.塊屬性
如圖所示不加
display: inline-block;
的話
效果如圖
因為
塊屬性： div ， p ，ul ，ol ，li ，h1-h6等
特點：
1.可以設定寬高
2.不可以與別人共處一行
3.不設定寬高的情況下，寬度為100%
因為塊級元素不能共處一行所以在預設情況下，第二個div會自動換行
這樣兩個div會分處兩行
如果讓他們共處一行可以輸入一下程式碼
display: inline-block; 塊元素轉換為行內塊元素。
效果如圖所示
這樣的話兩個div就可以共處一行啦
2。行內屬性
如圖所示span，本來在程式碼中設定為
span{
width: 300px;
height: 300px;
background: pink;
display: inline-block;
}
但是如上圖所示他的寬高是不足300px的。
因為
行內屬性： span ， a
特點：
1.不可以設定寬高
2.可以和別人共處一行
3.其寬高由內容撐開
所以他的寬高是由內容決定的
如果我們將span的內容擴充套件一下
<span>
從前書信很慢，車馬很遠，一生只能愛一人。
以後的日子不奢望做的每一個選擇都正確，只希望每一個選擇造成的後果自己都能接受。
喜歡就別克制住愛意，留不住就祝她歲歲平安。
書要好好讀，喜歡的人要好好在一起。
</span>
<hr>
<span>
做自己的治癒者，和自己握手言和。
這世間所有的溫柔都值得我們踮起腳尖。
習慣了這個詞他強大了，代替了所有的一言難盡。
熱水治不了百病，情話過不了一生。
</span>
效果如圖所示
如圖所示，他是根據span裡面的內容變化而變化，就是
3.其寬高由內容撐開
3.行內塊屬性
行內塊屬性：img input
特點：
1.可以設定寬高
2.可以和別人共處一行
如圖所示
兩個輸入框在一行
因為
input是行內塊元素可以共處一行
圖片太大了
因為img也是行內塊元素
我們可以改變他的大小
程式碼如圖
img{
width: 200px;
height: 300px
;
}
頁面效果如下