热门关键字:
jquery > jquery教程 > jquery教程 > 盒子一些相关宽度

盒子一些相关宽度

348
作者:管理员
发布时间:2020/10/9 9:15:55
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=2696
  • clientWidth = width+左右padding
  • offsetWidth = width + 左右padding + 左右boder
  • scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)

边界塌陷

CSS 中存在一个 margin collapse,即边界塌陷或者说边界重叠。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

并排 DIV 边界塌陷(兄弟)

对于上下两个并排的 DIV 块而言,上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 会塌陷,会取上下两者 margin 里最大值作为显示值,只设置单个margin。

包含元素盒子塌陷(父子)

父级div中没有border,padding,inlinecontent,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content(文本)中的其中一个,然后按此div 进行margin。

解决方法

  • 为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border: 1px solid transparent)
  • 为父盒子添加overflow: hidden;
  • 为父盒子设定padding值;
  • 为父盒子添加position:fixed;

负值作用

  • 负 marign实现元素的水平垂直居中
  • 负 marign隐藏列表 li 首尾多余的边框
  • 负 text-indent 实现文字的隐藏
  • 负的 z-index 参与层叠上下文排序
  • 定位中的left、right、top、bottom




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:css
友荐云推荐