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

元素类型转换

    语法：

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

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓