元素类型相互转换详细介绍 块状元素 内联元素

2024年04月09日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客

元素类型转换

语法:

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;}


本文链接:http://so.lmcjl.com/news/1600/

展开阅读全文