css元素定位
- 块级元素与行内元素
- absolute、relative、fixed与static定位
块级元素即div、h1 、p等元素,在整个页面中相当于一块区域,其内部元素垂直布局。而行内元素则是strong、span等元素,相当于行区域,其内部元素水平布局。这也是为什么span元素内不能嵌套div元素的原因。可以使用css的display改变元素的框类型:
/*改变span为块级元素*/
span{
display:block;
}
/*改变div元素为行内元素,使其内部元素水平布局*/
div{
display:inline;
}
/*隐藏某个区块内的所有内容,不占文档空间*/
#myDiv{
display:none;
}
css的不同定位方式:
定位方式 | 作用 |
---|---|
static | 默认的定位方式 |
relative | 相对布局,较为简单,设置时建议仅使用top与left对其设置如left:20px,top:10%,则表示相对于原来位置往右偏移20px,向下偏移父容器高度的10%。 |
fixed | 固定定位,相对于整个界面的设计,最常用于导航栏。不占文档空间,所以其同级元素使用aligin进行定位时将失败。 |
absolute | 绝对定位,不占文档空间,其定位相当于对最近的已定位父级元素定位 |
注:aligin-*为相对于同级文档元素进行定位,top、bottom、left、right等则对于不同定位方式有不同含义。absolute与fixed两种方式均不占文档空间,所以可能造成空间重叠,可用z-index进行设置。