盒子模型

• 盒子模型
  • 实现页面布局的基础（基本上所有元素都遵循盒子模型布局）
  • 与生活中的盒子相似
  • 属性
    • 边框（border）
    • 内边距（padding）
    • 外边距（margin）
    • 元素内容
  • 边框（border）
    • 特点
      • 用于分隔不同元素
      • 本身占据空间
      • 一般有4条边框
    • 边框颜色（border-color）
      • border-color
        • 4个子属性
          • border-top-color
          • border-right-color
          • border-bottom-color
          • border-left-color
        • 注意
          • 后面的值为颜色（颜色设置有3种方式）
      • 设置颜色可以设置1-4个值，顺序遵循“上-右-下-左”
        • 2个值：上、右（其余找对边）
        • 3个值：上、右、下（其余找对边）
        • 4个值：上、右、下、左
        • 遵循“上-右-下-左”没有设置找对边
    • 边框样式（border-style）
      • 可以设置值有
        • solid 实线
        • dashed 虚线
        • dotted 点线
        • double 双线
      • 4个子属性
        • border-top-style
        • border-right-style
        • border-bottom-style
        • border-left-style
      • 同样遵循“上-右-下-左”没有找对边
    • 边框粗细（border-width）
      • border-width
        • 一般单位为px
      • 4个子属性
        • border-top-width
        • border-right-width
        • border-bottom-width
        • border-left-width
      • 同样遵循“上-右-下-左”没有找对边
    • border属性整合边框粗细、样式、颜色
      • 顺序遵循：粗 样 颜 （出 阳 炎）即粗细 样式 颜色
      • 4个子属性
        • border-top：顶部边框属性
        • border-right：右边边框属性
        • border-bottom：底部边框属性
        • border-left:左边边框属性
      • border
        • 只能同时设置4个方向
          • 块元素
          • 固定宽度
  • 拯救布局 box-sizing
    • border-box
      • 盒子的宽度或高度等于元素内容的宽度或高度
    • 案例
      • 如图，使用border-box的话，此处内容+边框粗细+内边距=100，即内容为88px；而如果默认的话，是将内容默认为100px，即将内容默认为100px，即内容+边框粗细+内边距=112px
      • box-sizing属性应用场景：在进行精确的页面排布布局时，可以综合考虑使用哪一种属性值
    • conter-box
      • 默认值，盒子的总尺度
  • 圆角边框（border-radius）
    • 顺序：从左上角开始，依次顺时针
    • 特殊案例
      • 圆形
        • 关键
          • 宽度和高度必须相同
          • 圆角的半径为元素的一半，或者直接设置圆角半径值为50%
        • 案例
          • 效果如图
      • 半圆
        • 关键
          • 宽度和高度比例1：2或者2：1
          • 设置制定位置的圆角半径值为50%
        • 应用
          • 制作上半圆或下半圆，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
          • 制作左半圆或右半圆，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
        • 案例
          • border-radius:50px 50px 0 0；
          • 如图
      • 扇形
        • 关键
          • 元素宽度、高度
          • 只取四个角中的一个角
          • 设置指定位置的圆角半径值为100%（圆角半径相同）
        • 案例
          • border-radius：0 50px 0 0 ；
          • 如图
    • 注意
      • 当圆角矩形的大小设置到某一值会达到极限值，此时再调整无效果
  • 盒阴影
    • 语法：box-shadow
•