CSS盒子模型

CSS盒子模型

        组成： content --> padding --> border --> margin

          像现实生活中的快递： 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距

           content ：width、height组成的  内容区域

            padding： 内边距（内填充） padding-top|right|bottom|left

                        number：30px   表示上下左右

                        30px 40px;    表示上下、左右

                        10px 20px 30px 40px  (上、右、下，左)

            margin:   外边距（外填充）

            

box-sizing

        box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）|border-box。盒尺寸，可以改变盒子模型的展示形态(border-box),使得整个盒子（content、padding、border）并没有变大。说白了，就是 wieth、height相对谁，默认是针对content，取值为 border-box就相对margin以内的。