CSS盒子模型

一,盒子模型图
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-上边框-上内边距-下内边距-下边框。


 

css

相关推荐