CSS盒子模型

一、盒子内容溢出处理

overflow: 在标准文档流中,溢出的内容在页面中不占位
visible(默认值)：对溢出内容不做处理
hidden:溢出的内容隐藏掉
scroll:水平和垂直方向都会出现滚动条，只不过滚动条是否可用取决于该方向是否溢出
auto:哪个方向溢出内容哪个方向就会出现滚动条



text-overflow:text-overflow属性指定当文本溢出包含它的元素，应该发生什么
text-overflow: clip/ellipsis;
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本

注意：text-overflow必须和overflow:hidden;white-space:nowrap;一起使用。

a、边框

border-style:solid/dashed/dotted/double/none(默认值)
border-color:设置边框颜色
border-width:设置边框粗细

以上三个属性，只要告诉浏览器border-style的值(none除外),那么颜色和粗细就有默认值

border-top-color
border-top-width
border-top-style

border-right-color
border-right-width
border-right-style

border-bottom-color
border-bottom-width
border-bottom-style

border-left-color
border-left-width
border-left-style

border-top  border-right  border-bottom  border-left
border

b、padding:设置盒子的内容到盒子边框之间的距离

padding:上  右  下  左
上  左右  下
上下   左右
padding-top
padding-right
padding-bottom
padding-left

c、margin:设置盒子与盒子之间的距离

值可以设置1个\两个\三个\四个  跟padding对应的方向一致

margin-top
margin-right
margin-bottom
margin-left

margin用于设置盒子与盒子之间的距离

所谓的盒子与盒子有两种情况

第一种：父级盒子 与  子级盒子

给子级盒子设置margin-top的时候，该margin-top会作用在父级盒子上，这是一种css bug
解决方法一：给父级盒子设置padding-top:0.1px;


设置父级盒子与子级盒子之间的距离 有两钟方式
第一种给父级设置padding
第二中给子级盒子设置margin


第二种：同级盒子
同级盒子（都是块级元素并且在标准文档流中）垂直排列，他们之间的距离是看上面的margin-bottom大还是下           面盒子的margin-top大，谁大margin值就用谁的，这是一种唯一的特殊情况，是css bug 我们称之为margin合并
其他的情况margin都会叠加


行内元素部分支持盒子模型属性
        不支持：width，height,margin-top,margin-bottom   不支持margin:0 auto;


行内块元素部分支持盒子模型属性
不支持margin:0 auto;中的auto这个值