阅读 187

页面布局中行内元素的应用(html块元素和行内元素)

大家知道哪些属性在行内元素和块元素中的应用有区别吗?

下面给大家例举一下:

1、text-indent 行内元素不起作用

2、margin、padding,border

  • a.margin只能够设置水平方向的边距,即:margin-left和margin-right 设置margin-top和margin-bottom无效;

  • b.padding在加上边框及背景,可以看出视觉上有变化,但不能实际将其他元素内容推开;

  • c.Border也是只能起到视觉作用,不能将其他元素内容推开;

3、Clear:left/right,行内元素不起作用\

4、transform不起作用

5、对齐问题

元素对齐会受里面内容的大小影响,可以转换元素类型或者将元素进行浮动。

解决方法:

元素类型转换

  • a.display:block/inline-block

  • b.float:left/right 可以将行内元素自动转换为块元素

  • c.定位:absolute/fixed 可以将行内元素自动转换为块元素

  • d.flex 作为flex中的项目,行内元素可以自动转换为块元素


作者:锋享前端
链接:https://juejin.cn/post/7031091405569294344

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐