浮动可以实现元素的水平排列,通过浮动和定位基本上就能定位整个页面的布局,西安SEO整理的笔记如下:
浮动设置方法:
第一种:设置display为inline
第二种:使用浮动。
定义语法:float:left|right|none|inherit
值 描述
left 元素向左浮动
right 元素向右浮动
none 默认值,元素不浮动,并会显示在其文本中出现的位置。
inherit 规定应该从父元素继承float属性的值。
浮动–双边距
在IE6下,块级元素有浮动和横向的margin时,横向的margin值会被放大成两倍。解决办法;设置display:inline
清除浮动
最小高度设置在IE6/IE7中,高度小于19px的元素,高度会当做19px来处理
解决办法:
1、设置font-size:0
2、设置over-flow:hidden;

定位position
语法:position:static(默认值,没有定位)|relative(相对定位)
absolute(绝对定位)|fixed(固定定位)
元素的位置通过“left”“top”“right”,以及“bottom”属性进行定位
相对定位relative
不脱离文档流(如果对一个元素进行相对定位,首先它将出现在它所在的位置上)通过设置垂直或者水平位置,让这个元素“相对于”它的原始起点进行移动。
1、仅使用left、right、top和bottom属性布局相对定位元素
2、仅使用margin属性布局相对定位元素的情况(left、right、top和bottom负值可改变文档流中所占空间的高度,会影响文档流中的其他元素位置。)
3、混合使用left、right、top和bottom与margin属性布局相对定位元素的情况
绝对定位absolute
格式position:absolute;
脱离文档流
偏移位置以最近的定位祖先元素做参照物,如果元素没有已定位的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,可能是BODY或者HTML元素)。
1、仅使用left、right、top和bottom属性布局绝对定位元素的情况(IE下参照物需设置宽度或者高度bottom和right属性才可以正确的定位)
2、仅使用margin属性布局绝对定位元素的情况
3、混合使用left、right、top和bottom与margin属性布局相对定位元素的情况
4、margin属性和top、bottom、right属性同时使用,如果同一方向偏移,它们的值会产生累加的效果。
5、绝对定位和相对定位的累加效果不同,如果top、bottom、left、right属性和margin属性偏移的方向相反,top、bottom、left、right属性值有效,反方向的margin属性值无效。
|
|
|
|
|
|
|
|
|
Text-to-speech function is limited to 200 characters