当前位置: 移动技术网 > IT编程>网页制作>CSS > CSS定位

CSS定位

2018年02月06日  | 移动技术网IT编程  | 我要评论

CSS定位

display属性可以用来改变生成框的类型,例如将属性设置为block,可以让行内元素表现的像块级元素,而如果将display设置为none,则让生成的元素根本没有框。这样该框及其所有内容就不会显示。

但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

<div>
some text
<p>Some more text.</p>
</div>

css有三种基本的定位机制:普通流,浮动和绝对定位
除非专门指定,否则所有框都在普通流中定位。

css position属性:
static
relative   相对定位
absolute   绝对定位
fixed    固定定位

h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}

相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}

<p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>

overflow: scroll;
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。
如果值为hidden,则会隐藏溢出的内容
如果值为auto,则会交给浏览器来自动处理溢出

设置元素形状
clip属性
rect(top,right,bottom,left)
clip:rect(0px 50px 200px 0px)

垂直排列图像
vertical-align的值:
text-top 元素顶端对齐字体顶端
middle 元素放置在父元素的中部
bottom 元素顶端对齐最低元素顶端
text-bottom 元素底端与字体底端对齐

设置元素的堆叠顺序 z-index
拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素前面
z-index的默认值是0,如果z-index是-1则会被置于另一元素之后

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网