CSS— display属性的属性值
CSS中display属性的属性值有:block、inline、inline-block、none、list-item、table等等,这里说它最常用的4个属性值:block、inline、inline-block、none。
1. block
将元素类型转换为块状元素,使其拥有块状元素的特点,独占一行并可以设置元素的宽、高以及padding和margin值。像超链接a标签为内联元素,扩大鼠标点击范围不能直接设置宽高,设置为block后,就可以设置它的宽和高啦。
如下图:
2. inline
将元素类型转换为内联元素,内联元素特点:行内逐个进行显示,不能设置宽高。相对block用到的场景较少。
3. inline-block
将元素类型转换为行内块元素。行内块元素有一个其他元素没有的特别优点,支持使用垂直对齐的属性vertical-align,所以设置元素垂直居中时可用这个属性值。
4. none
用于隐藏元素,被隐藏元素原来的空间也不会被保留,鼠标滑过元素内容发生变化可以设置display的这个属性值来控制显示和隐藏。
如下图