盒子规则的学习

盒子模型 一般值块元素

1.marigin

        外边距(盒子的外边框距离其他元素的距离），

        速写形式，上下外边距会重叠，编写方式为上右下左

        margin-top

        margin-right

        margin-bottom

        margin-left

2.padding

        内边距（内容距离盒子内边框的距离）

        padding-top

        padding-right

        padding-bottom

        padding-left

3.border 边框

        border-wigth

        border-style

        border-color

        border:2px red dashed  速写

4.box-sizing(盒子模式)

        内容盒子（普通盒子，默认盒子）

        content-box;

        width=内容宽

        边框盒子(怪异盒子 ie低版本)

                border-box

                width=内容宽+padding+border

                border-radius:2px

                background

                        background-color:

                        background-image:

5.文本在盒子中如何水平居中？

        text-align:center

6.文本在盒子中如何垂直居中？

verticla-align

        line-height=height

盒子应该位于容器内部，容器通常情况下要比盒子大

 7.盒子在容器中如何水平居中？

margin：0 auto；

margin-left:50%;left:-50px;position:relative;

8.盒子在容器中如何垂直居中？

父元素padding,boxzing:border-box 

父元素padding+子元素margin,box-sizing:border-box