页面布局怎么设置

浮动可以实现元素的水平排列,通过浮动和定位基本上就能定位整个页面的布局,西安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;
页面布局怎么设置,西安seo

定位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属性值无效。

滚动到顶部