css列表样式与定位属性

分类 html

一、列表样式


列表样式可以设置其列表符号,列表图片(代替列表符号),列表符号的位置。

list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。

list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)

list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)

list-style: 这是综合属性,可以设置上述几个。


二、定位属性


定位就是指把元素(标签)放在哪个位置。

实际上,每个元素都有个定位属性:position。其有4个值:

1,position:static ——静态定位;——所有元素的初始定位方式就是静态(没有额外使用position或浮动的时候)

2,position:relative; ——相对定位:其实就是指一个元素在其父盒子中本来该放的位置(静态位置)的一个相对值(错位值)。必须使用left和top配合来设置该值。

a)举例:position:relative; left:10px; top:15px;

3,position:absolute; ——绝对定位;指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置,则会相对网页主体(html标签)。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。

4,position:fixed; ——固定定位;有点类似绝对定位,但其是相对于整个“可视窗口”来设置的定位,(绝对定位是相当于网页的版面的绝对值)。固定定位的盒子是以“窗口”为参照系,而绝对定位和相对定位的盒子是以网页为参照系。


三、标准流与非标准流:


流:水流的流——所有“水”(物体)往一个方向“流过去”——挤压。

标准流:就是原始的html标签在网页中的原始表现——在遵循块元素和行内元素的基础上,全都往“右上角”挤靠过去。

非标准流:使用position的非静态定位方式影响的元素位置,或者使用浮动而影响的元素的位置。


相关推荐:html教程css3教程