盒模型

外边距: 改变元素外边的间距 margin

内边距: 改变元素与内容的间距 padding

padding:一个值; 一个值,改变四个方向
padding:上下  左右;
padding:上 左右 下;
padding:上 右 下 左;顺时针方向变化

padding-top:顶部内边距;
padding-right:右内边距;
padding-bottom:底部内边距;
padding-left:左内边距;
注意:内边距没有负值;

margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;

margin-top:上外边距;
marign-right:右外边距;
marign-bottom:下外边距;
marign-left:左外边距;
注意: margin可以为负值, auto自适应

margin常见bug:
1: 上下外边距相遇,只显示较大值
2: 嵌套关系的元素,子元素的上外边距和父元素的上外边距相遇,取较大值

盒模型占位计算:

w= width+左右边框+左右内边距+左右外边距
h= height+上下边框+上下内边距+上下外边距

文本溢出：

overflow:文本溢出设置;
hidden	超出隐藏
scroll	超出时,滚动查看(未超出也会有滚动机制)
auto	超出时,滚动查看(自适应,未超出时不会有滚动机制)
inherit	继承父级的overflow设置

文本空白：

white-space:文本空白;
normal	    默认值
pre         保留原格式,且不会被迫换行
pre-wrap    保留原格式,会被迫换行
pre-line    保留换行,不保留缩进和多个空格符
nowrap      强制不换行,但是干不掉br标签

文本省略号：

text-overflow:文本省略号;
clip    裁剪
ellipsis    省略号
想要显示省略号四部曲:
（1）元素设置宽度,且内容足够
（2）white-sapce:nowrap;强制不换行
（3） overflow:hidden;超出隐藏
（4） text-overflow:ellipsis;变成省略号
注意: 只针对单行文本有效