css中,位置偏移

html-css021

css中,位置偏移,第1张

1、新建html文件。

2、创建两个div,并赋予id。

3、为两个div设置宽高和背景,并设置左右浮动。

4、预览效果如图。

5、创建第三个div。

6、为第三个div设置宽高和背景。

7、预览效果如图。

注意事项:

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

是浏览器的默认样式

你在#divtest ul中加上margin:0padding:0

#divtest ul{

margin:0padding:0

position:absolute

height:200px

width:1500px

overflow:hidden

border:#C03 dotted 1px

top:0

left:0

}

三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。这4个属性被称为偏移属性。

top/right/bottom/left

值: <length>| <percentage>| auto | inherit

初始值: auto

应用于: 定位元素(也就是position值不是static的元素)

继承性: 无

百分数: 对于top和bottom,相对于包含块的clientHeight;对于right和left,相对于包含块的clientWidth

这些属性描述了距离包含块最近边的偏移。top描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值,会把定位元素的上外边距边界下移,若为负值,则会把定位元素的上外边距移到其包含块的顶端之上。类似地,left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值,会把定位元素的外边距边界移到包含块左边界右边,而负值则将其移到包含块左边界左边。所以,正值会导致向内偏移,使边界朝着包含块的中心移动,而负值会导致向外偏移。

偏移定位元素的外边距边界时,带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动

[注意]定位元素的边界是指定位元素margin外侧的边界;包含块的包含区域是指包含块的border内侧的padding+content区域

希望我的回答可以帮到您哦