内外边距和盒子模型相关

• 什么是内边距
  • 边框和内容之间的距离就是内边距
• 格式
  • 非连写
    • padding-top: ;
    • padding-right: ;
    • padding-botton: ;
    • padding-left: ;
  • 连写
    • pdding:上 右 下 左;
• 注意点:
  • 给标签设置内边距之后,标签占有的宽度和高度会发生变化
  • 给标签设置内边距之后,内边距也会有背景颜色

---

• 什么是外边距
  • 标签和标签之间的距离就是外边距
• 格式
  • 非连写
    • margin-top: ;
    • margin-right: ;
    • margin-bottom: ;
    • margin-left: ;
  • 连写
    • margin:上 右 下 左;
• 注意点
  • 外边距的那一部分是没有背景颜色的

---

外边距的合并现象

• 在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大就听谁的
• 左右浮动时外边距会叠加

 

 

盒子模型

 

• 什么是CSS盒子模型?
  • CSS盒子模型仅仅是一个形象的比喻,HTML中所有的标签都是盒子

 

 

• 结论
  • 在HTML中所有的标签都可以设置
  • 宽度/高度 == 指定可以存放内容的区域
  • 内边距 == 填充物
  • 边框 == 手机盒子自己
  • 外边距 == 盒子和盒子之间的距离

 

 

• 内容的宽度和高度
  • 就是通过width/height属性设置的宽度和高度
• 元素的宽度和高度
  • 宽度 = 左边框 + 左内边距 + width +右内边距 +右边框
  • 高度 = 上边框 + 上内边距 + height +下内边距 +下边框
• 元素空间的宽度和高度
  • 宽度 = 左外边距 + 左边框 + 左内边距 + width +右内边距 +右边框 +右外边距
  • 高度 = 上外边距 + 上边框 + 上内边距 + height +下内边距 +下边框 +下外边距
• 控制一个盒子在水平方向居中
  • margin: 0 auto; 垂直方向无效
  • margin:0 auto;与text-align:center;的区别
    • margin:0 auto;是用来设置盒子本身居中的
    • text-align:center;是用来设置盒子内部的文字、图片相对于盒子本身居中的

---

overflow属性

当两个盒子嵌套,内部的盒子尺寸大于外部的盒子尺寸时,用来控制超出外部盒子的部分的显示方式

如下图,红色盒子里嵌套了个绿色盒子,但绿色盒子的尺寸大于红色盒子,此时红色盒子的overflow:visible; 也就是默认属性,不剪裁

 

在红色盒子里设置属性overflow:hidden;后,超出的部分被裁减掉了