DIV CSS height高度知识教程篇
DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX,em等常用使用PX(像素)为html单位。
一、height高度语法
1、高度基本语法Height:auto 设置高度自动(通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置)
Height:20px 设置高度为固定数值
2、CSS高度用法结构#divcss{height:50px}设置了divcss对象盒子高度为50px(像素)
代码案例:
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
body 地方代码
这个段落的高和宽是 100px.
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.
扩展阅读:CSS行高line-height
说明:“#css5”为CSS命名,花括号内表示对象CSS样式。
二、高度样式用法
Height:50px 设置对象高度为50pxHeight:50em 设置对象高度为50相对长度em通常单独对一个div高度为百分比没有效果
扩展阅读:html em标签
CSS自适应高度一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不用再设置高度值为auto,对象高度即是自适应高度。
常用px(像素)作为单位
三、html标签内原始高度height元素设置
1)、设置table表格高度:
内容2)、设置img图片高度height: 当图片设置高度后,如果宽度没有设置,图片将自动根据设置高度等比例缩小或放大显示图片(扩展阅读:css img)以上高度height的数值都没有单位,也不需要添加单位,添加单位反而错误,默认以px像素为长度单位。
Html原始高度属性与DIV+CSS高度对照以前html直接设置高度 width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。table tr td表格高度样式设置实例html代码:
我的高度为100px
我高度为50px
分别设置了高度为100px和50px的两行表格
html 标签内设置height高度案例截图
四、css高度height应用案例
我们设置一个命名为divcss的盒子,设置一个高度为200px盒子,为了直观观看高度设置效果,我们再对此盒子添加1像素红色边框,如果不设置宽度,将全屏100%宽度,所以我们再设置一个css宽度width为80px属性。
1、高度案例CSS代码:#divcss{height:200px;border:1px solid #F00;width:80px}/* CSS注释说明: 设置了红色css边框、高度200px、宽度为80px */
2、高度案例HTml源代码片段:
属性值值描述
auto默认。浏览器会计算出实际的高度。
length使用 px、cm 等单位定义高度。
%基于包含它的块级对象的百分比高度。
inherit规定应该从父元素继承 height 属性的值。