盒模型基础(边框 内边距 外边距)

盒模型基础：
盒模型包含：填充内容、内边距(padding)、边框(border)、外边距(margin)。
盒模型 在这里插入图片描述
在运行网页中右键 检查，点击要选择的对象即可看到对应盒模型


1.内边距（padding）

			方式1.上下左右均填充20px
		 padding:20px
		方式2. 上下 左右 分别填充
		 padding: 10px 20px
			方式3.上 左右 下 分别填充
		 padding:20px 50px 0px
			方式4.上 右 下 左 分别填充
		 padding:10px 20px 0px 30px
			方式5.直接指定方向 
		 padding-(方位)
			没有优先级 从上往下跑

给一个值：上下左右都间隔30px

加了padding值不会紧贴外侧，但会改变整个盒模型大小
2.给两个值 第一个值代表距离上下 第二个值代表距离左右


3.给三个值：第一个值代表距离上侧距离，第二个值代表距离左右距离 第三个值代表距离下侧距离

4.给四个值顺序为上右下左

2.边框（border）
常用属性
border-width:5px
border-color:没颜色默认黑色
border-style: 边框风格
dotted （点状）

			solid（实线） 

			double（双线）

			 dashed（虚线）;

可以指定方向 padding-(方位)
综合写法： border:3px dotted pink;

边框可给某一方向空值：border-left：none
3.外边距（margin）
margin 外间距 是标签与标签外边的间隔
写法同padding
一般使用 margin：0 auto给块元素 居中
若有两个盒子上下排布 给第一个盒子下边距 给第二个盒子上边距
则按照边距大的执行

只给第一个盒子：下边距为10px时

同时给第一个盒子下边距10px 第二个盒子上边距50px时
间距为50px
2.左右情况
先给第一个盒子右边距10px
再给第二个盒子左边距40px

两盒子间距50px 第一个盒子右边距+第二个盒子左边距

若有两个盒子左右排布 给第一个盒子右边距 给第二个盒子左边距
则边距为两个盒子边距和