CSS 盒子模型 #

CSS 盒子模型图解 #

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

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

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

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

内边距 - padding #

边框线 - border #

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

边框线类型 #

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

边框线的颜色 #

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

去掉边框 #

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

面试题（画个三角形） #

 /*
    三角箭头原理：正方形的任意相邻的两条边线
    然后旋转一定的角度得到我们需要的任意方向的箭头
    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>

外边距 - margin #

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

padding 和 margin 的区别 #

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

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

元素实际宽度 #

宽度 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 的值 否则内容会溢出