HTML5前端开发入门之CSS盒子模型及其宽高

盒子模型及其宽高

1.什么是css盒子模型？

css盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子

 

结论

1.在HTML中所有的标签都可以设置

宽度/高度  ==  指定可以存放内容的区域

内边距  ==  填充物

边框  ==  现实中的手机盒子自己

外边距  ==  盒子与盒子之间的间隙

 

1.内容宽度和高度

就是通过标签的width/height属性设置的宽度和高度

 

2.元素的宽度和高度

宽度 = 左边的边框 + 左边的内边距 + width + 右内边距 + 右边框

高度 = 同理可证

 

3.元素空间的宽度和高度

宽度 = 左外边距 + 左边的边框 + 左边的内边距 + width + 右内边距 + 右边框 + 右外边距

高度 = 同理可证