height屬性設(shè)置元素的高度。注意: height屬性不包括填充,邊框,或頁邊距!本文章向碼農(nóng)介紹CSS 高度height 的使用方法和基本實(shí)例,需要的css碼農(nóng)可以參考一下。
css height高度簡介
這里的CSS高度是指通過CSS來控制設(shè)置對象的高度。使用CSS屬性單詞height。單位可以使用PX,em等常用使用PX(像素)為html單位。
一、height高度語法
1、高度基本語法
Height:auto 設(shè)置高度自動
(通常默認(rèn)高度是auto自動,自適用內(nèi)容而增高,通常如果想高度自適應(yīng)不用設(shè)置)
Height:20px 設(shè)置高度為固定數(shù)值
2、CSS高度用法結(jié)構(gòu)
#box{height:50px}
設(shè)置了box對象盒子高度為50px(像素)
擴(kuò)展閱讀:CSS行高line-height
說明:“#box”為CSS選擇器,花括號內(nèi)表示對象CSS樣式。
二、高度樣式用法
Height:50px 設(shè)置對象高度為50px
Height:50em 設(shè)置對象高度為50相對長度em
通常單獨(dú)對一個div高度為百分比沒有效果
擴(kuò)展閱讀:html em標(biāo)簽
CSS自適應(yīng)高度
一般我們需要讓寬度一定時高度隨內(nèi)容增加而增高。此時我們將無需設(shè)置高度即可實(shí)現(xiàn)此效果。同時也無需使用height:auto來實(shí)現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不用再設(shè)置高度值為auto,對象高度即是自適應(yīng)高度。
常用px(像素)作為單位
三、html標(biāo)簽內(nèi)原始高度height元素設(shè)置
1)、設(shè)置table表格高度:<td height="50">內(nèi)容</td>
2)、設(shè)置img圖片高度height:<img src="圖片地址" height="50" /> 當(dāng)圖片設(shè)置高度后,如果寬度沒有設(shè)置,圖片將自動根據(jù)設(shè)置高度等比例縮小或放大顯示圖片(擴(kuò)展閱讀:css img)
以上高度height的數(shù)值都沒有單位,也不需要添加單位,添加單位反而錯誤,默認(rèn)以px像素為長度單位。
Html原始高度屬性與CSS高度對照
以前html直接設(shè)置高度 width="300"這種方式嵌入表格標(biāo)簽內(nèi),而且無需帶單位,默認(rèn)以px(像素)為單位。
table tr td表格高度樣式設(shè)置實(shí)例html代碼: