CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型

盒子模型

• 盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；
• 盒子里面的文字和图片等元素是内容区域；
• 盒子的厚度 我们称为 盒子的边框；
• 盒子内容与盒子之间的距离是内边距；
• 盒子与盒子之间的距离是外边距；

标准盒子模型

盒子边框（border）

border: border-width || border-style || border-color

border-style ：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线；
• dashed：边框为虚线；
• dotted：边框为点线；

表格细线边框

• 通过表格的 cellspacing="0"，将单元格与单元格之间的距离设为 0
• 但是两个单元格之间的边框会出现边框，从而使边框变粗；
• 通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起；

<style>
  table,
  th,
  td {
    border: 1px dashed #ccc;
    border-collapse: collspase;
  }
</style>

内边距（padding）

当我们为盒子添加了内边距之后

• 内容和边框有了距离；
• 盒子变大了；

复合写法

padding: 10px 20px 30px 40px;

• 一个值 ： 上下左右 10 px；
• 两个值 ： 上下10px，左右20px；
• 三个值 ： 上10px，左右20px，下30px；
• 四个值 ： 上10px，右20px，下30px，左40px；顺时针

内盒尺寸计算 （元素实际大小）

• 宽度：ElementHeight = content height + padding + border
• 高度：ElementWidth = content width + padding + border
• 盒子实际大小 = 内容的宽度和高度 + 内边距 + 边框

padding不影响盒子大小的情况

如果没有给一个盒子指定宽度，此时如果给这个盒子指定 padding，则不会撑开盒子。

外边距

复合写法

margin 值的简写代表含义，与 padding 值完全一致

块级盒子水平居中

• 让一个块级盒子实现水平居中，必须：
  • 盒子必须指定宽度；
  • 然后给左右的外边距设置为 auto
• 实际工作中常用 .container {width: 960px; margin: 0 auto;}
• 常见的写法包含：
  • margin-left：auto；margin-right：auto；
  • margin：auto；
  • margin：0 auto；

文字居中与盒子居中的区别

1. 文字水平居中是 text-align: center;，而且还可以让行内元素和行内块元素居中对齐
2. 盒子水平居中是 左右 margin 改为 auto；

插入图片和背景图片区别

1. 插入图片 用的最多的是比如产品类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标或者超大背景图片，背景图片只能通过 background-position

img {
    width: 200px; /* 更改插入图片的大小 */
    height: 210px;
    margin-top: 30px; /* 更改插入图片的位置 可以用 padding 或 margin 盒模型 */
    margin-left: 50px;
}
div {
    width: 400px;
    height: 400px;
    border: 1px dashed #ccc;
    background: #fff url(image/image.png) no-repeat scroll;
    background-position: 30px 50px; /* 背景图片更改位置 */
}

清除元素默认的内外边距

* {
  margin: 0;
  padding: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距；

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距合并

相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom 下面的元素有上外边距 margin-top，则他们之间的垂直间距是取两者值中较大者，这种现象称为相邻块元素垂直外边距合并（也称外边距塌陷）

嵌套块元素垂直外边距合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上边距及边框，父元素的上外边距会与子元素的上外边距发生合并；合并后取两者中较大者；
• 解决方案：
  • 可以为父元素定义上边框
  • 可以为父元素定义上内边距
  • 可以为父元素添加overfolw：hidden
• 还有其他的方法比如浮动、固定、绝对定位的盒子不会有问题；

圆角边框 （CSS3）

border-radius: length;
/* 数值也可以为百分比形式，如果需要一个盒子变成圆 可以指定 50% */

盒子阴影 （CSS3）

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);

原文地址：https://www.cnblogs.com/article-record/p/12250755.html