html div怎么设置大小-html教程-PHP中文网

html div怎么设置大小

青灯夜游

发布： 2021-10-11 13:51:54

原创

23205人浏览过

html div设置大小的方法：在div标签中，使用style属性设置“width:宽度数值+单位 ;”和“height: 高度数值+单位;”样式即可。

html div怎么设置大小

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在HTML中，

可定义文档中的一个分隔区块或者一个区域部分。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div>测试文本</div>
<div>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>

登录后复制

立即学习“前端免费学习笔记（深入）”；

可以看出div标签的宽度是默认满屏的，而高度就默认是内容高度。

仿虎嗅网在线视频教育门户源码2.0

仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。

查看详情

但我们可以通过手动给div设置样式来改变它的大小：

只需要在div标签中，使用style属性设置“width:宽度数值+单位 ;”和“height: 高度数值+单位;”样式即可。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div style="width:200px ;">测试文本</div>
<div style="width:700px ;height: 100px;">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>

登录后复制

效果图：