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页面理解盒 ...

随机推荐

Java-note-字符串转换为基本值
Integer.parseInt() and Double.parse.double() 例: Integer.parseInt("123") 得到常量123
Android自定义TTF字体
前言: 在Android Design中一个设计手册.在设计手册中有常用的UI图标,图标大小规范等. 其中,有一个TTF字体,以前感觉没什么用.但是我在学习时,常看到有许多开发者使用Google 提供 ...
Spark中的编程模型
1. Spark中的基本概念 Application:基于Spark的用户程序,包含了一个driver program和集群中多个executor. Driver Program:运行Applicat ...
SSHFS
SSHFS(SSH文件系统) 是一个文件系统客户端程序,使用它可以将远程服务器上的目录挂载在本地直接访问可以在网站http://igikorn.com/sshfs-windows-8/内下载
mysql 查看锁表解锁
-- 查看那些表锁到了show OPEN TABLES where In_use > 0;-- 查看进程号show processlist;--删除进程 kill 42236:
linux 和 android 源码的 cross reference (即网页浏览代码的引用)
linux: http://lxr.free-electrons.com/ 相当好 android: http://androidxref.com
CUDA常见问题之无法在c文件中调用cu文件中定义的函数
当在C源文件中调用cu文件中定义的函数时,会出现undefined reference的问题,而在C++源文件中调用cu文件中定义的函数时则不会出现这个问题. 出现上述问题的原因是,nvcc编译器采用 ...
Java学习笔记（五）：异常处理
异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.而在我们的程序中需要对这些异常进行捕获和处理来避免程序卡死等情况. Ja ...
【JDBC】事务的使用
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5868750.html 关于事务的理论知识.ACID特性等等,网上太多了,在此不一一重复.本文主要着重事务 ...
getopt使用例子
getopt是linux下获取程序启动参数的函数 #include <unistd.h> int getopt(int argc, char * const argv[], ...

PHP.4-DIV+CSS标准网页布局准备工作（下）

PHP.4-DIV+CSS标准网页布局准备工作（下）的更多相关文章

随机推荐

热门专题