height屬性設(shè)置元素的高度。注意： height屬性不包括填充，邊框，或頁(yè)邊距！本文章向碼農(nóng)介紹CSS 高度height 的使用方法和基本實(shí)例，需要的css碼農(nóng)可以參考一下。

css height高度簡(jiǎn)介

這里的CSS高度是指通過(guò)CSS來(lái)控制設(shè)置對(duì)象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。

一、height高度語(yǔ)法

1、高度基本語(yǔ)法

Height:auto 設(shè)置高度自動(dòng)

（通常默認(rèn)高度是auto自動(dòng)，自適用內(nèi)容而增高，通常如果想高度自適應(yīng)不用設(shè)置）

Height:20px 設(shè)置高度為固定數(shù)值

2、CSS高度用法結(jié)構(gòu)

#box{height:50px}

設(shè)置了box對(duì)象盒子高度為50px（像素）

擴(kuò)展閱讀：CSS行高line-height

說(shuō)明：“#box”為CSS選擇器，花括號(hào)內(nèi)表示對(duì)象CSS樣式。

二、高度樣式用法

Height:50px 設(shè)置對(duì)象高度為50px

Height:50em 設(shè)置對(duì)象高度為50相對(duì)長(zhǎng)度em

通常單獨(dú)對(duì)一個(gè)div高度為百分比沒(méi)有效果

擴(kuò)展閱讀：html em標(biāo)簽

CSS自適應(yīng)高度

一般我們需要讓寬度一定時(shí)高度隨內(nèi)容增加而增高。此時(shí)我們將無(wú)需設(shè)置高度即可實(shí)現(xiàn)此效果。同時(shí)也無(wú)需使用height:auto來(lái)實(shí)現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不用再設(shè)置高度值為auto，對(duì)象高度即是自適應(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è)置高度后，如果寬度沒(méi)有設(shè)置，圖片將自動(dòng)根據(jù)設(shè)置高度等比例縮小或放大顯示圖片(擴(kuò)展閱讀：css img)

以上高度height的數(shù)值都沒(méi)有單位，也不需要添加單位，添加單位反而錯(cuò)誤，默認(rèn)以px像素為長(zhǎng)度單位。

Html原始高度屬性與CSS高度對(duì)照

以前html直接設(shè)置高度 width="300"這種方式嵌入表格標(biāo)簽內(nèi)，而且無(wú)需帶單位，默認(rèn)以px（像素）為單位。

table tr td表格高度樣式設(shè)置實(shí)例html代碼：

分別設(shè)置了高度為100px和50px的兩行表格

四、css高度height應(yīng)用案例

我們?cè)O(shè)置一個(gè)命名為box的盒子，設(shè)置一個(gè)高度為200px盒子，為了直觀觀看高度設(shè)置效果，我們?cè)賹?duì)此盒子添加1像素紅色邊框,如果不設(shè)置寬度，將全屏100%寬度，所以我們?cè)僭O(shè)置一個(gè)css寬度width為80px屬性。

1、高度案例CSS代碼：

/* CSS注釋說(shuō)明： 設(shè)置了紅色css邊框、高度200px、寬度為80px */

2、高度案例HTml源代碼片段：

五、css高度height總結(jié)

通常使用css高度對(duì)對(duì)象設(shè)置高度長(zhǎng)度單位。一般我們需要對(duì)盒子對(duì)象設(shè)置高度時(shí)候，只需要對(duì)該CSS類(lèi)添加高度height加值即可。高度不能設(shè)置百分比高度如“height:50%”,設(shè)置百分比的高度無(wú)效。這篇教程講解CSS height與html height區(qū)別及用法，希望大家能掌握高度樣式屬性的設(shè)置及用法。

原文地址：http://www.manongjc.com/article/809.html

最新評(píng)論