您的位置:CSS5 > CSS笔记 >

阿里云 2核CPU 4G内存 3M带宽云服务器 669元/3年

div高度_用CSS设置div高度

发布日期:2019-10-29 18:25:17 来源:CSS5

静态网页前端制作时,用div布局时候,通过css设置div的样式,包括了宽度、高度、边框、背景、字体颜色等样式。至此CSS5教大家css div高度设置。

一、高度样式

height

语法:
height:100px —— 固定设置高度100px
height:80% —— 设置高度以百分比为单位,对象以父级高度根据百分比计算出当前对象高度。
height:auto —— 高度自动,随内容占用多少高度对象自适应高度。 默认div高度为auto,自适应,所以一般很少用。

使用比较多的是高度固定。

div{height:300px}

初始化div 高度为300px,通常网页前端布局是不会设置默认div固定高度,一般不用初始化div高度,默认就是div高度 auto自动自适应的。

二、设置div高度样式

分别使用class、id和div style属性三者方式设置div高度样式。

完整示范代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV 高度设置</title>
<style>
div{ width:300px; margin-top:10px}
.ab{ height:60px; border:1px solid #333}
#bc{ border:1px solid #06F; height:80px}
</style>
</head>
<body>
<div class="ab">高度设置60px</div>
<div id="bc">高度80px</div>
<div style="height:100px; border:2px solid #F00">
高度100px
</div>
</body>
</html>

高度示范实例在浏览器效果截图

div 高度设置三种方法效果截图
div的高度设置三种方法效果截图

说明:以上实例为了看到对div设置的高度属性,所以对div设置宽度和边框样式。

希望大家能掌握这3种div 高度设置方法。

标签(Tag): div 高度
本文分享URL地址:https://www.css5.com.cn/biji/1595.shtml

作者:CSS5原创

上一页:上一篇:默认div宽度认识与div的宽度设置
下一页:下一篇:div边框_html中div边框样式属性设置布局