盒模型基础知识简述

盒模型

• HTML中，万物皆是盒模型
• 只要HTML中的标签，你都可以通过设置盒模型相关的内容，对这个元素产生影响

盒模型的组成

• 月饼　content ：width；height
• 填充物　　padding：内边距
• 月饼盒　border：边框
• 月饼盒外　margin：外边距

content

• width
• height

背景

• 设置背景颜色：background-color　颜色的写法
  
  • 1、英文
  • 2、#ffffff
  • 3、rgb()
  • 4、rgba()
• 设置背景图片：background-image　url()
• 设置背景重复方式：background-repeat
  
  • 1、repeat（重复）
  • 2、repeat-x
  • 3、repeat-y
  • 4、no-repeat
• 设置背景定位：background-position：如果设置了一个数值，另外一个数值默认是center
• 背景的复合写法：background
  
  • 书写顺序：
  • 1、颜色
  • 2、图片
  • 3、定位
  • 4、重复方式
• 背景随着页面的滚动：background-attachment，会造成偏移
  
  • scroll：滚动，默认值
  • fixed：固定的
• 设置背景图片尺寸：background-size： CSS 3 的属性，可以设置背景图片的大小

---

padding

• 用于控制 盒子内容 和 盒子边框 之间的位置
• 内边距
  
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • 复合写法
  • 如果四个值，分别对应：上、下、左、右
  • 如果三个值，分别对应：上、左右、下
  • 如果两个值，分别对应：上下、左右
  • 如果一个值，四周都相同

---

border

• 边框
• border
  
  • 书写顺序
  • 宽度
  • 样式
  • 颜色
  • 样式
  • solid：实线
  • double：如果宽度为1px，无效果
  • dotted：点状线，在大部分浏览器显示为实线
  • dashed：虚线，在大部分浏览器显示为实线
• border-width
• border-color
• border-style
• border-radius：CSS3的属性

---

margin

• 外边距
• 专门用于控制盒子和盒子之间的一个位置
• 可以设置负数
• margin有两种特殊情况：
  
  • 如果两个元素是兄弟关系：第一个元素的 margin-bottom 和第二个元素的 margin-top 会产生叠压(去绝对值最大值)
  • 如果两个元素是父子关系：子级第一个元素的margin-top会传递给父级
  • 解决方案：
    
    • 给父级设置边框
    • 给父级设置 overflow：hidden
    • 给父级设置 padding 注意盒子的大小

---

盒模型的实际大小

• 横向：border-left + padding-left + width + padding-right + border-right

• 纵向：border-top + padding-top + height + padding-bottom + border-bottom