盒子模型、内外间距、边框线、水平居中

一、盒子模型

1.组成部分

    内容区：自己定义的width和height就是内容区的宽度和高度
    内间距padding：内容与盒子边的距离
    边框线border
    外间距margin：盒子与盒子的距离

2.盒子的总宽和总高的计算规则

    总宽的计算规则：
        内容区+左右的内间距+左右的边框线
        width+左右的padding+左右的border
    总高的计算规则：
        内容区的高度+上下的内间距+上下的边框线
        height+上下的padding+上下的border
        
    	所以我们的内间距和边框线会导致撑大盒子。

3.内间距的常见书写方式

    padding:1个值，4个方向都加
    padding：2个值，上下  左右
    padding:3个值,上  左右   下
    padding：4个值  上  右  下  左，顺时针的赋值顺序
    padding-top====上内间距
    padding-bottom====下内间距
    padding-left====左内间距
    padding-right====右内间距
    注意：内间距不能写负数

4.外间距的常见书写方式

    同上
    注意：外间距可以写负数
    
    可以利用外间距达到调整元素位置的目的
        margin-top
            正数：向下
            负数：向上
        margin-left
            正数：向右
            负数：向左

5.边框线的常见书写方式

    非简写（单一写法）
        border-width===边框线的粗细
        border-style===边框线的样式
        border-color===边框线的颜色
    简写（复合写法）
        border:粗细  样式  颜色;
        注意：这里没有书写顺序。
    给某个方向加边框线
        border-top
        border-bottom
        border-left
        border-right
    利用边框线画三角形
        1.width和height为0
        2.3个方向透明色，其中一个方向右颜色。
         
        透明色：transparent

6.清除标签自带的间距

* {
	padding:0;
	margin:0；
}

7.居中的问题

text-align:center;可以控制文字和图片的水平居中
margin:0 auto;可以控制盒子的水平居中

8.关于margin-top的问题

	如果给子元素写了margin-top有时候会把父元素给带下来
解决方式：
    给父元素加顶部的透明边框线。