11-30

盒子模型

• 边框

  • border: width style color;

    • border: 1px solid red;

  • border-width: 10px;

  • border-style: solid, dashed, dotted;

  • border-color: red;

  • border-radius:

    • 1: 上左, 上右, 下右, 下左
    • 2: 上左-下右, 上右-下左
    • 3: 上左, 上右-下左, 下右

• 元素显示

  • display: block, inline, inline-block, none;

  • display: none;和visibility: hidden;的区别

    • display: none; 隐藏元素，元素还在页面上，但是元素不占用页面位置
    • visibility: hidden; 隐藏元素，元素还在页面上，并且元素还占着页面位置

• 盒子模型

  • margin: 外边距

  • padding: 内边距、填充

  • border: 边框线

  • content: 内容

  • margin:

    • 1: 上右下左
    • 2: 上下, 右左
    • 3: 上, 右左, 下
    • 4: 上, 右, 下, 左

  • padding:

    • 1: 上右下左
    • 2: 上下, 右左
    • 3: 上, 右左, 下
    • 4: 上, 右, 下, 左

• Box Sizing

  • content-box;
  • border-box;
  • padding-box;

• 开发者工具

  • elements