首頁 > web前端 > css教學 > 主體

CSS中什麼是Dimension(尺寸)? (程式碼實例)

青灯夜游
發布: 2018-09-14 17:59:59
原創
2635 人瀏覽過

本章介紹給大家CSS中什麼是Dimension(尺寸)? (程式碼實例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、簡介

CSS 尺寸 (Dimension) 屬性可讓你控制元素的高度和寬度。同樣,它允許你增加行間距。

二、Dimension(尺寸)屬性值

CSS中什麼是Dimension(尺寸)? (程式碼實例)

#三、範例

(1)範例1:設定不同元素的高度

img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
登入後複製

(2)範例2:使用百分比值設定元素的高度

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
登入後複製

(3)範例3:使用像素值來設定元素的寬度

img {width:200px;}
登入後複製

(4)範例4:設定元素的最大高度

p{
    max-height:50px;
    background-color:yellow;
}
登入後複製

(5)範例5:用百分比值來設定元素的最大寬度

p{
    max-width:20%;
    background-color:yellow;
}
登入後複製

(6)範例6:設定元素的最小高度

p{
    min-height:100px;
    background-color:yellow;
}
登入後複製

(7)範例7:以像素值設定元素的最小寬度

p{
    min-width:150px;
    background-color:yellow;
}
登入後複製

以上是CSS中什麼是Dimension(尺寸)? (程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!