布局阶段

布局

在div+css布局之前采用的是table表格的布局方式。由于table表格布局有不足和缺点，后来慢慢就采用了div+css布局的方式。
table布局的缺点：
（1）标签结构多，复杂，影响网站性能；
（2）不利于搜素引擎抓取信息，影响网站的排名；
（3）table一旦设计完成很难通过css让他展现新的面貌；
table布局的优点：
（1）表格布局，使得结构位置更简单；
（2）对于学习初期，table更容易理解；
（3）数据化的存放更合理；
在WEB前端开发中,HTML,CSS,JS分别代表着结构，展示，和交互。网页HTML代码主要使用DIV将内容模块化，用CSS控制其显示效果。
div+css布局优点：
（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您 的网站不会因为将来网络应用的升 级而被淘汰。
（2）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。
（3）支持浏览器的向后兼容，使您的网站都能够有很好的兼容性。
（4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
（5）搜索引擎更加友好。
（6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
盒模型是和table布局的一个不同点，首先要弄懂这个盒模型，是DIV排版的核心所在。
（1）display: 元素的显示方式
block: 块元素 (默认);
inline: 行元素
inline-block : 行内块元素(内联块元素)
none: 无(隐藏) 不单单是视觉上的，页面布局中也彻底消失。不占位置

 .bt{
			width: 200px;
			height: 200px;
			border: 2px solid;
			display: inline-block;
			}

块元素： 独占一行,可以设置宽高以及内外边距 ，具备盒模型的属性。
消除inline-block 导致的元素间隔
方法1： 删除标签之间的空格和换行
问题： 代码可读性差
方法2： 将父元素的字体设置为0px
问题： 通过继承性，也会影响自身的字体大小。
同时可能导致布局混乱(em之类参考父元素字体的值无法使用)
方法3： 给父级(-6px)和自身(0px) 设置词间距或字母间距
问题： 较小。 但是需要给每一个元素设置。比较繁琐
方法4： 删除掉闭合标签 (不推荐使用)
（2）标准盒模型
标准盒模型：元素(块元素或者内联块)的实际大小 = 内容 + padding + border。width/height 只是去设置盒模型中的内容区域。之前所学习的对齐方式： text-align line-height vertical-align全部都是在内容区域中的对齐。而盒模型的属性是针对整个内容区域来布局调整 ，其中padding 会增加元素的实际占位大小， padding用来调整自身 子元素 的位置。

padding: 内间距
一个值： 上下左右
两个值： 上下，左右
三个值： 上, 左右, 下
四个值： 上，右，下，左

.box{
		width: 200px;
		height: 200px;
		border: 2px solid black;
		padding: 50px 20px 5px 70px;
}

margin: 外间距
作用： 调整元素自身和其他元素之间的距离
注意点：
1. 左右间距中，外间距是相加的和
2. 上下间距中，相加的和
备注: 会出现上下间距合并，取最大值。

.box{
	width: 200px;
	height: 200px;
	background: red;
	display: inline-block;
	word-spacing: 0px;
	margin: 20px 10px;
}