前端学习（二）

什么叫浮动：

问题：现在有两个div，我希望将两个div放在同一行上？

页面上块级元素单独占一行，行内元素可以一行放多个，这样的格式叫做标准流（文档流），normal flow.(浏览器默认排序方式)。

如果要让两亿块级元素同时放在一行中，这个时候就必须脱标（脱离标准流。）

1  Float: left/float:right

浮动分为两种：左浮动，右浮动。

浮动可以理解为：在一个游泳中，标准流是我们在池底放盒子，浮动就相当于放的这个盒子“飘起来了”。“飘起来了”的盒子会遮住池底盒子。

浮动的特点：

1）浮动找浮动，不浮动找不浮动

2）浮动的盒子中上对齐，并且左浮动与右浮动位置相反的。

 3）浮动只会影响当前盒子以下的内容，以上的内容不会影响。

总结：浮动的出现，使得页面的布局更加灵活，但是一般情况能够不使用浮动的话，尽可能的不要使用浮动（浮动相对于SEO来说不太友好，因为它脱离标准流）。

4）如果一个div没有设置高，这个div中的所有的元素都浮动了，那么这个div的高是0;

 

Css中常用的属性：

List-style:none;去掉li标签之前小点

text-decoration:none;去掉超链接的下划线

Margin: 0 auto;让div居中（div是一个块级元素）

让文字居中：

水平：text-align:center;

垂直：line-height:height;

浮动：

Float:left/right;

清除标签中默认的内外边距：

* ｛margin: 0 ;padding: 0｝

背景图片可不可以将容器撑开。

一个div不能放两张背景图片。

SEO中有个特点：

如果将关键字全部放在一起，那么SEO会认为你这是在作弊。

 

约定：在制作网页的过程中，如果涉及到了页面的宽高的问题，最好用width和height去解决，才用padding,最后才考虑margin.

因为margin在布局中会存在兼容性的问题，

1）ie6的双边距bug。（使用了浮动，浮动之后用margin-left）

2）边距合并现象：（只出现块级元素：不包括行内元素以及行内块级元素）

如果两个同级的div上下排序，上面div有下margin,下面的div有上margin，就会出现边距的合并现象，两者之间的取值是按最大值来计算。

3）父子元素之前的边框合并现象：

 

如果父子元素之间没有边框，那么给子元素设置一个margin-top,那么父元素也会拥有这个属性。

解决方法：

A)给父元素设置边框。

B)给父元素一个属性：overflow:hidden.(这个强制记住)

 

4）如果给页面的第一个div设置浮动，页面的第二个div不浮动，但是有margin-top,那么将来第一个浮动的div会加上第二个div的margin-top显示。

浮动影响：

如果在一个大的没有设置高的div中有两个小的div，那么这个大的div的高就是这两个小div之和，但是一旦两个小的div都浮动了，那么大的div就没有高了---------浮动之后div不会撑开父容器。

浮动清除：

 

1）（不属于清除浮动，可以使用这种方法消除浮动影响）

设置具体的高度。（可以用尽量用）

但是，有时间页面上的某些容器，不能直接设置高度，那么高度不能确定，必须使用清除浮动。

 2）清除浮动：

Clear:left   clear:right   clear:both