CSS盒子模型

一，盒子模型图

 

二，元素在视图中的可见大小

       可见宽度=左边框(border-left)+左内边距(padding-left)+content的width+右内边距(padding-right)+右边框(border-right)

       可见高度=上边框(border-top)+上内边距(padding-top)+content的height+下内边距(padding-bottom)+下边框(border-bottom)

三，元素在视图中所占位置大小

       所占位置宽度=左外边距(margin-left)+可见宽度+右外边距(margin-right)

       所占位置高度=上外边距(margin-top)+可见高度+下外边距(margin-bottom)

四，常见误区

       误区：设置元素的width和height属性，就认为是设置元素的可见宽度和可见高度。

       错误，设置元素的width和height只是设置元素内容content的宽度和高度。如果想设置元素的可见宽度和可见高度为100px*100px，则需要设置元素的width=100-左边框-左内边距-右内边距-右边框；height=100-上边框-上内边距-下内边距-下边框。