18.11.30Java学习

今天主要学习了css里面的盒子模型结构这个概念，

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: 上左, 上右-下左, 下右
    - 4: 上左, 上右, 下右, 下左

元素显示

- 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