css中的display以及position属性

咱们都知道,元素分为行内元素和块级元素,在页面布局中,咱们经常须要让行内元素具备块级元素的特性,或者使块级元素转换成行内元素,这就要使用咱们的display属性了.

　　　咱们先定义三个div:

 

 

以上的三个div都是块级元素,输出的结果为:

块级元素的特征就是各占一行.

接下来用display将第二个div转换成行内元素:(先看一下几个现象)

1.

结果变成了:

2.

将后面两个div都转成行内元素:

结果是:

3.

只把第二个元素转换为行内元素,增长div的高度:

结果是这样:

4.

把全部的div转换成行内元素:

结果:

以上结果是由什么致使的,咱们来分析一下:

首先,三个div是块级元素,输出的结果就是从上到下依次排列.

当我使用display将第二个div转换成行内元素时,想像中的应该是第一个div独占一行第二个div和第三个div排在第三行,可是结果倒是现象1那样,各占一行,结果与想象不一致,因此咱们要多实践.

接下来我继续让第二个和第三个div都转换成行内元素,后两个div排在了一行(现象2).

最后把全部的div转成了行内元素,三个div都转成了一行(现象4).

不知道大家注意到没有:

1.(现象2)中,第二个div转变成了行内元素以后,我宽度没有任何的改变,可是结果就是被转变的div没有宽度.

2.在(现象3)中,我特地增长了div的高度,第二个div没有任何变化

3.转变成行内元素的div顶部紧跟着上一个div

其实这些都是行内元素的特性,既然都到这里了,我仍是把它写出来供你们参考吧:

1.针对行内元素设置的宽和高都是无效的.

2.行内元素的margin-left,margin-right有效,margin-top,margin-bottom无效.

 

以上现象已经充分显现出了行内元素的特性.也体现出了display的做用.咱们再来看一个将行内元素转换成块级元素的例子:

先设置边框及元素:

结果:

好像看不出什么,那接下来:

将第二个span用display设置成块级元素,增长span长度和高度的设置:

结果:

经过这个例子:咱们看到第二个span已经转成了块级元素,设置的宽和高都起了做用.

display是页面布局中经常使用的属性,也是比较重要的属性,咱们应该熟练掌握他的用法并加以应用.

 

 

再介绍一个position属性:

position是一种定位的方法,它分为相对定位,绝对定位,静态定位以及固定定位:

先进行以下设置:

输出结果:

咱们看到了div的位置如上图所示:

先介绍相对定位(relative):

对.inner进行设置:

结果:

内层div的位置在外层div内发生了移动,它的参照对象是自己的div,不会脱离常规流,也不会对其余的元素形成影响.

下面看绝对定位(absolute):

结果:

这个结果说明了绝对定位使元素脱离常规流,它的参照点变为了容器的基点,也就是浏览器的基点.

可是,若是它外层的div也有设置position属性的(除了static),那么它的参照点就是外层div的左上顶点.

以下图:

 

结果:

静态定位:

是position的默认属性:

设置:

结果:

静态定位会使元素正常定位并按照元素出现的顺序依次格式化,如上图.

 

固定定位(fixed):

将元素固定在某一位置,不随滚动条滚动而移动,这里不作详细的讨论了.