css盒子模型

一、.内容的宽度和高度

二.边框

常用书写方式：

1. border：border-width border-style border-color

2. border-top：border-width border-style border-color

3. border-buttom：border-width border-style border-color

4. bsiorder-left：border-width border-style border-color

5.border-right：border-width border-style border-color

补充：box-sizing:border-box ;表示width=边框＋内边距+内容宽

三.内边距

当盒子没有设置宽度和高度时padding不会撑开盒子大小

 

 四、外边距

 

五、外边距折叠现象 – ① 合并现象

 六、外边距折叠现象 – ② 塌陷现象

 七、行内元素的margin和padding无效情况

 注：盒子模型没有设置宽度高度padding就不会撑开盒子