css 不保存上次记录,css问题记录

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会使布局变乱

.top {

background-color: blue;

}

.bottom {

height: 100px;

background-color: red;

}

p {

float: right;

margin-bottom: 10px;

}

top

This is the top content

结果：

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)

}

}