盒子模型的学习记录
盒子模型可以用以下几张图片，直观的展示出来
Content：为输入的内容，
Padding：与父元素的边框的距离（可比作包裹内容的容器），
Border：父元素的边框，（容器的壁）
Margin：容器与Body的距离
再往外就是浏览器的边框了
盒子模型包括的属性：
一，padding 属性: 元素的内边距；
——————————————————————————————
- padding-top 属性设置元素的上内边距（空间）。
- padding-right
- padding-botton
- padding-left
- padding接受 长度值或者百分比值，但不允许使用负值。
padding *同时设定四个边距
padding **分别设置上下，左右边距
padding ***分别设置上，左右，下边距
padding ****分别设置上，右，下，左边距
————————————————————————————————
二，border 属性： 元素的边框，是围绕元素内容和内边距的一条或多条线；
三，margin 属性：元素的外边距；
以上三个元素的属性的尺寸：
1，height 设置元素的高度。属性值：auto：默认。/px，cm等单位定义高度，/百分比
2.width 设置元素的宽度。属性值：auto：默认。/px，cm等单位定义高度，/百分比
注意：当width设置为auto时，没有元素不会显示出来
当属性用百分比定义时，是相对于父元素的尺寸来说的
四，边距的合并
如果两个模型上下边框重合，则互相合并，并且显示较大的一个边距
五，溢出的处理
overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪
1，overflow-x
2，overflow-y
- visible 不裁剪内容，可能会显示再边框外
- hidden 裁剪内容
- scroll 裁剪内容，提供滚动机制
auto 如果溢出，则自动提供滚动机制
通常和 white-space：nowrap；text-overflow:ellipsis配合使用
六，定位
CSS的三种定位方式，普通流，浮动和绝对定位。
1，普通流：根据元素再HTML中的位置定位
元素定位的属性：
position 把元素放置到一个静态的，相对的，绝对的，或固定的位置中。
- static 默认值，没有定位。
- absolute 绝对定位，相对于父元素进行定位，通过绝对定位，元素课可以放置到页面上任何位置，元素位置通过，left，top，right，bottom，属性规定，（相对于最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位）
- relative 相对定位，相对于HTML中正常位置进行定位，元素位置通过，left，top，right，bottom，属性规定。
- fixd 绝对定位，相对于浏览器窗口进行定位，如果内容很多向上划屏幕，这个元素不动，元素位置通过，left，top，right，bottom，属性规定
绝对定位和相对定位的区别：
绝对定位对象可以叠加，相对定位对象不可以，
相对定位占用原来位置（只是内容移动了，空间是占着，相当于空格），绝对定位不占用
七，z-index 设置元素的堆叠顺序
八，浮动 float
- left 元素向左浮动，
- right 向右浮动
none，元素不浮动
九，清除浮动
clear 浮动的清除，常用属性值 both/left/right/none