PHP.4-DIV+CSS标准网页布局准备工作（下）
DIV+CSS标准网页布局准备工作
区块属性(区块模型)
|
属 性 |
描 述 |
|
Margin(注) |
是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负值边际。如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界margin-right属性分别设置与上级元素的外边距。 |
|
padding |
用于设置区块的内边距属性，是边框和元素内容之间的间隔距离。与margin属性相返，但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写 |
|
float |
设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left值，右漂浮right值 |
|
clear |
清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值 |
页面内容居中，并随浏览器的大小的变动而变动【margin、padding】
<html>
<head>
<title>DIV+CSS</title>
<style>
body{
background:green;
margin:0px;
padding:100px 50px;
} #main{
width:100%;
height:400px; background:yellow; }
</style>
</head>
<body> <div id="main"> </div>
</body> </html>
区块框浮动【float】
虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。
<html>
<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px; } #one{
float:left;
width:200px;
height:200px;
background:red;
} #two{
float:left;
width:220px;
height:200px;
background:green; } #three{
float:left;
width:200px;
height:220px;
background:blue;
} </style>
</head>
<body> <div id="one">
aaaa
</div> <div id="two">
bbbb
</div> <div id="three">
ccccccc
</div> </body> </html>
行框和清理【clear】
在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。clear:both #both:两边都不挨着浮动块，right：右边不挨着</div class="clear"> </div> #相当于换行作用<html>
<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px; } #one{
float:left;
width:200px;
height:200px;
background:red;
} #two{
float:left;
width:200px;
height:200px;
background:green; } #three{
float:left;
width:200px;
height:200px;
background:blue; }
.clear{
clear:both;
} </style>
</head>
<body> <div id="one">
aaaa
</div> <div id="two">
bbbb </div>
<div class="clear"> </div>
<div id="three">
ccccccc
</div>
</body> </html>
使用区块框设计页面布局
区块居中布局
1、高度和宽度固定的区块居中（position、margin）<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px;
} #one{ width:100%;
height:100%;
background:red;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px; } </style>
</head>2、高度和宽度可变的区块居中(padding)<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px;
padding:200px;
} #one{ width:100%;
height:100%;
background:red; } </style>
</head>3、布局页面局中
设置两列浮动的布局<html>
<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px; } #one{
float:left;
width:300px;
height:400px;
background:red; } #two{
float:right;
width:200px;
height:200px;
background:green; ｝设置三列浮动的布局【盒子嵌套盒子】<html>
<head>
<title>DIV+CSS</title>
<style>
body{ margin:0px; } .left {
float:left;
width:600px;
}
#one{
float:left;
width:200px;
height:400px;
background:red; } #two{
float:right;
width:200px;
height:400px;
background:green; } #three{
float:right;
width:200px;
height:200px;
background:blue; }
/* .clear{
clear:both;
}
*/ </style>
</head>
<body> <div class="left">
<div id="one">
aaaa
</div> <div id="two"> bbbbbbbb
</div>
</div> <div id="three">
cccccccccccccccc
</div> </body> </html>设置多列浮动的布局
PHP.4-DIV+CSS标准网页布局准备工作（下）的更多相关文章
- PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- div+css对网页进行布局
div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- DIV+CSS列表式布局（同意图片的应用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
随机推荐
- ThinkPHP中U方法与url的四种访问模式
ThinkPHP中U方法的用处主要是完成对url地址的组装,在模板中使用U方法而不是固定写死URL地址的好处在于,一旦你的环境变化或者参数设置改变,你不需要更改模板中的任何代码.在模板中的调用格式需 ...
- Android中Cursor（游标）类的概念和用法
使用过 SQLite 数据库的童鞋对 Cursor 应该不陌生,如果你是搞.net 开发你大可以把Cursor理解成 Ado.net 中的数据集合相当于dataReader.今天特地将它单独拿出来谈, ...
- 《Java数据结构与算法》笔记-CH4-1栈的实现
class StackX{ private int maxSize; private long[] stackArray; private int top; public StackX(int siz ...
- POJ动态规划题目列表
列表一:经典题目题号:容易: 1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 1189, 1191,1208, 1276, 13 ...
- RabbitMQ （三） 发布/订阅 -摘自网络
这篇博客中,我们会做一些改变,就是把一个消息发给多个消费者,这种模式称之为发布/订阅(类似观察者模式). 为了验证这种模式,我们准备构建一个简单的日志系统.这个系统包含两类程序,一类程序发动日志,另一 ...
- ffmpeg 研究
ffmpeg -codecs | grep mp3 可以查看ffmpeg是否把mp3编解码模块编译进去了. libmp3lame is the mp3 encoder for ffmpeg. It n ...
- cloud maintenance of OpenNebula
OpenNebula 4.4.1 maintenance release,官方建议当前的生产环境使用3.x or 4.x的其它版本; php调用curl工具伪造ip Upgrading from Op ...
- 最近的bug列表总结（C++)
最近写了一大段代码,抽象得厉害,容易绕进去,因为写单测的代价很大(借口),所以很多问题到联调的是否才发现. 而且花费了很大的经历才查出来,主要问题有如下几个问题 1. 变量未初始化 具体来说,就是指针 ...
- 条件编译#ifdef的妙用详解_透彻
这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部 分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条 ...
- hud 1166 敌兵布阵
http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory ...