html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
作者：王可利（Star·星星）
width 是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
Height 是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
Padding 是“内边距”的意思
Border 是“边框”
Margin 是“外边距”
真实占有的宽度 = 左边的border +左边的 padding + width +右边的border +右边的padding；
认识->padding padding
内边距，padding背景颜色一定和内容区域一样，background-color将填充border以内所有的区域
padding-right：10px；
padding-left：20px；
padding-top：30px；
padding-bottom：40px；
认识->margin
margin-left：100px；
margin-top：100px；
margin-right；100px；
margin-bottom：100px；注意：使用的时候与float会有相互的影响，可以使用clear：both，清除浮动
margin：0 auto 这个盒子居中，不是居中文本，必须是有明确width padding本质上指父子关系，margin是兄弟关系
border 边框的三要素：粗细。线性、颜色 dashed、dotted、solid、double、groove、ridge、inset、outset
浮动FLOAL
注意清楚float的方法：
1. clear：both（表示当前自己内部的元素不受其他盒子的影响）
2. overflow：hidden（超出范围内就隐藏）
3. 浮动的元素，只能被有高度的盒子高度，就是说，如果盒子内部有浮动，那么浮动就会在一定的范围内互相影响（加高方法）