框(display)
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
可以使用 display 属性改变生成的框的类型。
display 属性规定元素应该生成的框的类型。
属性值:
- none 元素不会被显示;
- block 此元素将显示为块级元素,此元素前后会带有换行符;
- inline 默认。此元素会被显示为内联元素,元素前后没有换行符;
- 其他属性值见display属性值总结
定位(Positioning)
定位包括绝对定位,相对定位,浮动。
1.相对定位(属性值:relative)
相对定位是指相对于自身进行定位;如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
.box_2 {
position: relative;
left: 30px;
top: 20px;
}
2.相对定位(属性值:absolute)
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
.box_2 {
position: absolute;
left: 30px;
top: 20px;
}
3.浮动(float)
请见:浮动