CSS height屬性設定元素的高度，cssheight屬性元素

CSS height屬性設定元素的高度，cssheight屬性元素

height屬性設定元素的高度。注意： height屬性不包括填充，邊框，或頁面邊界！本文章向碼農介紹CSS 高度height 的使用方法和基本執行個體，需要的css碼農可以參考一下。

css height高度簡介

這裡的CSS高度是指通過CSS來控制設定對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。

 

一、height高度文法 

1、高度基本文法

Height:auto 設定高度自動

（通常預設高度是auto自動，自適用內容而增高，通常如果想高度自適應不用設定）

Height:20px 設定高度為固定數值

2、CSS高度用法結構

#box{height:50px}

設定了box對象盒子高度為50px（像素）

擴充閱讀：CSS行高line-height

說明：“#box”為CSS選取器，花括弧內表示對象CSS樣式。

 

二、高度樣式用法

Height:50px 設定對象高度為50px

Height:50em 設定對象高度為50相對長度em

通常單獨對一個div高度為百分比沒有效果

擴充閱讀：html em標籤

CSS自適應高度

一般我們需要讓寬度一定時高度隨內容增加而增高。此時我們將無需設定高度即可實現此效果。同時也無需使用height:auto來實現高度自適應。通常預設情況下不用再設定高度值為auto，對象高度即是自適應高度。

常用px（像素）作為單位

 

三、html標籤內原始高度height元素設定

1）、設定table表格高度：<td height="50">內容</td>
2）、設定img圖片高度height：<img src="圖片地址" height="50" /> 當圖片設定高度後，如果寬度沒有設定，圖片將自動根據設定高度等比例縮小或放大顯示圖片(擴充閱讀：css img)

以上高度height的數值都沒有單位，也不需要添加單位，添加單位反而錯誤，預設以px像素為長度單位。

 

Html原始高度屬性與CSS高度對照

以前html直接設定高度 width="300"這種方式嵌入表格標籤內，而且無需帶單位，預設以px（像素）為單位。

table tr td表格高度樣式設定執行個體html代碼：

<table>     <tr>         <td height="100">我的高度為100px</td>     </tr>     <tr>         <td height="50">我高度為50px</td>     </tr> </table> 

分別設定了高度為100px和50px的兩行表格

 

四、css高度height應用案例

我們設定一個命名為box的盒子，設定一個高度為200px盒子，為了直觀觀看高度設定效果，我們再對此盒子添加1像素紅色邊框,如果不設定寬度，將全屏100%寬度，所以我們再設定一個css寬度width為80px屬性。

1、高度案例CSS代碼：

#box{height:200px;border:1px solid #F00;width:80px}

/* CSS注釋說明： 設定了紅色css邊框、高度200px、寬度為80px */

2、高度案例HTml原始碼片段：

<div id="box">我高度為200px</div>

 

五、css高度height總結

通常使用css高度對對象設定高度長度單位。一般我們需要對盒子物件設定高度時候，只需要對該CSS類添加高度height加值即可。高度不能設定百分比高度如“height:50%”,設定百分比的高度無效。這篇教程講解CSS height與html height區別及用法，希望大家能掌握高度樣式屬性的設定及用法。

 

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

css相關閱讀教程：

• CSS 教程
• CSS 簡介
• CSS 文法
• CSS Id 和 Class選取器
• CSS 樣式的建立
• CSS background 背景介紹
• CSS 文本樣式
• CSS font 字型
• CSS A 連結
• CSS ul ol列表樣式
• CSS TABLE 樣式
• CSS 框模型
• CSS border 邊框
• CSS Outlines 輪廓
• CSS 外邊距 Margin
• CSS Padding 內邊距
• CSS 分組和嵌套選取器
• CSS 尺寸 (Dimension)
• CSS Display 屬性
• CSS Position 定位
• CSS Float 浮動
• CSS 水平對齊(Horizontal Align)
• CSS 組合選擇符
• CSS 偽類
• CSS 虛擬元素
• CSS 導覽列
• CSS 下拉式功能表
• CSS 圖片廊
• CSS 映像透明/不透明
• CSS sprite 映像拼合技術
• CSS 媒體類型
• CSS 屬性選取器
• CSS 執行個體