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

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

上海网站建设 

服务热线:021-61394118

上海联楷科技

如何控制网站内元素的位置?

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

如何控制网站内元素的位置?
这里要提到HTMl网站css中的clear属性

和<br>标签的属性一样,clear属性告诉浏览器把标签的内容放置在与“浮动”元素相邻的位置,还是放在下面的第一行。文本围绕着浮动元素排列,如围绕着具有align=left或align=right属性的图像和表格,或者任何float属性被设置为除none以外的任何值的HTMl/XHTML元素来排列。

clear属性的值可以是none/left/right和both。默认值none表示浏览器正常操作,把标签的内容放置在与浮动元素任何一侧相邻的位置,前提是有足够的空间来这么做。left值防止元素防止元素放置在浮动元素左侧相邻的位置;right防止把元素放置在浮动元素右侧相邻的位置;而both则禁止标签内容与任何浮动元素相邻。这种样式的效果与用<br>标签的clear属性处理过的标签效果一样,因此:h1{clear:left}与用<br clear=left>处理每个<h1>标签得到的效果一样。

clip属性

通常情况下,元素的内容在元素显示空间内是完全可见的。clip属性在元素的显示空间内定义了一个浏览窗口,允许我们将不需要的元素隐藏起来,并将注意力集中在内容的某个区域或某方面上。

clip属性的默认值auto,这意味着浏览窗口与该元素的框相匹配。相反,还可以在元素的显示区域指定一个创建明显的浏览器窗口的形状。目前,CSS2支持的惟一一种形状是矩形,这点是邮recet关键字表示的。例如:

p{overflow:hidden;

clip:rect(15px,-10px,5px,10px)}

4个值分别定义了剪切矩形的上、右、下和左边缘。每个值都是相对于为元素定义的框边绷而言的偏移量。因此,在这个示例中,剪切区域的上部低于元素框15像素,右边缘距离框的右边为10像素,下边是框下部以上5像素,左边级则距离框的左边为10像素。

请注意,clip属性只有在元素的overflow属性设置为visible以外的某个值时才会生效。当overflow设置为visible时,不会发生剪切,clip属性将被忽略。

float属性

float属性将标签的显示空间指定为一个浮动元素,并使文本按一定方式环绕它排列。总的说来,它与图像和表格的align属性类似,但可以用到任何元素上,包括文本、图像和表格中。

float属性按受以下三个值之一:left、right和none(默认值)。none表示禁用float属性。其他值则与align属性值一样,告诉浏览器把文本按某一侧对齐,并允许其他内容与之相邻。

困此,浏览器将把指定为“float: left”的标签内容(包括其边界、补白和边框)靠着当前文本流的左边界排列,以后的内容将流向它的右面,并在标签文本的下面。“float: right”则把标签内容放在文本流的右边,使得其他内容流动到左面,在标签内容的下面。

虽然主要是用于表格和图像,但把float属性应用到文本元素上也是很合适的。例如,下面的示例将创建一个“淅入”标题,正文围绕着标题文字流动

h2{float:left;

text-align:center;

margin-right:10px} 浏览器都支持这个属性

网站浮动属性
图使用带有文本块的float属性来创建渐入标题



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

上海联楷网络新闻