CSS3_4.显示、列表、定位

1 显示

1.1 显示方式

1.1.1 显示方式

所有元素都可以显示为框
块级元素显示为一块内容——“块框”，div、h1、p等；
行内元素显示在行中——“行内框”，span、a等
可以使用display属性来修改元素框的显示方式

1.1.2 display属性

取值display:none/block/inline/inline-bock;
none：元素无框，所有内容不再显示，不占用文档空间;
block：让行内元素表现出块级元素特点，独占一行，可设置尺寸以及上下外边距
inline：让块级元素表现出行内元素特点，多个元素一行显示
inline-block：行内块元素
table:元素表现和table一致，尺寸以内容为准，每个元素独占一行，允许修改尺寸

1.2 显示效果

1. visibility属性
   属性规定元素是否可见，取值：
   visible：默认值，元素可见
   hidden：元素不可见，依然占据空间
   hidden的元素依旧占据HTML的空间，使用display属性可以创建不占据页面空间的不可见元素
2. opacity属性
   设置元素的不透明级别，value取值：
   0.0(完全透明)~1.0(完全不透明)
   opacity作用于元素，被修饰元素内部所有跟颜色相关的值都会被改变透明度，而rgba()只会改变某一颜色的透明度
3. vertical-align属性
   设置内容的垂直对齐方式，在表格和图片中使用；
   对于行内块级元素，如img可设置垂直对齐方式，定义行内元素的基线相对于该元素所在行的基线的垂直对齐
   baseline：默认元素放置在父元素基线上；只能在img中使用，控制图片与两边文字垂直对齐方式
   top：元素顶端与行中最高元素顶端对齐；
   bottom：元素顶端与行中最低元素顶端对齐；
   middle：父元素垂直居中

1.3 光标

1.3.1 光标

光标会根据用户的操作发生改变，鼠标悬停在链接会显示手形状，悬停在文本区域会显示I形状，悬停在按钮上会显示箭头；
使用cursor属性指定显示给用户的鼠标光标类型

1.3.2 cursor属性

定义鼠标指针放在元素边界范围内所用的光标形状，取值：
default/pointer/crosshair/text/wait/help
箭头/小手/准星+/大写I/等待圆环/帮助 ?

2 列表

2.1 列表项标志

list-style-type属性用于控制列表项标志的样式：

• 无序列表：出现在列表项旁边的圆点，取值：
  • none(无标记)
  • disc(实心圆,默认值)
  • circle(空心圆)
  • square(实心方块)
• 有序列表：字母、数字、其他计数体系的符号，取值：
  • none：无标记
  • decimal：数字，默认值
  • lower-roman：小写罗马数字
  • upper-roman：大写罗马数字

2.2 列表项图像

list-style-image属性使用图像替换列表项的标记，取值为url(…)，指定图像作为有序或无序列表项的标志

2.3 列表项位置

list-style-position控制列表标记的位置，取值：

1. outside：默认值，标记位于文本左侧且在文本以外(元素边框外)
2. inside：标记放置在文本以内

2.4 列表属性

list-style用于控制列表项的样式：
list-style: type url(图像URL) position;
一般将list-style设置为none去除标志

3 定位

3.1 定位概述

3.1.1 定义

• 普通流定位
  块级元素框从上到下顺序排列；
  每个块级元素出现在新行中；
  行内元素从左到右水平排列；
• 浮动
• 相对定位
• 绝对定位
• 固定定位

3.1.2 定位属性

将元素position属性设置relative/absolute/fixed任意一个值就是已定位元素

属性	说明
position	规定元素定位类型，取值：static/relative/absolute/fixed
偏移属性	top/bottom/left/right:value;，用于定义元素框的偏移位置
z-index	设置元素堆叠顺序z-index: value;
float/clear	浮动定位属性

使用position属性和偏移属性实现普通流定位、相对定位、绝对定位和固定定位；
使用float属性实现浮动定位，其他属性为辅助属性

3.2 定位方式

3.2.1 相对定位

• 元素保持未定位前的形状，保留原本所占空间
• 相对于原来位置偏移距离，设置垂直或水平距离
• 用来实现元素位置微调以及作为绝对定位的父元素属性
• 设置元素为相对定位：首先设置position属性的值为relative；使用left或right属性设置水平方向偏移量；使用top/bottom属性设置垂直方向的偏移量

3.2.2 绝对定位

• 将元素内容从普通流中完全移除，不占据空间，被其他元素补位；
• 使用偏移属性来相对于最近的已定位祖先元素固定位置；如果没有已定位的祖先元素，则以body元素为参照物；
• 使用在有堆叠效果的布局以及弹出菜单
• 设置元素为绝对定位：首先设置position属性的值为absolute；使用left或right属性设置水平位置；使用top/bottom属性设置垂直位置；绝对定位会让元素变为块级，允许修改尺寸；但由于脱离文档流所以没有独占一行的概念，位置在父元素左上角

3.2.3 固定定位

• 将元素内容固定在HTML页面某个位置，元素从普通流中完全移除，不占用页面空间；当用户向下滚动页面时，元素框不会随着移动；
• 设置固定定位：设置position的值为fixed；通过left、top、right、bottom等偏移属性定义元素位置；固定定位的元素会变成块级元素，允许修改尺寸；但由于脱离文档流所以没有独占一行的概念，位置在父元素左上角

3.2.4 堆叠顺序

• 修改元素定位方式，可能会发生堆叠；可以使用z-index属性来控制元素框出现的重叠顺序；
• 值为数值，越大表示堆叠顺序越高，也可以设置为负值。
• 默认堆叠后写的标签堆叠层数高；只有已定位元素才能使用堆叠；父子元素之间z-index无效，子元素在父元素上

浮动和相对定位可以混用，绝对定位会清除浮动属性