两种盒子模型 + CSS利用 border 画三角形

margin：外边距    -top -bottom -left -right 上下左右   (一个数字：全部    两个数字：上下+左右     四个数字：上右下左 顺时针)

border：盒子本身    粗细   样式  solid实线  dashed虚线    颜色

padding：内边距

 

标准盒子模型（W3C盒模型）：

1、给一个标签添加：box-sizing:content-box；(元素默认) 　　这个标签就转换为了w3c盒模型

2、标签的实际宽度 = 设置的宽度 + border宽度 + padding的宽度  　　// 内容的宽度 = 设置的宽度

 

怪异盒子模型（IE盒模型）：

1、给一个标签添加：box-sizing:border-box；　　这个标签就转换为了怪异盒模型

2、标签得实际宽度 = 设置的宽度（从设置的宽高中减去border和padding的值，才是内容的宽高。）　　// 内容的宽度 = 设置的宽度 - 左右border - 左右padding

 *** 高度也是这样 ***

 

 通常先把所有的默认值都改为0：

 

html,body,#app{

    /* width: 100%; */

    height: 100%;

    margin: 0;

    padding: 0;

}

 

 元素居中  margin: 0 auto;

 

 

 

 

---

利用border画三角形

<div class="abc"></div>

//高度 宽度 都设置为0，中心才能是尖的
//border 都设置为200px则是正方形
//不设置border0-top则只有一半的正方形
//再设置左右为透明色（transparent）就可以得到三角形
.abc{
  height: 0;
  width: 0;
  margin:200px;        //外边距
  border-left: 200px solid transparent;        
  border-right: 200px solid transparent;
  border-bottom: 200px solid red;
}