CSS盒子模型

• 盒子边框

  1. border-width：边框粗细
  2. border-color
  3. border-style：none（没有边框），solid（实线边框），dashed（虚线），dotted（点线）
  4. 连写：border: 1px solid red; —— 像素 样式 颜色
  5. border-top, border-bottom, border-left, border-right
  6. 表格合并相邻边框：给表格设置边框需要分别 给table和td设置边框，两者的边框重叠到一起会形成加粗的效果，可使多条边框合并为一条，border-collapse: collapse;（需要分别给table和td设置这个样式）

• 内边距

  1. padding，padding-top，padding-bottom，padding-left，padding-right
  2. padding后面接的值可以有多种情况，一个值：全部；两个值：上下 左右；三个值：上 左右 下；四个值：上 右 下 左
  3. padding会 撑开 带有固定width和height的盒子 使盒子变大，想给盒子padding但是又想 给定盒子的大小不变 只能改盒子的宽高，减去内边距的大小
  4. 同时需要注意给盒子加上边框时也会影响原本盒子的大小，解决办法同样是调盒子的大小，减去边框的宽度

• 外边距（margin）—— 和内边距类似

  • 外边距合并：相邻块级元素 的 垂直外边距合并（会自动合并，以最大的那个值为准）
  • 外边距塌陷 —— 嵌套元素垂直（只发生在垂直方向）外边距的合并（当外面的盒子和里面的盒子的顶端紧贴在一起时出现），解决方法：
    • 给外面的盒子添加边框
    • 设置溢出隐藏：overflow:hidden; —— 给外面的盒子添加的属性

• 系统中 会有默认的一些样式，在写CSS样式时一般 第一个样式设置 先把默认的样式先清除

  • { margin: 0; padding: 0; } —— 清除所有标签 默认的内边距和外边距，但是实际开发中一般不这样使用，因为浏览器解析 * 号的速度慢

• 盒子水平居中

  • margin：0 auto; —— 可以使盒子在水平方向居中，auto可以理解为自动充满（是使盒子水平居中的通常写法，上下的auto是不起作用的）
  • margin-left: auto; 盒子向右对齐（左边自动充满）
  • margin-right: auto;盒子向左对齐（右边自动充满）

• 如果没有给盒子指定width宽度，那么盒子会和父元素一样宽，即占满父盒子的宽度，此时给该子盒子设置padding时不会撑开盒子

  • 总结padding有的时候会撑开盒子有的时候不会，当没有给盒子指定宽度时就不会