前端学习(二)
什么叫浮动:
问题:现在有两个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