HTML5技术

CSS中越界问题经典解决方案 - super_walker

字号+ 作者:H5之家 来源:博客园 2015-12-06 08:14 我要评论( )

8.CSS相关知识 (1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top:1px;有副作用 2)为父元素指定padding-top:1px;有副作用 3)为父元素指定overflow:hidden;有副作用 4)为父元素添加前置内容生成推荐使用 .parent:before{ content:

8.CSS相关知识

 (1)如何解决父元素的第一个子元素的margin-top越界问题

  1)为父元素加border-top: 1px;——有副作用

  2)为父元素指定padding-top: 1px;——有副作用

  3)为父元素指定overflow:hidden;——有副作用

  4)为父元素添加前置内容生成——推荐使用

  .parent:before {

    content: '  ';

    display: table;

  }

 (2)如何解决所有的子元素浮动后父元素高度变为0,且影响后续元素

  1)为父元素指定overflow:hidden;——有副作用

  2)为父元素指定高度:height: xxx;——有局限性

  3)为父元素添加后置内容生成——推荐使用

    .parent:after {

      content: '  ';

      display: table;

      clear: both;

    }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    2017-04-13 08:04

  • 学习H5仿制网站时遇到的问题 - novai-L

    学习H5仿制网站时遇到的问题 - novai-L

    2017-03-20 09:02

  • 移动端部分兼容问题总结 - 巷子太窄

    移动端部分兼容问题总结 - 巷子太窄

    2017-03-14 16:00

  • H5微信播放全屏问题 - 津津unique

    H5微信播放全屏问题 - 津津unique

    2017-03-09 15:03

网友点评
p