margin: 0 auto失效的原因

元素没有宽度
元素浮动
元素绝对定位（脱离文档流），注意：相对定位不会失效
元素display属性为table-cell，table-cell元素对margin无感

使absolute元素的文字内容宽度自适应

absolute元素宽度高度并不能依据内容自适应。在元素只有文字内容时定位元素，发现出现中文排成了一列而不是一行的问题，可以通过强制文字不换行解决这个问题。

.text-nowrap{
  white-space: nowrap;
}

inline和inline-block元素并排时存在水平空隙

使用百分比布局时，发现40%和60%的inline-block元素并不能排列于一行，这是因为它们之间存在间隙。可以通过设置父元素的font-size为0解决问题。

.clear-inline-hspace{
  font-size: 0;
}

这些空白间隙实际上是html标签中的空白符，如果把标签之间的回车换行空格都删除掉也可以解决问题。

line-height会影响所有inline-block元素高度

line-height的改变会造成inline-block元素的高度改变，这可能带来布局上的问题。所以，在使用许多inline-block元素的复杂布局中，最好不要先设置容器的padding和height，应该先设置内部高度（可能使用line-height）后再考虑是否使用padding。

margin-top和margin-bottom失效

对于inline元素而言，设置margin-top和margin-bottom是无效的。

设置margin-top导致父元素出现空白的解决方法

在父容器中设置溢出隐藏

.ofw-hidden{
  overflow: hidden;
}

margin和float会使布局变乱

<style>
.top {
    background-color: blue;
}
.bottom {
    height: 100px;
    background-color: red;
}
p {
    float: right;
    margin-bottom: 10px;
}
</style>
<div class="top">
    top
    <p>This is the top content</p>
</div>
<div class="bottom"></div>

结果：

image.png

这是因为p浮动脱离文档流，它不会撑开容器，设置的margin也无效。

margin重叠

参考文章

fixed失效问题

祖先元素含transform
当布局未fixed的元素遇到祖先元素设置了transform属性时，但对于该祖先元素定位，而不是相对于浏览器可视窗口。
祖先元素含will-change: transform
情况同transform

负margin

负数margin会导致子元素超出容器，可能导致布局问题，所以尽量少用负margin；即使要用，也尽量在容器中使用。

box-sizing

padding+width大于窗口宽度，会导致空白问题，可以使用box-sizing: border-box快速解决。

flex布局

flex布局会使元素的高度相同，如果水平并列的元素宽度不同，需要添加一层容器包裹子元素。

头部fixed的占位问题

如果要自定义实现position: sticky的头部导航效果，通过js切换static和absolute，会导致导航条出现抖动问题。一种比较好的方法是使用一个空白的div进行占位，头部定位保持fixed就可以了。

/**
  fixed元素占位
  @param {DOM} el fixed元素
  @param {String} pos 插入占位元素的位置
*/
function fixFixedSpace (el, pos = 'append') {
  const pass = document.createElement('div')
  const parent = el.parentNode
  pass.cssText = `width: ${pass.offsetWidth}px; height: ${pass.offsetHeight}px;`
  if (pos === 'append') {
    parent.appendChild(pass)
  } else if (pos === 'prev') {
    parent.insertBefore(pass, el)
  } else if (pos === 'next') {
    parent.insertBefore(pass, el.nextSibling)
  }
}

css问题记录