欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS+DIV小结3_html/css_WEB-ITnose

程序员文章站 2022-04-21 11:07:39
...
一、CSS语法??margin
 margin : auto | length
参数:
  auto : 值被设置为相对边的值  
 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。请参阅长度单位
说明:
  检索或设置对象四边的外延边距。
  如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。   
如果只提供一个,将用于全部的四边。   
如果提供两个,第一个用于上-下,第二个用于左-右。   
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。   
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
margin: margin-top/margin-right/margin-bottom/margin-left;
p#onemargins
{
margin:12px;
}
所有边外补白全部为12px
等价于下面的定义
p#onemargins
{
margin-top:12px;
margin-right:12px;
margin-bottom:12px;
margin-left:12px;
}
为margin-width指定两个值
margin: margin-top/margin-bottom margin-right/margin-left;
p#twomargins
{
margin:12px 5%;
}
上下边外补白是12px,左右边外补白是5%(相对于整个页面)
等价于下面的定义
p#twomargins
{
margin-top:12px;
margin-right:5%;
margin-bottom:12px;
margin-left:5%;
}

二、CSS overflow 属性   
定义: overflow 属性设置当元素的内容溢出其区域时发生的事情。
  可能的值  值 描述   
visible 默认。内容不会被修剪,会呈现在元素之外。   
hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。   
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。   
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
三、CSS position属性
CSS的Position很重要,有以下几个值:static,relative,absolute,fixed。
Static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
假设要定位的块元素id为myDiv,设置其position为absolute,则myDiv的位置为
1.如果myDiv的父元素具有position属性,不管其值为absolute还是relative,都会相对于父元素的原点坐标进行定位;
2.如果myDiv的父元素没有position属性,则会相对于它的最亲一代具有position的祖宗元素的原点坐标进行定位;
3.如果myDiv的所有父元素都没有position属性,则会相对于body元素的原点坐标进行定位。
这里的原点坐标是指元素的在上角顶点的位置。myDiv的位置由left和top属性指定,省略left和top则left和top均为0。
例如文档有如下结构:








指定myDiv的position为absolute,left为50px,top为20px;
如果只有f1有position属性,则myDiv就以f1的top和left进行定位,
Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:



相关标签: CSS+DIV小结3