深入理解CSS height属性设置元素的高度

所属分类: 网页制作 / CSS 阅读数: 851
收藏 0 赞 0 分享

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代码:

JavaScript Code复制内容到剪贴板
  1. <table>     
  2.     <tr>     
  3.         <td height="100">我的高度为100px</td>     
  4.     </tr>     
  5.     <tr>     
  6.         <td height="50">我高度为50px</td>     
  7.     </tr>     
  8. </table>    

分别设置了高度为100px和50px的两行表格

四、css高度height应用案例

我们设置一个命名为box的盒子,设置一个高度为200px盒子,为了直观观看高度设置效果,我们再对此盒子添加1像素红色边框,如果不设置宽度,将全屏100%宽度,所以我们再设置一个css宽度width为80px属性。

1、高度案例CSS代码:

CSS Code复制内容到剪贴板
  1. #box{height:200px;border:1px solid #F00;width:80px}   

/* CSS注释说明: 设置了红色css边框、高度200px、宽度为80px */

2、高度案例HTml源代码片段:

CSS Code复制内容到剪贴板
  1. <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的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多