余温博客

笨人的可怕处并不在其笨
而在其自作聪明

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

元素类型转换

    语法:

 

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://fengyijia.cn/?post=246  [生成短网址]

发表评论

表情

网友评论(1)

怼死你
yw大傻逼 6年前 (2018-10-02) 回复
sitemap