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)
}
}
