一,盒子模型图
二,元素在视图中的可见大小
可见宽度=左边框(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-上边框-上内边距-下内边距-下边框。