元素类型转换

语法:

display: block  |  inline-block  |  inline  |  none  |  list-item;

  block:将元素转换为块状元素,是大部分块元素的默认display属性值;

  inline-block:将元素转换为内联块状元素,是内联块状元素的默认display属性值(如img,input等);

  inline:将元素转换为内联元素,是内联元素的默认display属性值(如a,span等);

  none:将元素全部隐藏不可见;

  list-item:将元素转换为列表类型,是li的默认display属性值;

  注:当给元素设置了float属性后,就相当于转换为block

扩展一:图片默认有空隙

  方案一、给img添加display:block;

  方案二、给img添加float属性

扩展二:表单元素行高不一致

  方案一、给表单元素添加vertical-align:middle;

  方案二、给表单元素添加float属性

扩展三:input在点击时会出现蓝色边框

  解决方案:给input控件添加input{outline:none;}