【CSS】盒子模型

盒子模型中的属性

• 内容
  • width
    • 块级元素，独占一行，默认值为auto
    • 行内级元素，根据内容大小，包裹内容，默认值为auto
    • 行内元素，不能设置宽高
    • 行内不可替换元素img，默认值为图片的宽度
  • height:高度
  • max-width:最大宽度
  • min-width:最小宽度
• 内边距
  • padding-top:上内边距
  • padding-right:右内边距
  • padding-bottom:下内边距
  • padding-left:左内边距
  • padding：
    • 1个值：上下左右
    • 2个值：上下、左右
    • 3个值：上、右、下（左省略，使用right）
    • 4个值：上下左右
• 边框
  • border:上下左右
  • border:边框长度、实线、颜色
  • border:10px solid red;
  • border相对于content/padding/margin来说更特殊一点
    • 边框具备宽度width
    • 边框具备样式
    • 边框具备颜色
• 圆角（宽：200px，高：100px）
  • 百分比相对于谁？50%，相对于对于左上角来说，宽角度为100px,高为50px
  • 数值：通常来设置比较小的圆角
  • 百分比用来设置弧度或者圆形
• 外边距
  • 和内边距类似