盒子模型
-
边框
-
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