iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

我的網頁前端小小小教室系列 第 14

Day14 CSS基礎設定_4

今天我們要來教一些常用到的基本設定、包括寬高、背景顏色、文字顏色,以及inline與block的區別。

1.設定寬高

<style>
        div{
            width: 250px;
            height: 250px;
        }
</style>

設定一個寬高為250px的方框。

2.背景顏色

background-color: blue;
<style>
        div{
            width: 250px;
            height: 250px;
            background-color: blue;
        }
</style>

將這個方框設定為藍色。

3.文字顏色

color: rgb(20, 243, 20);
div{
            width: 250px;
            height: 250px;
            background-color: blue;
        }
p{
    color: rgb(20, 243, 20);
  }

以上這些都是非常基礎的設定,接下來要認識inline,與block的特性。

inline

inline元素會擁有以下的特性:

1.他的方框寬度大小是由內容撐開去決定的,內容多少,寬度就多少。

2.因為第一點的關西,沒辦法設定寬高。

3.元素均會在同一行,包括圖片跟文字,不會強制換行。

那inline元素會有那些呢?

inline元素:

span、a、img、input、br、textarea這些都是我們前面提過的。

那我們就馬上實驗看看吧!

<body>
    <div>
        <a href="">我是超連結</a>
        <img src="https://picsum.photos/200/300" alt="">
        <span>我不想要換行</span>
    </div>
</body>

透過使用者開發工具我們發現,這三個東西a、img、span都在同一行裡,沒有進行換行的動作,這就是所謂的inline元素!

block

block元素會有以下的特性:

1.不管內容多小,元素寬度預設就是占滿整個寬。

2.可以設定長寬/margin/padding。

block常見元素:

div、p、h1~h6、ul、ol、li、form、table

那讓我們來看看區別吧!

<div class="a">
        <p>我只有六個字</p>
        <ul></ul>
            <li>nnnnn</li>
            <li>nnnnn</li>
            <li>nnnnn</li>
        </ul>
        <h1>我不想換行</h1>
</div>

透過設定背景顏色我們可以看到,儘管我們打說不想換行,他還是會換行,因為這就是block元素的特性。不管內容多小就是會占滿整個寬度。

最後其實還有混合兩種的特性inline-block,其實就是結合兩種的特性,能夠以inline的方式排版,不會占滿整個寬,但又擁有block的特性,能夠設定margin和padding,能夠水平排列。之後我們在詳細介紹吧!今天的教學就到這。


上一篇
Day13 CSS基礎設定_3
下一篇
# Day15 CSS基礎設定_5
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言