DIV标记

最新推荐文章于 2025-05-22 07:00:00 发布

gyensxty

最新推荐文章于 2025-05-22 07:00:00 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： div border html class css float

本文链接：https://blog.youkuaiyun.com/gyensxty/article/details/2139639

DIV标记

DIV(division)是一个HTML标记，用于表示一块可显示HTML信息的区域。

如果不使用任何CSS样式设置的话,div标记的效果与分段标记p基本相同。
<div>第一段文字</div>
<div align="center">第二段文字</div>

*****使用CSS+DIV可以实现结构化的页面布局:
例：

<html>
<head>
<title>CSS+DIV实现简单页面布局</title>
<style type="text/css">
/*星号表示通配符，指任何元素,margin指的是元素之间的空隙，*/
/*padding指的是元素与边框的空隙*/

*{margin:0px;padding:0px;}

body{font-size:20px;}

  .main{width:800px;background:blue;}
  .main.top{
   width:800px;
   height:40px;
   background:#ffaaff;
   border:1px solid #dddddd;
  }
  .main.nav{
   float:left;
   width:100px;
   height:300px;
   background:#bbeeff;
   border:1px solid #dddddd;
  }
  .main.content{
   float:left; /*float表示可以飘浮*/
   width:700px;
   height:300px;
   background:#ffeeaa;
   border:1px solid #dddddd;
  }
</style>
</head>
<body>
<div class="main">
  <div class="top">页面标题内容</div>
  <div class="nav">导航内容</div>
  <div class="content">主体内容</div>
</div>
</body>
</html>

块元素和行元素：

.HTML元素按其显示方式可分为"块级(block)"元素和"行内(inline)"元素两种：

---块级元素:前后换行，可设定块大小(宽度和高度),块的定位，块边框，块间距，块内和块边框间空隙等。如boyd,p,tr,td ,div等。

---行内元素：位于当前行中，前后不换行，不单独定位。如span元素。
例：
<html>
<head>
<title>使用span标记</title>
</head>
<body>
<p>
  一段文字中的
  <span style="font-size:20pt;color:red">
   一部分显示效果有所不同
  </span>  ，可以采用span元素来实现。
</p>
</body>
</html>

.可以使用CSS的display属性设置/修改元素的显示方式，其常用属性取值为：
blokc,inline和none.
例：
<html>
<head>
<title>使用CSS的属性</title>
</head>
<body>
<p>
  一段文字中的
  <span style="display:inline;font-size:40pt;color:red">
   一部分显示效果有所不同
  </span>  ，可以采用span元素来实现。
</p>
<hr>
<p>
  一段文字中的
  <span style="display:block;font-size:40pt;color:red">
   一部分显示效果有所不同
  </span>  ，可以采用span元素来实现。
</p>
<hr>
<p>
  一段文字中的
  <span style="display:none;font-size:20pt;color:red">
   一部分显示效果有所不同
  </span>  ，可以采用span元素来实现。
</p>
<hr>
DIV之前的文字--
<div style="display:inline;font-size:40px;color:blue">
  DIV块内文字
</div>
--DIV之后的文字
<hr>
DIV之前的文字--
<div style="display:block;font-size:40px;color:blue">
  DIV块内文字
</div>
--DIV之后的文字
<hr>
DIV之前的文字--
<div style="display:none;font-size:40px;color:blue">
  DIV块内文字
</div>
--DIV之后的文字
<hr>
</body>
</html>

CSS其它常用属性:
1).背景属性：
.background-color
.background-image
.background-repeat
.background-position
.background
2).边距属性:
.margin-top
.margin-bottom
.margin-left
.margin-right
.margin
3).边框属性：
.border-style
.border-width
.border-color
.border
.单边边框属性:border-top-width
4).间隙属性：
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding