盒子模型型四个关键字：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 一、概念 1、 概念 盒子的概念就好比你现在网上买了一个苹果手机，那么新手机肯定是放在一个盒子里给你寄来。 那么这苹果手机本身就指的是 内容（content）, 为了让手机安全寄到会在盒子里放点泡沫这就是 填充（padding）, 那么这个盒子本身肯定是有它的宽度的这叫 边框（border), 每个盒子与每个盒子之间的距离叫 边界（margin)。 https://www.cnblogs.com/qdhxhz/p/11801815.html 2、元素的宽度和高度 重要 当您指定一个CSS元素的宽度和高度属性时，实际只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。 宽高公式 总宽度 = 内容宽度 + padding宽度(左右) + border宽度(左右) + margin宽度(左右) 总高度 = 内容高度 + padding高度(上下) + border高度(上下) + margin高度(上下) 举例 求下面的总宽度是多少？ 运行结果 我们在看下它的盒子模型 我们很明显看出在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。 这里总宽度 = 300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px 3、盒子边框(border) 边框主要有三个属性：宽度(border-width)、样式(border-style)、颜色(border-color) border-style 确定边框的显示样式 none: 没有边框 solid: 实线 dashed：虚线 dotted： 点线 double： 双线 border-width 边框宽度：具体的像素值px border-color 边框颜色 1)边框-简写属性 上下左右同一属性 border-style：属性1，属性2，属性3，属性4 上->右->下->左 border-style：属性1，属性2，属性3 上->左右->下 border-style：属性1，属性2 上下->左右 border-style：属性1 上下左右属性相同 不同属性写在一起 border : border-width border-style border-color 2)示例

样式分开写

上下左右写在同一属性中

三个属性写在一个属性中

运行结果 有关boder的详细属性可以参考：CSS 边框 4、盒子padding（填充） padding属性用于设置内边距。 是指 边框与内容之间的距离。 属性如下 padding-top: 上内边距 padding-right: 右内边距 padding-bottom:下内边距 padding-left: 左内边距 它也可以简写,它的同一属性简写和boder一致。简写的单词为：padding 5、盒子margin(外边距) margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。 属性如下 margin-top: 上外边距 margin-right: 右外边距 margin-bottom:下外边距 margin-left: 上外边距 它也可以简写,它的同一属性简写和boder一致。简写的单词为：margin 二、经典实例 1、实现盒子居中 可以让一个盒子实现水平居中，需要满足一下两个条件： 1. 必须是块级元素。 2. 盒子必须指定了宽度（因为块级元素宽大小为浏览器宽长度） 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。 示例 运行结果 当div盒子设置 margin: 0 auto;盒子会自动居中。 使用margin: 0 auto; 要注意： 　　1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width; 　　2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)， 不能用了 　　3.margin：0 auto;居中是盒子。而不是居中文本，上面如果需要文字水平居中则需使用text-align: center; 2、外边距塌陷问题 概念 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距 不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷） 如图 示例 解决方案： 避免就好了。 3、嵌套块元素垂直外边距的合并问题 概念 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者， 即使父元素的上外边距为0，也会发生合并。 示例 4、圆角边框示例 实现如下效果 附上代码 5、盒子阴影 阴影语法格式 box-shadow: h-shadow v-shadow blur spread color inset; 前两个属性是必须写的。其余的可以省略。 属性值 示例 运行结果 你如果愿意有所作为，就必须有始有终。(7)