css标签和属性熟记：前端开发教程之CSS 五 显示属性

css标签和属性熟记：前端开发教程之CSS 五 显示属性2.显示效果，就是元素显示了之后，再设置它的一些效果，先简单的介绍4个效果：以上4个候选取值，就是display的取值详解，语法规范就是display：none/block/inline/inline-block，具体的按照实实际开发需求。练习的时候，可以每个都试一试，看看它们分别是什么效果。b)block：表示让这个元素以块级元素的形式显示，在它后面的元素是会另外起一行，这个时候的元素是可以自己定义它的高度和宽度的。如果你想设置一个行内元素的高和宽，或者想让一个隐藏了的元素显示的话，这个方式就是非常好的。c）inline：表示让这个元素以行内元素的形式显示，这个时候后面的元素会紧跟着前面的元素，并列显示，同事也不能设置高度和宽度。d）inline-block：表示让这个元素以行内块的形式显示，其实就是一个行内元素，不过这个行内元素可以设置高度和宽度了。如果你不想让这个元素的后面元素另外起

小编今天的分享主题是显示属性、列表属性、定位属性；

首先，我们先来了解一下关于显示属性

显示属性，它表示了一个框或者盒的表现，具有2层含义，分别是显示方式和显示效果；

1.显示方式，即display属性，具体是指一个框的表示形式，它自己固定的取值候选：

a)none：表示让这个元素不显示，隐藏起来，同时这个元素是不占据这个文档的空间的。

b)block：表示让这个元素以块级元素的形式显示，在它后面的元素是会另外起一行，这个时候的元素是可以自己定义它的高度和宽度的。如果你想设置一个行内元素的高和宽，或者想让一个隐藏了的元素显示的话，这个方式就是非常好的。

c）inline：表示让这个元素以行内元素的形式显示，这个时候后面的元素会紧跟着前面的元素，并列显示，同事也不能设置高度和宽度。

d）inline-block：表示让这个元素以行内块的形式显示，其实就是一个行内元素，不过这个行内元素可以设置高度和宽度了。如果你不想让这个元素的后面元素另外起一行又想改变这个元素的高度和宽度，那这个方法是极好的。

以上4个候选取值，就是display的取值详解，语法规范就是display：none/block/inline/inline-block，具体的按照实实际开发需求。练习的时候，可以每个都试一试，看看它们分别是什么效果。

2.显示效果，就是元素显示了之后，再设置它的一些效果，先简单的介绍4个效果：

a）visibility属性，即表示这个元素的显示与否，取值有visible（显示的，也是默认值）、hidden（不显示），这个属性看似和上诉的显示方式挺像的，它们有一个非常明显的区别就是，display为none时，它是不占据空间的；而visibility为hidden时，它虽然是看不见的，但是它会占据页面空间，可能会影响文档的排版问题，这需要特别的注意。

b）opacity属性，即表示这个元素的透明度，取值范围就是0至1，其中0表示完全透明，1表示完全不透明，记住取值越大，越不透明。

c）vertical-align属性，即表示这个元素的垂直对齐，取值可以有：top/middle/bottom baseline；基线对齐

d）cursor属性即光标，表示当你的鼠标在经过这个元素时候，鼠标显示的样式；取值有：pointer(手的形状)、default(默认)、crosshair(显示为“ ”)、text(显示为“I”)、wait(显示为 等待)、help（显示为“？”）

其次，我们了解一下列表属性

列表，就是讲这部分的内容按照一定的顺序排列，可以是横向的也可以是纵向的，她有列表样式属性、列表项图像属性、列表项位置、列表综合属性。

1.列表样式即list-style-type，分为有序列表、无序列表，有序的列表是按照数值排序、罗马数字排序，无序列表就是列表项为实心圆、空心圆、实心矩形。

无序列表的取值为：none（无标记）、disc(实心圆)、circle（空心圆）、square（实心矩形）

有序列表的取值为：none（无标记）、decimal（数字）、lower-roman(小写的罗马数字)、upper-roman(大写的罗马数字)

2.列表项图像即list-style-image，表示列表项图像不想取值为数字或者实心圆等时，可以自定义一个图像；语法规范：list-style-image:url(文件路径)

3.列表项位置即list-style-position，就是li前面标识的位置，取值有：outside（标识在li外）、inside（标识在li内）

4.列表的总和属性即list-style，语法规范：list-style:type url position 实例list-style:circle url(xxxx.jpg) inside

以上就是列表的一些样式了，可以自己打打代码，看看具体的效果

最后，我们了解一下定位属性

定位 position，就是元素在文档的位置，当需要对元素的位置进行修改时，就需要用到定位啦！

定位分为：普通流定位、浮动定位、相对定位、绝对定位、固定定位

定位的属性就是：position，取值有：static(静态定位即普通流定位)、relative(相对定位)、absolute（绝对定位）、fixed(固定定位)

display属性在使用的时候，需要配合top\bottom\left\right属性使用，表示偏移量。

z-index属性，表示当多个元素重叠的时候，谁在前面谁在后面，值越大越靠近用户

接下来详解各个定位：

1.相对定位：就是这个元素相对于自己本身的位置偏移指定的量数；具体的实现方式(二步曲)就是先定义定位方式，再定义指定偏移量：即display：relative；left\top\right：xxpx；常常用于弹出菜单的实现

2.绝对定位：就是这个元素相对了已经定义为相对定位的最近的父级；实现的方式同上，display为absolute，常用的场景非常多。

3.固定定位：就是将元素固定在网页的某个位置处，不跟随滚动条发生滚动；实现方式同上，display为fixed，常用于网页固定的小广告，多数情况下是相对与body实现固定定位的。