CSS的盒子模型

css中盒子模型分为  标准盒子模型和怪异盒子模型

标准盒模型

      从内到外：content padding border margin

                        content 内容

                         padding 内边距   是内容到盒子边框的距离

                         padding:30px;  一个值时，是内容到边框border的上下左右的距离为30

                         padding:20px 30px; 两个值时 是上下距离为20，左右距离为30

                         padding:10px 20px 30px; 三个值时是上距离为10，左右距离为20，下距离为30

                         border  边框的大小、粗细和线条形状

                         margin  外边距    是距离其他盒子的距离

怪异盒子模型  

　　从内到外：content包含padding和border 外面是 margin（不包含）

       标准盒模型  内容包括content、padding、border  外面是margin（不包含）

       标准盒模型切换成怪异盒模型   box-sizing:border-box;

       怪异盒模型切换标准盒模型     bxo-sizing:content-box;

       怪异盒模型在移动端是常用的，移动端百分比宽度是很实用的