后端学前端必知003-CSS布局-特殊情况解决

父元素塌陷

父元素会吃掉 子元素的 margin-top margin-bottom设置的值

解决

// 给父元素设置 overflow:hidden
.parent{
	overflow:hidden
}

元素之间空白

元素之间的多个空格会被浏览器解析成为一个空格

解决

.parent{
	font-size:0px;
}
// 子元素的字体大小需要单独设置
.child{
	font-size;14px;
}

行内块元素最底部没有对齐

行内块元素与文本基线对齐.
但是文本基线与文本最低端有一定距离

解决

// 给行内块元素设置 
.inlineBlock{
	vertical:top;// 还可以设置 bottom,middle,只要不是baseline 就可以
}

绝对定位,固定定位元素进行垂直居中

对已有定位的元素进行垂直居中

.child{
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}