div盒子的基本使用

div样式列表

外边距属性:

• 上外边距 margin-top: 20px;
• 右外边距: margin-right:20px;
• 左外边距: margin-left:20px;
• 下外边距: margin-bottom: 20px;
• 简写1: margin: 上 右 下 左;
• 简写2: margin: 上下 左右;
• 居中: 有宽度的盒子才能够居中, 没有设置宽度的盒子不能够居中: margin: auto; margin: 0 auto;
• 解决外边距重合方式: 在父元素添加: overflow: hidden;

边框

• 设置div边框: border: 大小 颜色 线体;
• 设置边框宽度: border-width: 20px;
• 设置边框颜色: border-color: red;
• 设置边框线体样式: border-style: solid;
• 分别设置上下左右边框: border-[上, 下, 左, 右]- width: 20px;

内边距

• 上内边距: padding-top: 20px;
• 下内边距: padding-bottom: 20px;
• 左内边距: padding-left: 20px;
• 右内边距: padding-right: 20px;
• 简写: padding: 20px; 代表上下左右
• 简写2: padding: 20px 20px; 上下 左右

---

特点

• 默认宽度, 自动将盒子宽度拉伸到最大
• 默认高度为0 , 可以由子元素将父元素的高度撑起来
• 块级元素独占一行

外边距效果

• HTML排列方向: 从左往右, 从上往下 文档流的形式

• 内联元素: 没有垂直方向的外边距, 但是可以有margin-left 和margin-right

• 上边外边距效果:
  
  

• 左边外边距效果

• 

内边距

• 内边距效果: