什么是盒模型？

Posted 2021-03-21 hudingbiao

盒模型（内容（content）,内边距（padding）,边框（border）,外边距（margin））

这里做个比喻：content:比喻在网上买了几个鸡蛋；

　　　　　　　padding：比喻快递员包装鸡蛋用的防撞纸的距离，把鸡蛋牢牢的包裹起来，以免碰撞；

　　　　　　　border:外面使用包装箱的厚度；

　　　　　　　margin:一个包装箱和另一包装箱的距离；

margin(外边距)：：比喻成包装箱和包装箱的距离

border(边框)：比喻成包装箱子

1.简写：border:10px solid;red;(具体的写法：border-width:10px;border-style:solid;border-color)

其中boor-style其他类型：border(虚线)dotted（点线）

padding(内边距)：比喻成鸡蛋外边的防撞纸

1.padding取值:10px(一个值)（表示四面的内边距都是10px）

10px;20px;30px（三个值）（表示上10px；左右20px；下30px)

10px;20px;30px；40px(四个值)（表示上右下左依次是10px；20px;30px；40px）

padding-right(右内边距)：20px（其他方位一样）

padding-bottom(类似)

padding-left(类似)

padding-top(类似)

content(内容)：比喻成鸡蛋

值得注意的是，块级元素可以设置宽高，内边距，边框，外边距     行内元素宽高自动，并排显示。