盒模型与文本溢出

padding内填充

作用：控制子元素在父元素里的位置

1）但是添加后会对整个盒子大小产生影响，需添加怪异盒模型box-sizing：border-box消除影响

2）padding不会对背景图位置产生影响

padding-top/left/bottom/right

padding:数值 四周

padding：数值 数值 上下 左右

padding：数值 数值 数值 上 左右 下

---

border边框

border-color：

border-width：

border-style：solid/ dashed（虚线） / dootoed（点划线）/double（双线）

简写：border：1px solid black

---

margin外边距 margin不会撑大元素大小

作用：控制元素之间的距离

margin：0 auto；水平居中 前提要有宽 行内元素要先定义成块元素在设置宽度，行内块元素只有定义 块元素

margin：数值 四周

margin：数值 数值 上下 左右

margin：数值 数值 数值 上 左右 下

常见问题

相邻元素的上下margin值会重合，取其中最大值，

 

margin坍塌，原因：父元素和第一个子元素没有浮动的时候，给第一个子元素添加margin-top，会错误的作用在父元素上

解决方法：给父元素添加overflow：hidden；

---

文本溢出 

oveflow：

hidden（超出元素框会被隐藏）

scroll：内容被修剪，但是会出现滚动条

auto：只有内容被修剪，才出现滚动条，

inherit：从父元素哪里继承overflow的属性

单个方向overflow-x、overflower-y

---

white-space元素内的空白怎么处理

normal：默认值，多余的空白只会保留一个

pre：空白会被保留，不会换行

pre-wrap：保留一部分，自动换行

pre-line：合并空白，正常换行

nowrap：强制一行显示，不换行

---

text-overflow：

clip不出现省略号

ellipsis文本溢出时显示省略号

---

文本溢出时显示省略号

width：；height：；
overflow：hidden；
white-space：nowrap；
text-overflow：ellipsis