5 css盒子模型

5.1 css盒子模型图解

• margin:外边距
• border:边框
• padding:内边距

5.2 css盒子模型之宽度和高度

1. px 像素写死
   2. % 动态计算的单位(自适应 响应式)
   

   *{
    margin:0;
   padding:0;
   }
   .banner img{
    width:100%;
   }

5.3 内边距padding及简写

5.4 边框线border的使用技巧

border:边框的宽度 边框线类型 边框线的颜色

5.4.1 边框线类型

5.4.2 边框线类型

• solid 实线
• dashed 虚线
• dotted 点状线

5.4.3 边框线的颜色

border:10px solid #000
如果没有知名方向的情况下，表示四个方向都相等
border-top 上边
border-right 右边
border-bottom 下边
border-left 左边

5.4.4 去掉边框

border:0
如果border属性只有边框段杜，没有边框的类型和颜色 导致border属性失效

5.4.5 面试题(画个三角形)

 /* 
    三角箭头原理：正方形的任意相邻的两条边线
    然后旋转一定的角度得到我们需要的任意方向的箭头 
    deg 角度单位 rotate旋转角度
    三角形的大小由正方形的宽高去控制
    三角形的粗细是有边框线去控制
    三角形的颜色是有边框线的颜色去控制
 */
<div class="arrow"></div>
<style>
.arrow{
  width: 0px;
  height: 0px;
  margin-top: 50px;
  margin-left: 50px;
  border-width:0 30px 30px;
  border-style:solid;
  border-color:transparent transparent #333;
  transform: rotate(90deg);//控制角度
}
</style>

5.5 padding

方向上和padding一致

5.6 margin的负值使用技巧

结构上不动，可以调换div顺序

5.7 padding和margin的区别

padding 是内边距
会影响我们在浏览器中看到的元素的实际大小内边距会让元素的内容增大和其它的元素没有关系
margin 是外边距
不会影响我们在浏览器中看到的元素的实际大小外边距不会让元素的内容增大和另一个元素的间距

5.8 盒子模型的计算公式及使用技巧

元素实际宽度

宽度width + padding-left/padding-right+border-left/border-right

元素实际高度

高度height+padding-top/padding-bottom+border-top/border-bottom

口号: 元素的实际大小智慧padding和border的影响跟margin没有半毛钱的关系
如果加了padding和border的值要在width和height的值上减去padding和border的值 否则内容会溢出