前端学习第三天

边框
- 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
    代码：
    
    
    运行结果：
    
    代码：
    
    
    
    运行结果：
    
    思维导图