html如何用div布局（html中div布局）

如何使用

html的div

div现在一般网页的布局都是基于div

css。如果是div，就是通过。

& ltdiv & gt

& ltdiv & gt& ltp & gt& lt/p & gt；& lt/div & gt；

& lt/div & gt；

div的嵌套用来完成整个网页的布局。你可以把div理解成一个块，然后在div块里写P等标签，再用CSS修饰一下，比如高度，宽度，背景。

& ltdiv style = & quot背景:# f90文本对齐:居中；& quot& gt测试& lt/div & gt；

& ltdiv style = & quot背景资料:& gt& ltspan & gt使用者:& lt/span&gt。& lt输入类型= & quot文本& quotstyle = & quot边框:1px纯色# ccc宽度:200px高度:20px& quot& gt& lt/div & gt；

& ltdiv style = & quot背景资料:& gt& ltspan & gt使用者:& lt/span&gt。& lt输入类型= & quot文本& quotstyle = & quot边框:1px纯色# ccc宽度:200px高度:20px& quot& gt& lt/div & gt；

html怎么让p上下贴着？

这个功能用css完全可以做得到，通过设置两个p的margin就可以，如果离的远，就用margin为负值，总之实现起来是可以的。

p用法？

首先要认识DIV是什么，p是HTML标签“”。

DIV用法的语法内容p作为html网页中常用的标签，其默认样式是独占一行，其CSS样式需要重新赋予。

比如对p宽度、高度等样式设置、内部字体大小、字体颜色都需要通过CSS来实现。

通俗认识p，p作用就是实现布局、实现对内容样式控制、实现各种各样的布局效果。DIV的用法实例，这里通过对p设置不同CSS样式，观察其效果。

DIV+CSS实例完整HTML源代码：<!DOCTYPE html><html><head><meta charset="gb2312" /><title>p的用法在线演示www.pcss5.com</title><style>p{ margin-top:10px}/* css注释说明：

对p都设置上间距10px */.pcss5-1{font-size:16px}/*

设置css字体大小16px */.pcss5-2{color:#F00}/*

设置css字体颜色为红色 */.pcss5-3{ background:#000; color:#FFF}/*

设置CSS背景颜色为黑色和字体颜色为白色 */.pcss5-4{ border:1px solid #F00; height:60px}/*

设置css边框和CSS高度60px */</style></head><body>普通内容一

我字体大小为16px我字体颜色为红色我背景为黑色字体为白色布局设置边框和高度</body></html>

css中p的用法？

DIV本身就是容器性质的,不但可以内嵌table还可以内嵌文本和其它的HTML代码；CSS是CascADIng style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页数的网页的外观和格式。

Div+CSS标准具有以下优点:
1、因为采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。

2、结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。

3、兼容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。

4、缩短改版时间，因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

5、强大的字体控制和排版能力，CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。

6、提高易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7、更好的扩展性。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint等。

8、更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。

9、表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。

10、更方便搜索引擎收录，并获得更高的评价。用只包含结构化内容的HTML代替嵌套的标签，主次分明，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

11、Table表格布局灵活性不大，你只能遵循 table tr td 的格式。而p你可以 p ul li 也可以 ol li 还可以 ul li……

12、Table表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

13.以前一些必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

html模块布局方法？

html模块的三种布局方法

1、流动布局（html网页默认的布局方式）

特点：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动布局(float)

特点：默认布局下，块状元素独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。

如下

p{

width:200px;

height:200px;

border:2px red solid;

float:right;

}

3、层模型

特点：如果我想一个p在另外一个p的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed

需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，

然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。