CSS height属性设置元素的高度_html/css_WEB-ITnose

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表格高度：

内容
2）、设置img图片高度height： 当图片设置高度后，如果宽度没有设置，图片将自动根据设置高度等比例缩小或放大显示图片(扩展阅读：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区别及用法，希望大家能掌握高度样式属性的设置及用法。

 

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 实例