CSS整体布局
主要内容：
一.外边距margin与填充padding
二.浮动float与显示display
三.主布局
四.定位方式posotion
一.外边距margin与填充padding
1.margin设置外边距，即该容器与容器外的容器的距离。padding设置填充，所谓填充就是该容器的内容与容器边界的距离。
2.一般地，我们需要出示margin和padding都为0，即：*{margin:0;padding:0;}。
3.具体展示如下：
1）设置两div，初始化时代码及效果如下：
2）然后设置下面那个div的外边距margin为10：
可以看出因为黄色div设置了外边距，两个div出现了分离。
具体的margin设置：http://www.runoob.com/css/css-margin.html
3）接下来我们看看padding的效果，首先是没有填充：
之后设置填充为5px：
可以看出里面的字与容器边界产生了距离。
3.有一点需要牢记的是：我们平常设置的width、height，只不过是内容content的宽度和高度，如果再为容器设置marign或padding，则容器的实际大小要更大。此点需要谨记，否则很容易写出一些错乱的布局。一个容器的架构大致如下：
二.浮动float与显示display
1.div是一个块级元素（还有<p>等等），所谓块级元素就是不管紧随其后还有没有空余的位置，在其后面的元素都需要另起一行。但有时候我们需要两个div显示在同一行（可以用span，但听说span快要被遗弃了），那么就可以设置display或者folat了。鄙人习惯用float，因为感觉display有点难控制。
有关float的更详细内容：http://www.runoob.com/css/css-float.html
1）首先是display，设置为“display: inline-block”：
没有效果，那估计两个都要设置：
两个div是放在同一行了，但两者之间居然出现了间隙，而且设置margin为0也解决不了。所以还是决定不用display了。
（display设置为inline，则div会直接坍塌在内容那块区域，就是说如果div里面没有任何东西，那么div就不会显示出来。所以在这方面还是不要用display。）
2）接下来看看float的效果，一般设置元素向左浮动：“float: left”：
终于得到理想中的效果，但注意：第二个元素也要设置flaot: left，否则的话第二个div会以最左边为开始，而不是第一个元素的右边为开始。如下：
三.主布局
有个上面的基础，我们就可以做一个最常用的布局了。
1.首先，我们需要定义主布局的宽度和高度，一般有两种方式：
1）body{ width: 100%; height: 100%; }，这种方式为铺满屏幕，所以直接设置body的长和宽都为100%即可。
2）div#main{ width: 1000px; height: 100%; margin：0 auto;}，这种方式只利用了整个屏幕的中间部分。由于body是最底层的容器，如果只利用其中间部分，则需要另设一个div去占据body的中央。
2.个人习惯只利用中间部分，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> <style type="text/css">
*{
margin:0;
padding: 0;
}
div#main{
width: 800px;
height: 100%;
margin: auto;
}
div#title{
width: 800px;
height: 40px;
background-color: pink;
}
div#catalog{
width: 200px;
height: 100%;
background-color: red;
float: left;
}
div#content{
width: 600px;
height: 100%;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div id="title"></div>
<div id="catalog">
asadasdasdadasdasd<br>
asadasdasdadasdasd<br>
asadasdasdadasdasd<br>
asadasdasdadasdasd<br>
asadasdasdadasdasd<br>
asadasdasdadasdasd<br>
</div>
<div id="content">
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
12a1da1da21dasd<br>
</div>
</div>
</body>
</html>
效果如下：
最上面可设置标题导航，其基本设置是固定width和height。一下层的左边可设置工具栏、目录等，其基本设置是固定width，然后height设为100%，即随内容而伸展。最右边则可用于显示主要内容，其基本设计也是固定width以及将height设置为随内容伸展。
四.定位方式posotion
对于position定位更详情的介绍：深入理解css中position属性及z-index属性，以下内容仅介绍position: fixed，即容器的位置固定在浏览器的某个位置，而不随滚动条的滑动而改变。这个属性可用于导航栏或者令人可恨的广告的设置，即浮窗。将position设置为fixed之后，margin、float什么的都失去效果了，只有left、right、top、bottom等有关定位的设置有效。
效果如下：
滚动之后，可见下面的内容往上移动了，但标题栏还是固定不动：
最后，滚动到底部：
CSS整体布局的更多相关文章
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- [div+css]网站布局实例二
重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 《CSS网站布局实录》学习笔记（三）
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
随机推荐
- jar包解压与打包
首先感谢大神的指导:https://blog.csdn.net/mr_pang/article/details/47028921 1.首先准备一个能运行的jar文件,我们使用第三方解压工具进行解压wi ...
- spring+springMVC+hibernate整合
首先我们要知道hibernate五大对象:,本实例通过深入的使用这五大对象和spring+springMVC相互结合,体会到框架的好处,提高我们的开发效率 Hibernate有五大核心接口,分别是:S ...
- Oracle的substr函数简单用法与substring区别
substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('Hello World',0,1) //返回结果为 'H' *从字符串第一个字符开始截取长度为1的字符串 subst ...
- PyCharm搭建Spark开发环境 + 第一个pyspark程序
一, PyCharm搭建Spark开发环境 Windows7, Java 1.8.0_74, Scala 2.12.6, Spark 2.2.1, Hadoop 2.7.6 通常情况下,Spark开发 ...
- warning: push.default is unset; its implicit value is changing in Git 2.0 from 'matching' to 'simple'.
'matching'参数是 git 1.x 的默认行为,其意是如果你执行 git push 但没有指定分支,它将 push 所有你本地的分支到远程仓库中对应匹配的分支. 而 Git 2.x 默认的是 ...
- emacs的常用配置备份
据说有人搞丢了自己的emacs的配置,然后一怒之下抛弃了emacs投身vim,我还是做个emacs配置的备份吧, 虽然我现在也算不上emacs的发烧友. 这里的配置大多是从网上参考的,最多的是下面的链 ...
- OpenResty — Nginx全能插件版
官网: http://openresty.org/ 虽然是中国人做的,但没几个汉字..... 我用Nginx,是这样一个过程: 1. 系统rpm中的nginx,能让其跑起来 2. 玩配置文件 3. 玩 ...
- Linux 在不重启的情况下识别新挂载的磁盘
在使用 Linux 时,有时候会因为初始时磁盘空间分配估计不足,使用中需要将挂载点扩容的情况,这就需要我们挂载新的磁盘.但是如果我们在 Linux 运行过程中挂载磁盘, Linux 又不能在不重启的情 ...
- unity shader 编辑器扩展类 ShaderGUI
这应该unity5才出的新功能了,今天看文档时刚巧看到了,就来尝试了一下. 效果如图: shader 的编辑器扩展分为2种方法: 是通过UnityEditor下的ShaderGUI类来实现的,形式比较 ...
- Unity 游戏对象消失 enable，destroy与active的区别
gameObject.SetActive(false):是否在场景中停用该物体,停用后Hierarchy窗口呈灰色,用Find函数也找不到.如果该物体有子物体,要用SetActive Recursir ...