高度与字体(内联元素)
- 字体之间通过基线对齐
- 当div包含一个内联元素,他的高度由字体的行高确定
- 默认行高是设计师设计字体时的建议行高。
空格(内联元素之间)
 
no break space
两个inline元素之间有任何回车,tab,换行或其他任意字符,都会变成空格。
因而导航栏li元素横排不要使用inline-block方法,用float+清除浮动。
中文的对齐方式技巧
文字垂直居中
用line-height
加padding
,不要用height = line-height
,因为height = line-height
只能居中一行。
margin上下合并
父元素有padding
或border
,上下margin
就不会合并。
div垂直水平居中
<style>
.child{
border: 5px solid orangered;
text-align: center;
width: 150px;
margin: 0 auto; ///
}
.parent{
outline: 3px solid green;
padding: 100px 0; /
}
</style>
用flex布局
.parent{
justify-content: center;
align-items: center;
}
文字溢出省略
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
总结:
DIV的高度是由它内部文档流的总和决定的