页面宽度

在很早很早的时期，各大网站的底部都会有这么类似的一句声明：最佳分辨率 sss x ttt，比如 648 * 480、800 x 600、1024*768 之类的。这通常是因为网站制作方，仅仅针对一种分辨率进行了页面制作，并且，由于当时各种浏览器对于样式解析的各种不同标准，造成了对各种宽度、各种浏览器的适配存在着根本困难，所以，通常是用 csshacker 的方式来实现不同的浏览器适配之后，就再没有耐心毅力去实现不同分辨率的适配了。所以，在出现弹性布局之前，对页面设置一个同一的宽度，用来适配最多的分辨率是一个通用的方式。

CSDN 文盲老顾的博客，https://blog.csdn.net/superwfei
老顾的个人社区，https://bbs.csdn.net/forums/bfba6c5031e64c13aa7c60eebe858a5f?category=10003&typeId=3364713

嗯，现在各位小伙伴的电脑，那怕笔记本，分辨率也不会太低了，那么，我们就以1200宽度作为我们 html 主体的宽度，超出的宽度，则直接用空白进行填充好了。

使用样式居中

在样式引入到 html 页面后，越来越多的渲染效果设置，被放到了样式中，而将原有的和渲染相关的属性都渐渐弃用了。比如，现在的人们制作页面，已经很少再使用的 font 标签，被 span 代替。除了正文内容外，很少使用的段落标签 p，被 div 代替，嗯。。。。这个有其他原因，因为段落标签不支持嵌套。

而div就是代替 p 进行布局的另一个块级元素了。

  <p style="border:1px solid #ccc;">
	第一段段落
	<p style="border:1px solid #ccc;">第二段落</p>
	被切开的第一段落，形成了第三段落
  </p>
  <div style="border:1px solid #ccc;padding:5px;">
	外层 div
	<div style="border:1px solid #ccc;padding:5px;">内层 div</div>
  </div>

在这里插入图片描述
嗯，现在，我们来实现 div 的居中，包括设置宽度，一个很常见的样式 margin ，也就是外边距，将横向距离设置为 auto 即可。

  <div style="border:1px solid #ccc;padding:5px;width:1200px;margin:0px auto;">
	外层 div
	<div style="border:1px solid #ccc;padding:5px;">内层 div</div>
  </div>

在这里插入图片描述
在样式设置中，margin（外边距）和 padding（内边距）这样的，都是四个样式的统一缩写，展开的话，可以写作 margin-top、margin-right、margin-bottom、margin-left。margin 这种统一的写法则是省略的写法，当只有一个值的时候，表示四个方向的设置是一致的。当有两个值的时候，分别表示纵向设置（top 和 bottom）和横向设置（right 和 left）。当具有三个值的时候，表示 top ，横向，bottom。四个值。。。。嗯不说了。

margin:0px auto; 这里的设置方式，就表示纵向外边距为0像素，横向外边距为自动，左边和右边边距一样。。。这样就达成了居中效果。

使用浮动

在使用浮动布局之前，我们首先要明确一个概念，就是之前表格布局文章中提到的，html 的内容，是自上而下的顺序渲染的，而块级元素，则会铺满整个行。

使用浮动，则是将块级元素，自动变成了行内元素方式，但是，这里说一个但是，他所占用的高度，不会少，而是根据元素，或指定的高度，强制占用了一整个高度。同时，float 设置的浮动，是在同一个层深的，也就是说，不管嵌套了几层元素，只要设置 float，他们单独是一个层。嗯。。。说的可能比较绕，咱们看个实例：

  <div style="border:1px solid #ccc;width:600px;">
	<div style="padding:5px;margin:5px;float:left;border:1px solid #ccc;">第一个 float 向左</div>
	<div style="padding:5px;margin:5px;float:left;border:1px solid #ccc;">第二个 float 向左</div>
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第三个 float 向右</div>
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第四个 float 向右</div>
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第五个 float 向右</div>
  </div>
  <div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第N个 float 向右</div>
  <div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;clear:both;">第N + 1个 float 向右</div>

在这里插入图片描述
在本例里，前边5个 div 嵌套在一个父级元素内，各自浮动，这都好理解，但是，注意第 N 个 div，他是和父级元素同级的，但同样浮动在第五个 div 旁边了，只有 N + 1，因为设置了清除浮动 clear:both；所以他从新开了一行，开始浮动。当该行放不下浮动的元素时，浮动元素就会再开一行去进行渲染。

浮动布局，在某些场景，使用是非常方便的，比如，我们列出所有文件及其图标、文件名，也就是 windows 的小图标模式，就是这样的例子。

float:left/right; 设置元素左右浮动，在浮动时，自动将块级元素修正为行内元素。
clear:both; 清除所有浮动效果，即从当前元素开始，所有浮动从新计算，从新开辟占用的行。

对于不确定数量的内容，我们通常都是使用一个可增加滚动轴的父级元素，内部使用浮动方式存放其子项，来满足我们的 ui 设计。

浮动元素外的剩余空间

对于浮动元素外的剩余空间，是非浮动内容可以利用的空间，比如上边的例子中，我们可以在第五个浮动前，追加一些文本内容，可以看出一些效果来。

  <div style="border:1px solid #ccc;width:600px;">
	<div style="padding:5px;margin:5px;float:left;border:1px solid #ccc;">第一个 float 向左</div>
	<div style="padding:5px;margin:5px;float:left;border:1px solid #ccc;">第二个 float 向左</div>
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第三个 float 向右</div>
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第四个 float 向右</div>
	这里放一些纯文本，这里放一些纯文本，这里放一些纯文本，这里放一些纯文本，这里放一些纯文本，
	<div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第五个 float 向右</div>
  </div>
  <div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;">第N个 float 向右</div>
  <div style="padding:5px;margin:5px;float:right;border:1px solid #ccc;clear:both;">第N + 1个 float 向右</div>

在这里插入图片描述
可以看到，剩余的空位被文字内容占满了，而文字换行，也会影响到浮动布局，第五个浮动，就是在文字内容的最后一行上进行的。

同时，可以对比上下两个截图，有文字内容的，父级 div 被撑开高度了，而没有文字内容的，父级 div 的高度为0，因为浮动元素时单独在一个渲染层上进行的。。。。

使用浮动的高度细节

在使用浮动布局的时候，需要注意每个浮动元素的高度，这次用一个带有高度设置的浮动布局，来更深的了解一下浮动的机制。

  <div style="border:1px solid #ccc;width:600px;">
	<div style="padding:5px;float:left;border:1px solid #ccc;height:110px;">第一个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第二个 float 向左</div>
	<div style="padding:5px;float:right;border:1px solid #ccc;">第三个 float 向右</div>
	<div style="padding:5px;float:right;border:1px solid #ccc;">第四个 float 向右</div>
	<div style="padding:5px;float:right;border:1px solid #ccc;height:40px;">第五个 float 向右</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第六个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第七个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第八个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第九个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第十个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第11个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;height:30px;">第12个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第13个 float 向左</div>
	<div style="padding:5px;float:left;border:1px solid #ccc;">第14个 float 向左</div>
  </div>
  <div style="padding:5px;float:left;border:1px solid #ccc;">第15个 float 向左</div>
  <div style="padding:5px;float:left;border:1px solid #ccc;">第16个 float 向左</div>
  <div style="padding:5px;float:left;border:1px solid #ccc;">第17个 float 向左</div>
  <div style="padding:5px;float:left;border:1px solid #ccc;">第18个 float 向左</div>
  <div style="padding:5px;float:right;border:1px solid #ccc;">第N个 float 向右</div>
  <div style="padding:5px;float:right;border:1px solid #ccc;clear:both;">第N + 1个 float 向右</div>