day6

布局步骤细化

1、在“当前版面”分出几个相对独立的区块（区块只分两种情况：纵向与横向）；

2、如果分出的是纵向区块，则每一个区块写出一个div就可以了（因为div本身就是自占一行的，则自然每个div就是一个纵向的区块了）；

3、如果分成的是横向区块，则：
a)同样每个区块首先写出一个div，且每个div都进行浮动（通常是一左一右，或两左一右，或一边倒）；
b)设置各个div需要的宽度及相关区域（padding，border，margin），但总和不超过当前父盒子的宽度；
c)有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错；
d)使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子：
i.在父盒子内部最后位置添加一个用于清除浮动的空div（<div style=”clear:both”></div>），
ii.对父盒子使用overflow:hidden;
iii.对父盒子设置一个固定的高度——适用于内部盒子高度固定的情况。

4、在上述每个分出的区块中，又当做“当前版面”做同样的分析与设计（重复1-3步）

html样式清除

html元素表现的差异性：虽然html被称为一种标准，但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。
最终，通常的做法是：我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。
比如很多标签有初始的margin，或padding，或字的大小或粗细，斜体等等效果，则我们使用一些css设置将这些初始表现全部“清空”，比如：
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
font-style:normal；
list-style-type:none;
}
这样之后，所有的每个标签所需要的表现，都需要我们自己来使用css设置。
实际应用中，我们一般都是使用一个通用的css文件来完成此工作。

margin-top：5px；
margin-right：10px；
margin-bottom:
margin-left:
margin: 可以使用1-4个值。

padding-top：5px；
padding-right：10px；
padding-bottom:

padding-left:
padding: 可以使用1-4个值。

background-color: 背景颜色
background-image: url(背景图的路径);
background-repeat: 设置背景图的重复特性，有：repeat(默认值），no-repeat，repeat-x, repeat-y
background-position: 需要两个值：水平位置 垂直位置。
background:综合属性可以设置背景的所有特性，包括上述所有。