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-上边框-上内边距-下内边距-下边框。
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18