<style>
div{
width: 250px;
height: 250px;
}
</style>
設定一個寬高為250px的方框。
background-color: blue;
<style>
div{
width: 250px;
height: 250px;
background-color: blue;
}
</style>
將這個方框設定為藍色。
color: rgb(20, 243, 20);
div{
width: 250px;
height: 250px;
background-color: blue;
}
p{
color: rgb(20, 243, 20);
}
以上這些都是非常基礎的設定，接下來要認識inline，與block的特性。
inline元素會擁有以下的特性:
那inline元素會有那些呢?
那我們就馬上實驗看看吧!
<body>
<div>
<a href="">我是超連結</a>
<img src="https://picsum.photos/200/300" alt="">
<span>我不想要換行</span>
</div>
</body>
透過使用者開發工具我們發現，這三個東西a、img、span都在同一行裡，沒有進行換行的動作，這就是所謂的inline元素!
block元素會有以下的特性:
block常見元素:
那讓我們來看看區別吧!
<div class="a">
<p>我只有六個字</p>
<ul></ul>
<li>nnnnn</li>
<li>nnnnn</li>
<li>nnnnn</li>
</ul>
<h1>我不想換行</h1>
</div>
透過設定背景顏色我們可以看到，儘管我們打說不想換行，他還是會換行，因為這就是block元素的特性。不管內容多小就是會占滿整個寬度。
iThome鐵人賽
看影片追技術