CSS中的display

CSS中的display属性

1.display属性的意义：

对于一些行元素无法定义显示的width和height,如a/span标签，通常大小由元素定义，display可以将行元素/块元素/行内块元素进行相互转换，便于设计

2.常用的属性值和描述

值	描述
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素

3.块元素/行内块元素/行元素介绍

• 块状元素
  (1)能够识别宽高
  (2)margin和padding的上下左右均对其有效
  (3)可以自动换行
  (4)多个块状元素标签写在一起，默认排列方式为从上至下

• 行内块状元素
  (1)不自动换行
  (2)能够识别宽高
  (3)默认排列方式为从左到右

• 行内元素
  (1)设置宽高无效
  (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
  (3)不会自动进行换行

4.扩展 （a标签客户点击优化）

利用块级元素可以继承父元素的宽度的特性，将一个行元素设定为块元素后自动继承父类宽度，例如：

<ul>
	<li><a href="#">网站首页</a></li>
	<li><a href="#">公司简介</a></li>
</ul>

设定a标签宽度为li宽度目的是为了客户即使没有点到a标签内的字体，但点击到li标签空白处一样可以发生跳转

a{
	display:block;
}

li标签下的a标签为行元素，将a标签设定为块元素，此时鼠标移动a标签外li标签内，仍然会有相同的效果