关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

利用DIV+CSS建网站时精准定位网站块元素的位置

作者:佚名   时间:2014-03-19   分享到:

在网站初期建站布局时,会牵扯到一系列的元素位置定位问题,我们可以用下列属性来控制网站块元素的位置。
网站CSS的margin属性

和边框属性一样,不同的边界(margin)属性允许控制元素四周的空白区,也就是它的边框以外的部分。边界总是透明的,允许背景颜色或背景图像透过它显示出来。因此,可以只指定边界的大小:它没有颜色或显示样式。

margin-left、margin-right、margin-top和margin-bottom属性都按受长度或百分比值,指定元素周围保留多少空白。此外,关键字auto告诉能够识别样式的浏览器,要恢复到正常情况下元素周围的边界。百发比值是相对于元素宽度计算出来的。如果没有指定,默认边界是0。

以下都是有效的边界设定:

body{margin-left:lin; margin-top:0.5in; margin-right:lin}

p {margin-left: -0.5cm}

img{margin-left:10%}

第一个示例在整个文档的左右各创建了1英寸的边界,在文档上部创建了半英寸的边界。第二个示例把<p>标签向左边界左移了半厘米。最后的标例在<img>标签左侧创建了父元素宽度10%的边界。

如同缩略border属性一样,可以使用缩略边轮界属性来定义所有四个边界,用1到4个值按表8-1描述的顺序来设定四个边界的属性。使用这个标记,前面一个示例的<body>边界可以被指定如下:

body{margin:0.5in lin}

margin-left和margin-right属性与width属性相互作用来决定元素的总宽度。

网站CSS的padding属性

与边界属性一样,不同的补白(padding)属性允许控制元素周围补白区域,也就是元素内容区和边框之间的区域。

补白总是用背景色或背景图像来实现的。因此,可以只指路定补白的大小; 它没有颜色或显示样式属性。

padding-left、padding-right、padding-top和padding-bottom属性都接受长度或百分比值,指定能识别样式的浏览器应该在元素周围保留的空间。百分比值是根据元素宽度来计算的。默认补白是0。

以下是有效的补白设置:

p{padding-left:0.5cm}

img{padding-left:10%}

第一个示例在<p>标签内容及其左边框之间创建0.5厘米的补白,后一个示例在<img>标签左侧创建了一个等于父元素宽度10%的补白。

像缩略margin和border属性一样,可以使用缩略padding属性来定义所有四个补白量,用1~4个值按表描述的顺序来指定补白属性。

ovreflow属性

ovreflow属性告诉浏览器该如何处理溢出元素显示区域的内容。此属性的默认值是visible,它告诉浏览器要显示所有内容,即使内容超出了元素显示区域也要使其可见。

出于比较谨慎的考虑,你总是想要浏览器显示文档中的所有内容。但是在很少的情况下,元素可能会重叠在一起,这样的显示效果非常糟糕。为了避免这种麻烦,可以将ovreflow属性设置为hidden、scroll或者auto。

hedden值强迫浏览器隐藏所有雪中出分配空间的内容,使其对用户来说不可见。值scroll会为元素创建滚动条,浏览者用它就可以看到隐藏的内容。但是,即使内容没有超出显示范围,也会添加滚动条。

如果添加固定的滚动条,当动态文档中元素内容的大小发生变化时,可以确保滚动条不会变来变去。这样做的缺陷是滚动条会造成某种干扰,并转移人们的注意力。对ovreflow属性运用auto值就可以避免所有这些情况。当设置为auto时,滚动条仅会在需要的时候才出现。如果元素内容改变时没有出现剪切现象时,会从该元素中去除滚动条。

position属性

如果没有受到什么干扰,浏览器会把元素显示在一起,并在显示屏上按顺序为它们定位。将CSS2的position属性与top、bottom、left和right属性结合起来使用,就可以改变这种行为。

如果position属性设置为static,会应用常规的HTMl/XHTML布局和定位规则,并由浏览器决定元素的框的左边缘和上边缘。要使元素相对于其包含的流移动。可以将position属性设置为relative。在这种情况下,top、bottom、left和right属性都用来计算框相对于其在流中正常位置所处的位置。随后的元素都不会受到这种位置改变的影响,而且放在流中的方式就仿佛没有移动过元素一样。

将position属性设置为absolute,这样可以从包含文本流中去除元还给,而且随后的元素可以相应地向前移动。然后使用top、bottom、left和right属性,相对于包含块计算出元素的位置。这种定位允许将元素放在关于其元素的固定位置,查会随着包含元素的移动而移动。

最后,将position属性设置为fixed,这样会把元素相对于其显示的页面或窗口进行定位。像absolute定位一样,从包含流中去除元素时,其他的元素也会相应发生移动。top、bottom、left和right属性都用来设置元素相对于包含窗口或页面所处的位置。请注意,对于持续进行的媒体而言(像滚动的浏览器显示),元素只在所需的位置上显示一次。对于打印媒体来说,元素打印在每个页面指定的位置上。可以使用fixed定义将标题和角注放在浏览器窗口的上部和底部,或者放在每个打印好的页面的上边和下边。

top、bottom、left和right属笥都接受长度或百分比值。当position属性设置为relative时,百分份是以元素框的大小为根据的。当position设置为absolut或fixed时,百分比是以元素框的大小为根据的。当position设置为absolut或fixed时,百分比则以包含元素的框的大小为依据。在使用长度值时,它们指定了从元素的包含框对应的边缘开始的偏移量。例如,要定位一个其底部在浏览器窗口(或者打印的页面)底部上方1厘米处的元还给,会把position属性设置为fixed,并将bottom属性设置为1cm。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/news/20151229/n6620.html

上海联楷网络新闻