【原创】CSS中的盒子模型以及设置元素居中

css中每个元素都是一个盒子，它由最内侧“内容区（content）”内侧“内边距（padding）”外侧“边框(border)”,以及最外侧“外边距（margin）”组成
内容区（content）:
    用于展现元素内容
    可以设置width和height属性（普通盒子模型设置宽高属性实际为内容的宽高属性）
    当设置背景颜色时，背景颜色会显示在内容区和内边距
内边距（padding）：
    设置方法：
        1.分别设置内边距的上下左右；
        padding-top: 设置内边距上端属性值
        padding-bottom: 设置内边距下端属性值
        padding-left: 设置内边距左端属性值
        padding-right: 设置内边距右端属性值
        2.组合设置内边距；
            a)四个属性分别为 上 右 下 左，顺时针方向设置,如：
                padding: 10px 20px 30px 40px;
            b)设置三个属性，分别为上 左右 下，如：
                padding: 10px 20px 30px;
            c)设置两个属性值，两个属性值分别为 上下 左右,如:
                padding: 10px 20px;
            d)设置一个属性值,上下左右均被设置,如:
                pading: 20px;
    内边距使用场景:
        1.导航栏每个导航的文字个数不一样,设置a标签的宽高,会导致每个导航间的间距不一致
        2.输入框设置输入时图标距离边框的距离
边框(border)
    设置三要素：宽度，样式，和颜色
    a)单个属性设置
        border-style: double;
        border-width: 20px;
        border-color: pink;
    b)组合属性设置
        border: groove 20px black;
外边距(margin)
    外边距属性设置，单个属性设置,块级元素设置右侧外边距不生效
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: 40px;
        margin-left: 50px;
        外边框属性设置，组合设置
        margin: 10px 20px 30px 40px;
        margin:10px 20px 30px;
        margin:10px 20px;
        margin: 10px;

行内元素:
    a)无法设置内容区的宽高属性
    b)内边距部分可控制,左右设置内边距正常,上下不可控制.
    c)可以设置边框
    d)外边距左右可正常设置,上下不可设置.
块级元素&行内块级元素
    均可以正常设置内容区、内边距、边框、外边距.

注意：块级元素的右外边距和设置无关

选中需要左右居中的元素，然后设置左右外边距值为“auto”即margin：0,auto;
注意：需要设置左右居中的块级元素，必须设置宽度属性，且不能脱离文档流。

a)设置父级元素相对定位属性，即position：relative;
d)设置当前元素绝对定位属性，即position：absolute;
c)设置当前元素距离父级顶部50%，左侧50%，即top：50%; left:50%;
d)移动当前元素，距离为当前元素宽高的一半，如当前元素宽高均为100px，则margin-top:-50px; margin-left:-50px即可

标准盒子模型
怪异盒子模型
区别：
    标准盒子模型设置的width和height的属性值为内容区的宽度和高度。
    怪异盒子模型设置的width和height的属性值包含内容区+内边距+边框的宽度和高度。
转换盒子类型属性：box-sizing; 属性值：border-box怪异盒子模型，content-box标准盒子模型。
怪异盒子模型常用于不改变当前元素的大小，改变内边距和边框的宽高。