div中框架的使用
FRAME（框架）是Web上经常会看到的页面结构。
使用可视Web开发工具（比如Dreamweaver或者Frontpage），虽然可以在WYSIWYG环境中通过简单的鼠标托拽完成FRAME的构建，但是要实现真正细致甚至强大的功能，仔细理解FRAME的代码结构至关重要！你将发现，FRAME原来是这样的亲切易用。
创建基本的FRAMESETFRAMESET页面与普遍的Web页面有些不同。
虽然仍旧以＜HTML＞和包含标题的＜HEAD＞标记以及其他脚本开始，但是其内容仅仅是表示的各个页面的版式设计。
因此，不再需要有＜BODY＞元素，只需要＜FRAMESET＞标记。
通过＜FRAMESET＞标记的＜rows＞和＜cols＞属性，浏览器窗口被分割为一个个格子。
＜rows＞和＜cols＞的设置值可以是固定的像素值，可以是总空间的百分比值，还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。
比如说：cols="80,20%,*" 分为3列，宽度分别为80像素，窗口宽度的20％，以及剩余宽度rows="25%,75%" 分为2列，宽度分别为窗口宽度的25％和75％rows="*,3*" 与上述第2个表示的一样，分为2列，但表示方法不同：第一列宽度为第二列的1/3在＜FRAMESET＞和＜/FRAMESET＞之间，用多个＜FRAME＞标记表示每个分割区。
col表示从左到右的列，row表示从上到下的行。
每个＜FRAME＞有一个src属性，给出了这个FRAME的内容。
它可以是浏览器能显示的任何一个合法URL，或者是另外一个FRAMESET。
为预防递归现象，一个FRAME不能包含它本身所在的FRAMESET页面。
要用name属性定义FRAME的名字，这样就可以在代码或者脚本程序中引用它。
请看一段基本的FRAMESET代码：＜HTML＞＜HEAD＞＜TITLE＞Simple FRAMESET＜/TITLE＞＜/HEAD＞＜FRAMESET cols="40%,60%" rows="2*,*"＞＜FRAME name="TopLeft" src="red.htm"＞＜FRAME name="TopRight" src="green.htm"＞＜FRAME name="BotLeft" src="blue.htm"＞＜FRAME name="BotRight" src="white.htm"＞＜/FRAMESET＞＜/HTML＞＜FRAMESET rows="105,*"＞＜FRAME name="adbanner" src="ad.html"＞＜FRAMESET cols="40%,60%"＞＜FRAME name="left" src="red.htm"＞＜FRAMESET rows="*,*"＞＜FRAME name="top" src="blue.htm"＞＜FRAME name="bottom" src="white.htm"＞＜/FRAMESET＞＜/FRAMESET＞＜/FRAMESET＞FRAME间的链接一个FRAMESET结构的页面，新文档只转载进窗口的一部分中，而其他页面则保持静态不变。
当用户点击FRAME中的链接时，新内容就在同一FRAME内打开。
要让新内容在其他FRAME中打开，可以设置＜A＞标记的target属性值为那个FRAME的name值。
而且，我们还可以设置打开目标为当前可见的任意一个FRAME，而不局限于本身的FRAMESET。
目标可能是一个嵌套的FRAMESET中的FRAME，也可能是其他窗口中的FRAME。
但是如果目标FRAME不存在，就会产生一个带有目标FRAME名字的新窗口。
下面举个例子说明一下，假设有一个简单含2－FRAME的FRAMESET，文件名叫做home.html，代码如下：＜HTML＞＜HEAD＞＜TITLE＞FrommCo home page＜/TITLE＞＜/HEAD＞＜FRAMESET cols="115,*"＞＜FRAME src="menu.htm"＞＜FRAME name="content" src="main.htm"＞＜/FRAMESET＞＜/HTML＞文件menu.htm在左边的FRAME中，其中有一系列链接，点击它们后新内容将在右边的叫做content的FRAME中打开。
下面是menu.html的代码：＜HTML＞＜HEAD＞＜/HEAD＞＜BODY＞＜P＞＜BR＞＜IMG src="Images/tmp_logo.gif" alt="FrommCo"＞＜P＞＜A href="main.htm" target="content"＞Main page＜/A＞＜P＞＜A href="mission.htm" target="content"＞Our mission＜/A＞＜P＞＜A href="staff.htm" target="content"＞Our staff＜/A＞＜P＞＜A href="splash.htm" target="_parent"＞FrommCo splash page＜/A＞＜/BODY＞＜/HTML＞请注意最后一个链接中target的定义为_parent，这属于4个特殊的保留值。
它们是：_parent：在当前FRAMESET位置显示新href。
_top：在当前整个窗口位置显示新href，比如本身FRAMESET位于另一个FRAMESET中。
_self：强制在当前FRAME中显示新href。
_blank：在新窗口中显示href。
表示客户端图形地图的＜AREA＞标记同样可以应用target属性，比如：＜AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page"＞还有一种经常的情况是：Web页面中的大部分或者全部链接都要求在一个特别的FRAME中打开。
这时，可以在页面的＜HEAD＞代码区使用＜BASE＞标记设置默认的target，然后再分别定义特殊链接的target 值。
修饰FRAMEFRAMESET不仅在宽度、高度等方面具有可控制的数值，在美观方面也同样可以精确设置。
默认情况下，FRAMESET的FRAME间有一个凸起的边沿，表示分割效果。
如果不喜欢这个，想营造“无缝连接”的效果，可以在＜FRAME＞标记中设置FRAMEborder=0来消除它。
在3.0及高版本的Navigator和Internet Explorer中，如果在＜FRAMESET＞标记中设置FRAMEborder=0，那么除了设置为FRAMEborder=1的FRAME外，所有其他FRAME的边沿都将消失。
虽然设置了FRAMEborder=0，有些浏览器仍旧会在FRAME间保留一些边沿的颜色痕迹。
这时，可以在＜FRAMESET＞标记中添加FRAMEspacing=0（对Internet Explorer）或者border=0（对Navigator和Opera）实现真正的无缝连接。
请看下面的代码是如何使用这些属性的：＜HTML＞＜HEAD＞＜TITLE＞FrommCo home page＜/TITLE＞＜/HEAD＞＜FRAMESET cols="115,*" FRAMEspacing=0 border=0＞＜FRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no＞＜FRAME name="content" src="main.htm" FRAMEborder=0＞＜/FRAMESET＞＜/HTML＞上面的代码中有2个新的属性：noresize表示锁住FRAME而不允许使用鼠标改变大小，scrolling=no 表示屏蔽FRAME的滚动条，scrolling=yes表示允许，scrolling=auto表示根据显示内容需要自动显示滚动条。
浮动FRAME浮动FRAME是HTML4.0规范中的一个定义，目前的浏览器都支持它。
不象FRAMESET表示的分割区样子，一个浮动FRAME作为一个内置对象存在于Web页面上，其样式就象一个页面上的一个图形或者一个applet。
浮动FRAME使用＜IFRAME＞标记，它具有与＜FRAME＞相同的大多数属性设置，包括：name、src、marginwidth、marginheight、FRAMEborder以及scrolling。
同时，它还具有与图形或者applet一样的height、width和align属性。
而且，浮动FRAME遵循与普通FRAME一样的target原则：我们可以通过它的name来指向它。
本原则适用于在任一类型FRAME中的浮动FRAME，反之易然。
浮动FRAME中的没有traget的链接指向它本身，而_parent链接则指向包含＜IFRAME＞的文档所在的FRAME或者窗口。
比如：＜IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left＞＜IMG src="Images/noFRAME.gif" alt="You can't see the floating FRAME"width=150 height=200 hspace=10 align=right＞＜/IFRAME＞＜BR＞＜A href="one.htm" target="floater"＞Show one.htm＜/A＞＜P＞＜A href="two.htm" target="floater"＞Show two.htm＜/A＞＜P＞＜A href="start.htm" target="floater"＞Bring back start.htm＜/A＞注意，对应支持＜IFRAME＞标记的浏览器，任何位于＜IFRAME＞和＜/IFRAME＞间的内容都将忽略。
DreamweaverCS6 HTML CSS DIV JavaScript网站开发框架与浮动框架
第七章框架与浮动框架课堂案例:企业邮箱网页地制作7.1网站地后台管理页一般是由框架结构组成,本章通过学习框架地网页组织形式,制作企业邮箱地页面。
准备知识:框架与框架集7.2•创建框架7.2.2•删除框架与增加框架7.2.4•框架与框架集介绍7.2.1•保存框架7.2.3•在框架使用超链接7.2.5框架与框架集介绍7.2.1框架是网页常用地布局方式与网页间地组织形式,经常使用在网站地后台,邮箱,论坛等结构为一个浏览器窗口划分为若干区域并且每个区域显示不同地网页文件地网页组成。
框架是网页经常使用地页面设计方式,其作用就是把网页在一个浏览器窗口下分割成几个不同地区域,实现在一个浏览器窗口显示多个HTML页面。
使用框架可以非常方便地完成导航工作,让网站地结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大地特点就是使网站地风格一致。
一个框架是由框架与框架集构成,框架是浏览器窗口地一个区域,它可以显示与浏览器窗口地其余部分所显示内容无关地网页文件;框架集也是一个网页文件,它将一个窗口通过行与列地方式分割成多个框架,框架地多少根据具体有多少网页来决定,每个框架要显示地就是不同地网页文件。
框架地HTML标签为<frame></frame>,框架集地HTML标签为<frameset></frameset>。
1创建框架打开Dreamweaver工具,创建一个新地站点名称为frame）,新建一个网页文件,暂时不保存。
在Dreamweaver地CS6版本,单击菜单栏地插入 HTML 框架然后选择菜单地具体框架结构。
2修改框架显示大小与框架属性方法一:修改框架在浏览器显示大小,将鼠标放到框架边框上,当出现双箭头光标时拖拽框架边框,可以改变框架地显示大小。
方法二:单击代码视图,在代码修改rows="80,*"或cols="80,*"地值,如修改为rows="169,*"或cols="257,*"。
DIV常见布局设计
DIV常见布局设计DIV布局是一种常见的网页设计布局方式，它通过使用HTML中的DIV元素（<div></div>），并通过CSS样式来控制其位置和样式。
DIV布局具有灵活性和可扩展性，可以实现各种不同的网页布局和设计效果。
下面将介绍一些常见的DIV布局设计。
1.基本网页布局基本网页布局是最常见的DIV布局设计。
一般情况下，一个网页可以分为页眉（header）、导航栏（navigation）、主内容区（content）、侧边栏（sidebar）和页脚（footer）等部分。
使用DIV布局可以为每个部分创建一个DIV元素，并使用CSS样式来控制其位置和样式。
可以使用浮动、定位、flex等CSS属性来实现不同的布局效果。
2.两栏布局两栏布局是一种常见的DIV布局设计，适用于文章页面、博客页面等。
页面的内容一般分为主内容区和侧边栏两部分。
可以使用浮动或flex布局来实现。
主内容区和侧边栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。
3.三栏布局三栏布局是一种常见的DIV布局设计，适用于网站的主页面、新闻页面等。
页面的内容一般分为左侧栏（left sidebar）、主内容区和右侧栏（right sidebar）三部分。
可以使用浮动或flex布局来实现。
左侧栏和右侧栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。
4.响应式布局响应式布局是一种适应不同设备和不同屏幕尺寸的DIV布局设计。
可以使用CSS媒体查询来检测设备的屏幕尺寸，并根据不同的尺寸应用不同的CSS样式。
可以通过设置不同的宽度、隐藏或显示一些元素来实现响应式布局。
此外，还可以使用CSS框架如Bootstrap等来实现响应式布局。
5.瀑布流布局瀑布流布局是一种以瀑布流式排列元素的DIV布局设计，适用于图片墙、相册等页面。
可以使用flex布局或JavaScript库如Masonry等来实现瀑布流布局。
可以设置每列的宽度，元素会按照一定的规则排列在不同的列中，形成瀑布流效果。
div讲解及使用
div讲解及使⽤DIVDIV 在编程中⼜叫做整除，及只得商的整数DIV元素是⽤来为HTML⽂档内⼤块（block-level）的内容提供结构和背景的元素。
DIV 的起始标签和结束标签之间的所有内容都是⽤来构成这个块的，其中所包含元素的特性由DI V标签的属性来控制，或者是通过使⽤样式表格式化这个块来进⾏控制。
CSS单元的位置和层次-div标签div接⼝=数字图像数据接⼝我们都知道，在⽹页上利⽤HTML定位⽂字和图像是⼀件“令⼈⼼痛”的事情。
我们必须使⽤表格标签和隐式GIF图像，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显⽰的结果发⽣变化。
⽽CSS能使你看到希望的曙光。
利⽤今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你⾃⼰慢慢看吧！Cascading Style Sheets（CSS）是DHTML 的基础。
CSS ⽤来设定你⽹页上的元素是如何展⽰的。
Cascading Style Sheets Positioning（CSS-P）是CSS 的⼀个扩展，它可⽤来控制任何东西在⽹页上或是说在窗⼝中的位置。
请你记住这两个名词：CSS 和CSS－P。
● 1．使⽤DIV 标签（div）当我们使⽤CSS-P 的时候，我们主要把它⽤在DIV（division）tag 上。
当你把⽂字，图像，或其他的放在DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或⼲脆叫“layer”。
⽽中⽂我们把它称作“层次”。
所以当你以后看到这些名词的时候，你就知道它们是指⼀段在DIV 中的HTML。
使⽤DIV 的⽅法跟使⽤其他tag 的⽅法⼀样：This is a DIV tag .如果单独使⽤DIV ⽽不加任何CSS-P, 那么它在⽹页中的效果和使⽤是⼀样的。
但当我们把CSS-P ⽤到DIV 中去以后，我们就可以严格设定它的位置。
div标签用法
div标签用法
Div标签是一个比较常用的标签，它可以用来创建块级元素，用来分隔文档的主体部分和其它部分，以完成特定的布局功能。
语法：
<div>....</div>
用途：
1、块级容器：div标签经常用作页面的容器，用来定义一段范围，控制样式，让其他内容放在它的框架里，独立于页面其他部分；
2、页面布局：div标签可以把页面划分成多个区域，用来创建网页多栏式布局；
3、结构美化：div标签可以增加页面的完整性，把内容分块，把不同类型的内容放在不同的div中；
4、表单：表单的所有组件（文本框、单选框、复选框、按钮等）通常包含在div标签里面；
5、特殊元素：div标签可以包含地图、视频、画廊等特殊元素。
使用div标签需要注意以下几点：
1、div没有预定义的样式，它只是一个填充容器，我们需要使用css来定义样式；
2、div标签的语义化不强，有时候不能精准的表达文档的结构；
3、不同的浏览器对div的支持程度不一，有可能会有一些兼容性问题；
4、div标签多次使用，会增加html文件的长度，不利于文件的
优化。
DIV与TABLE布局的使用
DIV与T ABLE布局的使用下面的代码表示三行三列的布局模式，没有用css来控制这些DIV。
•源代码：•<html>•<head>•<title>T ABLE布局</title>•</head>•<body>•<!-表格布局-->•<table border=1 width=100%>•<tr height=100 bgcolor=blue>•<td colspan="3">网页头部</td>•</tr>•<tr height=250>•<td bgcolor=orange>网页体部左边</td>•<td bgcolor=yellow>网页体部中间</td>•<td bgcolor=green>网页体部右边</td>•</tr>•<tr height=80 bgcolor=gray>•<td colspan="3">网页底部</td>•</tr>•</table>•</body>•</html>•下面用DIV布局显示相同的效果，上面的效果先用HTML标记设置好，然后使用CSS代码控制它，代码是用DIV加上样式属性布局。
•源代码:•<html>•<head>•<title>DIV布局</title>•<!-表格布局-->•<diV style="background:blue;height:100px;">头部</div>•<div id="content">•<div style="width:33％;•height:250px;float:right;background:green;">网页体右边</div>•<div style="width:33％;•height:250px;float:left;background:orange;">网页体左边</div>•<div style="width:33％;•height:250px;float:left;background:yellow;">网页体中间</div>•</div>•<div style="height:80px;background:gray;">网页底部</div>••</body>•</html>在代码中用DIV表示，有的DIV被样式属性修饰，如高度、背景等，上面的方式占用代码比较多，有一种更好的方法，可把重复的样式表示成样式文件，再链接进来，本节中所提出的样式链接(以后会学到)在下面章节会具体讲解，代码中演示了提出样式到一个样式文件中的设置。
DIV的使用
如何设计字体的大小以提高访客的用户体验？现在国内绝大多数的站点都用CSS把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率，当屏幕的分辨率一定时，如果你感到字太小，阅读有困难，在非标准浏览器中就无能为力了，所以说，如果把单位改成em，那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查看>文字大小来改变字的大小。
1.在body标签里将字体尺寸设为62.5%，如果在body里没有CSS设定，那么浏览器默认的大小是1 6px，设了62.5%，则字体尺寸=16px*62.5%=10px，这时你能用em方便地设大小了，比如你需要用12 px，只要设1.2em。
Example Source Code []body{font-size:62.5%;}h1{fong-size:1.4em;/*h1字的大小相当于14px*/}2.body里字体尺寸设为75%，则字体尺寸=16px*75%=12px，1em相当于12px.Example Source Code []body{font-size:75%;}h1{fong-size:1.5em;/*h1字的大小相当于18px*/}第一种方法更好些。
如果是英文网站的话，还可以设定为small、x-small......当然这样一来，对页面的设计要求会高一些。
div+css网页布局如何合理的运用html标签？div+css网页布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Tab le的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。
什么时候应该用DIV?虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:Example Source Code []<div id="header">这里就是头部框架里要写的内容</div>当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.本人观察了下一个著名网站的首页代码,它的头部定义代码如下:Example Source Code []<ul id="navbar"><li id="articles"><a href="/articles/" title="Articles">Articles</a></li><li id="topics"><a href="/topics/" title="Topics">Topics</a></li><li id="about"><a href="/about/" title="About">About</a></li><li id="contact"><a href="/contact/" title="Contact">Contact</a></li><li id="contribute"><a href="/contribute/" title="Contribute">Contribute</a></li><li id="feed"><a href="/feed/" title="Feed">Feed</a></li></ul><h1 id="masthead"><a href="/"><img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a></h1>Example Source Code []<div id="ish"><a href="/issues/214" title="Issue 214">No. <em>214</em></a></div>定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义其它最常用的布局标签h1这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^ul这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)b这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择h2h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p如何用CSS控制图片自适应大小？图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。
第9讲 div盒子模型的简单应用
图片
代码
<div id="box1">美股8个交易日4次熔断，道指跌破两万点</div> <div id="box2">
<p>历史上第5次，8个交易日内第4次，美股又熔断了！道琼斯指数时隔三年多跌破20000点关 口，抹去特朗普任内所有涨幅。</p> <p>当地时间18日12点56分左右，标普500指数跌超7%触发第一级熔断机制，美股暂停交易15 分钟。再度开始交易时，三大股指继续下探，道琼斯指数一度跌超10%。</p> <p>至此，道琼斯指数从2月12日高点以来，只用了35天、24个交易日就跌掉了近10000点。 </p>
</div> <div id="box3"> <img src="img/djia.jpg" alt="道琼斯指数日k线" title="道琼斯指数日k线">
<br>道琼斯指数日k线 </div>
html代码
代码
*{margin: 0; padding: 0;}
#box1{height: 50px; background-color: #f8f8f9; border-bottom: 1px solid #ccc; text-align: center; line-height: 50px; font-family: "黑体"; font-size: 30px;}
#box2{padding-top: 20px 10px 0 10px; line-height: 30px; text-indent: 2em;}
html之div
html之div先了解⼀些什么是盒⼦模型margin（外边距/边界）border（边框）padding（内边距/填充）所以元素的实际占位尺⼨=元素尺⼨+padding+边框宽度第1层：盒⼦的边框(border)，第2层：元素的内容(content)、内边距(padding)第3层：背景图(background-image)第4层：背景⾊(background-color)第5层：盒⼦的外边距(margin)从这个层次关系中可以看出，当同时设置背景图和背景⾊时，背景图将在背景⾊的上⽅显⽰margin外边距可统⼀设置或四边分开设置，如图：margin:0px; 统⼀设置⽔平居中包含两种情况：块级元素的⽔平居中：margin:0px auto;⽂字内容的⽔平居中：text-align: center;垂直居中：常见的单⾏⽂字的垂直居中可设置⽂字所在⾏的height与⾏⾼样式属性⼀致，⽐如：div{width: 400px;height: 400px;line-height: 400px;/*⾏⾼与div⾼度⼀致*/}理解浮动属性⾸先要搞清楚，什么是⽂档流？⽂档流：浏览器根据元素在html⽂档中出现的顺序，从左向右，从上到下依次排列。
浮动属性是CSS中的定位属性，⽤法如下：float: 浮动⽅向(left、right、none);left为左浮动、right为右浮动、none是默认值表⽰不浮动，设置元素的浮动，该元素将脱离⽂档流，向左或向右移动直到它的外边距碰到⽗元素的边框或另⼀个浮动元素的边框为⽌。
浮动⽰例，没有使⽤浮动的3个DIV：HTML结构代码：<div id="first">第1块div</div><div id="second">第2块div</div><div id="third">第3块div</div>CSS样式代码：#first, #second, #third{width:100px;height:50px;border:1px #333 solid;margin:5px;}执⾏效果如图：样式中加⼊ float:left;执⾏效果如图：⽰例：<html><head><title>div布局⽰例</title><style type="text/css">div{width:100%;}#header{background:red;height:20%;color:blue;}#main{width:100%;height:60%;color:green;}.mid{float:left;}#divleft{background:yellow;height: 100%;width: 20%;}#divmid{background:pink;height: 100%;width: 60%;}#divright{background:purple;height: 100%;width:20%;}#footer{background:blue;width:100%;height:20%;color:red;}</style></head><body><div id="header">top div</div><div id="main"><div id="divleft" class="mid"> left div</div><div id="divmid" class="mid"> center div</div><div id="divright" class="mid"> right div</div></div><div id="footer">bottom div</div></body></html>View Code。
DIV的属性
DIV的属性一、常用属性1、Height:设置DIV的高度；Width:设置DIV的宽度。
2、margin:用于设置DIV的外延边距，也就是到父容器的距离。
margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距离；margin-top: 到父容器上边框的距离；margin-bottom:到父容器下边框的距离。
3、padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）。
padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]：需要注意的是padding 设置的距离不包括在本身的width和height内(在IE7和FF中)，比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。
4、border:设置DIV的边框样式；display:设置显示属性。
其值有block、none；float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none；background:设置DIV的背景样式；background后可直接跟背景的颜色、背景图片、平铺方式等样式。
也可以用以下属性分别设置。
background-image:指定使有的背景图片;background-repeat:背景图象的平铺方式。
其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺); background-position:在DIV中定位背景位置。
其值有top bottom left right的不同组合。
html中div的用法
html中div的用法HTML中Div的用法HTML是一种标记语言，用于创建网页和其他在线文档。
其中，Div是HTML中最常见的标签之一，它可以帮助开发者将网页内容分组并进行样式控制。
下面将详细介绍Div的用法。
1.什么是Div？Div全称为“division”，意为“分割”，它是HTML中最常见的块级元素之一，用于将文档分成若干个独立的部分，并为这些部分设置样式。
2.如何使用Div？在HTML中使用Div非常简单，只需要在代码中添加<div>标签即可。
例如：<div><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码使用了一个<div>标签来包含一个标题和一个段落。
这个<div>标签可以被视为单独的区域，并且可以对该区域进行样式控制。
3.如何设置Div的样式？通过CSS（层叠样式表）可以对页面元素进行样式控制，包括对Div进行样式设置。
下面介绍几种常见的设置方式：（1）设置背景色可以使用background-color属性来设置背景色。
例如：<div style="background-color: #f1f1f1;"><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码设置了一个灰色背景的Div。
（2）设置边框可以使用border属性来设置Div的边框。
例如：<div style="border: 1px solid black;"><h1>这是一个标题</h1><p>这是一个段落。
</p></div>上述代码设置了一个黑色边框的Div。
（3）设置宽度和高度可以使用width和height属性来设置Div的宽度和高度。