前端样式实践出真知系列（一）
1、float:对前面的元素不会有影响，无论是块级元素还是行内元素的float，对后面的元素的影响都是：先假设当前元素不存在，后面元素的位置应该是什么样子的，然后再考虑下，float后的元素的大小是其真正的大小（即使是块级元素，大小=内容+padding+border+margin），这个大小会对后一个元素形成挤压。
（备注：float和postion：absolution的主要区别是前者不会后受影响的内容重叠，会形成挤压，后者会重叠，相当于在另一个层上。）
使用float和postion：absolution的元素的宽高都不会影响父元素的宽高，因为已不属于父元素内容的一部分。
2、很多元素有其默认的属性，我们经常需要对其进行格式化（如dd默认右外边距-webkit-margin-start: ），不然会给我们带来不必要的麻烦。
3、父容器（如div），大小固定时，子容器（未设宽度时，默认父容器的宽度）内容超过父容器宽度时就会自动换行，除非子容器显示定义了宽度（可能比父容器宽，但父容器宽度不会随之增大）。
4、元素类型：inline和block,即行内元素和块级元素，这里有个要注意的点：像a、span、strong这些 inline类型的标签无法指定宽（width）和高（height）margin-top和margin-bottom也无效,pading-top和padding-bottom两个属性很奇怪，padding垂直部分会有背景颜色（如果设置了），但不霸占位置。（img行内元素除外 margin和padding都有用）
除了inline和block类型的显示，这里还有一个inline-block的显示方式。它显示的方式类似于inline，但是它相关的属性，例如，宽度，高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果，但是也有自己的问题。
5、使网页内容水平居中：设置块的宽度，并且设置：margin:0 auto; 最后最好再设置下 text-align:center;
6、两种盒子模型：W3C标准盒子模型（现代浏览器基本都是该模型）、传统IE盒子模型（只有IE6以下是这种模型，还有一些表单元素使用的是这种模型）。
7、box-sizing是CSS3的box属性之一（作用，显示声明使用哪种盒子模型）：
box-sizing ： content-box （标准W3c盒子模型，默认值）|| border-box （传统IE模型）|| inherit
8、一些行内元素 默认上下会留有空白，span标签上下都有，img元素默认底部会有块留白（间隙），去除办法，设置其display属性为block。
9、字重，font-weight,默认正常是 500，加粗，一般设为700。
10.div默认宽度为100%，即父容器的宽度，高度没有设置的话就是实际内容的高度。
11、vertical-align属性：
定义：
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
理解：
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
top :把元素的顶端与行中最高元素的顶端对齐
bottom:把元素的底部与行中最低元素底部对齐
middle：把此元素放置在父元素的中部。
总结：vertiacl-align，属性用于块级元素无效，只能用于行内元素，或td（表格的单元格）。
12、像 a span 这些标签是没有layout的，对齐设置宽高是无效的，可以设置器 dispaly为inline-block使之有效。
13、当父元素的木有设置border和padding是，第一个和最后一个子元素的margin是相对于父元素相邻的元素的。
14、background属性的熟悉：
（1）、background-color（背景图片）：background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。 background-color：#bbb；
（2)、 background-image 属性的默认值是 none，表示背景上没有放置任何图像。body {background-image: url(/i/eg_bg_04.gif);}
（3）、background-repeat 属性设置是否及如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。repeat-x，背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次。
(4)、background-position 属性设置背景图像的起始位置。（您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。）
默认值：0% 0%。
可能的值：
- top left 上左
- top center 上中
- top right 上右
- center left 中左
- center center 中中
- center right 中右
- bottom left 下左
- bottom center 下中
- bottom right 下右
(以上值位置可以颠倒，top和bottom用于垂直方向 left和right用于水平)
x% y% 第一个值是水平位置 第二个是垂直位置 （如果只设置一个值，则为水平位置上的值 垂直位置的值将为50%）
x y 水平 垂直 单位可以是像素。
(5)background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值：scroll（随着元素的其余部分移动而移动）
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
(6) background-size 属性规定背景图像的尺寸。
默认值：auto
length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
15、（1）text-shadow属性：
text-shadow: h-shadow v-shadow blur color; 水平阴影的位置|垂直阴影位置|模糊的距离|阴影的颜色 （前两个值是必须的）
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
box-shadow: 10px 10px 5px #888888; 盒子（如div ul）阴影，用法和文字阴影差不多
（2）text-transform : none | capitalize| uppercase| lowercase
capitalize 值代表将每个单词的第一个首字母转换成大写，其余无转换发生
(3) text-inedent:用于定义块级元素中第一个内容行的缩进。 text-indent:
：after 元素内容的前面
：before 元素内容的后面
