之前对div的css布局一直有点半知半解，只其然却不知其所以然，到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版，然后跟着练习了一下，特在此记录，备忘。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>div+css布局练习</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body{padding:0px;margin:0px;}

#main {margin:auto;padding:0;background: yellow;width:90%;}

#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto; height:50px;}

#content { width:80%; margin:0 auto;min-width:700px;}

#side { background: #99FF99; height: 60px; width: 50%; float: left; }

#main1 { background: #99FFFF; height: 60px; width: 50%; float: left;}

#waibian2 {width:80%; margin:0 auto;clear:both;}

#side2 {float:left;width:205px;}

#waibian3 {width:80%; margin:0 auto;clear:both;}

#side3 {float:left;width:205px;}

#main3 {margin-left:210px;}

#waibian4 {width:90%;background:#CCFFCC;margin:auto;text-align:center;}

#libian1 {width:150px; height:80px;background:#FFFF66;float:left;}

#libian2 {width:200px; height:80px;background:#FFFF33;float:right}

#libian3 {height:80px;background:#FFCCFF;}

</style>

</head>

<body>

<!-- 设置居中 -->

<div id="main">

    <div id="layout">此处显示  id "layout" 的内容</div>

</div>

<!-- 设置外层的宽度为80%,并设置一个最新宽度值，里面的div按百分比自适宜 -->

<div id="content">

  <div id="side">此处显示 id "side" 的内容</div>

  <div id="main1">此处显示 id "main" 的内容</div>

</div>

<!--图片跟文字一行，并且文字在超出图片的高度后自动从图片的下面换行 -->

<div id="waibian2">

    <div id="side2">

        <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" />

    </div>

    <div id="main2">

    Javascript[1] 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能，js的作用也主要在实现网页的一些特效，css难以实现的特效，通常和Jquery，Ajax,联合使用.

    </div>

</div>

<!--图片跟文字一行，并且文字在超出图片的高度后还是在同一列 -->

<div id="waibian3">

    <div id="side3">

        <img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="80" />

    </div>

    <div id="main3">

    Javascript[1] 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能，js的作用也主要在实现网页的一些特效，css难以实现的特效，通常和Jquery，Ajax,联合使用.

    </div>

</div>

<!--左右div固定宽度，中间自适应，外边div宽度百分比并居中 -->

<div id="waibian4">

    <div id="libian1">这是左边的DIV固定宽度</div>

    <div id="libian2">这是右边的DIV固定宽度</div>

    <div id="libian3">这是中间的DIV，自动适应</div>

</div>

</body>

</html>

运行效果图：

布局主要影响因素图解：

margin和padding的顺序是：上、右、下、左。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

注意：

当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器，这时需要加如下CSS解决这个问题：

overflow:auto; zoom:1;

/**

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。

**/

DIV+CSS布局重新学习之float/margin/padding的更多相关文章

  1. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. DIV+CSS布局重新学习之使用A标签和CSS制作按钮

    这里主要利用A元素的伪类来实现: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hove ...

  3. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  4. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  5. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  6. div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  7. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

随机推荐

  1. 实现观察者模式(Observer Pattern)的2种方式

    在观察者模式中有2个要素:一个是被观察对象,另一个是观察者.但被观察对象的状态发生改变会通知观察者. 举例:把订阅报纸的人看作是观察者,把报纸看作被观察对象.每当有新的新闻就要通知订阅报纸的人.本篇分 ...

  2. dubbo白名单通过filter，spring web通过拦截器或者filter即可

    在开发中,有时候需要限制访问的权限,白名单就是一种方法.对于Java Web应用,Spring的拦截器可以拦截Web接口的调用:而对于dubbo接口,Spring的拦截器就不管用了. dubbo提供了 ...

  3. FT项目开发技术点（二）

    1.mybatis二级缓存,指的的是将数据缓存,而非对象,而非获得的list.缓存将数据库中的数据,是数据,缓存到内存中.之后将数据每次重新加载到list中,所以每次生成的list对象都是不同的,li ...

  4. Unity中一键创建常用文件夹

    Unity中一键创建常用文件夹 说明 项目测试版本Unity5.3. 这个一个小工具:功能非常简单,就是一键给新建工程添加所有文件夹.到此结束. 但是具体咋操作呢? 与把大象装进冰箱一样,三步,下载代 ...

  5. 游戏编程之Unity常用脚本类的继承关系

    前言学习Unity开发引擎的初学者会接触大量的脚本类,而这些类之间的关系往往容易被忽略.本文对Unity引擎开发中的一些常用类及其关系进行了简单的归纳总结. 博文首发地址:http://tieba.b ...

  6. spring Annotation 组件注入

    spring 注解的分类 启动spring自己主动扫描功能 <context:component-scan/> 1.@Repository: 它用于将数据訪问层 (DAO 层 ) 的类标识 ...

  7. 《深入理解C#(第3版)》

    <深入理解C#(第3版)> 基本信息 原书名:C# in depth 作者: (英)Jon Skeet 译者: 姚琪琳 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:978 ...

  8. vld,Bounds Checker,memwatch,mtrace,valgrind,debug_new几种内存泄露检测工具的比较,Valgrind Cheatsheet

    概述 内存泄漏(memory leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,在大型的.复杂的应用程序中,内存泄漏是常见的问题.当以前分配的一片内存不再需要使用或无法访问时,但是却 ...

  9. Word 页眉插入自动标题（页眉显示章节标题）

    做word文档时有时候需要将章节标题加到页眉中,这里实现自动获取和自动更新页眉里面的标题 1.双击页眉,输入固定文字作为页眉左边的显示,然后敲2下table键,为接下来插入自动标题做好准备,如下图: ...

  10. Redis:ERR operation not permitted

    Redis服务开启之后: D:\Redis\redis>redis-server.exe redis.conf 那么另外开一个命令窗口 D:\Redis\redis>redis-cli.e ...