是为了丰富网页布局的样式,在CSS没有出来之前,大家会用表格来进行分割布局,很不方便,CSS出来后就好多了。
我们平时所访问的都是服务器反馈到浏览器的HTML页面,但是正如上面说的,HTML无法满足新时代网站拥有者的表达需求,我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。
例如:
<html>
<head>
<title>测试页<title>
<style type="text/css">
.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}
.csl{width:20%height:160pxfloat:leftbackground:#fff}
.csr{width:20%height:160pxfloat:rightbackground:#fff}
</style>
</head>
<body>
<div class="cs">
<div class="csl">
<p>左框内容</p>
</div>
<div class="csr">
<p>右框内容</p>
</div>
</div>
</body>
</html>
用float属性,如<html xmlns="http://www.dayinmandarin.com">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>div+css</title>
<style>
.a{width:1000pxheight:100pxbackground:#CF0}
.a div{float:leftwidth:200pxheight:100pxbackground:#90Fmargin-left:30px}
</style>
</head>
<body>
<div class="a">
<div> 一号 </div>
<div> 二号 </div>
<div> 三号 </div>
<div> 四号 </div>
</div>
</body>
</html>
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。
有时可以称其为图层。DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
定义:
<div>可定义文档中的分区或节(division/section)。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用id或class来标记<div>,那么该标签的作用会变得更加有效。
注释:<div>是一个块级元素,也就是说,浏览器通常会在div元素前后放置一个换行符。
提示:请使用<div>元素来组合块级元素,这样就可以使用样式对它们进行格式化。
用法:
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是<div>固有的特定的格式表现。可以通过<div>的class或id应用额外的样式。
不必为每一个<div>都加上类或id,虽然这样做也有一定的好处。
可以对同一个<div>元素同时应用class和id属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的特定的元素。