CSS盒模型、内间距和外间距

盒模型

所有的元素都是在页面中显示成一个方块，类似一个盒子

把元素叫做盒子，设置对应的样式分别为：盒子的边框（border），盒子中的内容与盒子边框之间的间距（内间距），盒子与盒子之间的间距（外间距）

---

盒子的实际大小是：

盒子的宽度 = 内容宽度 + 左右边框 + 左右内边距（padding）
盒子的高度 = 内容高度 + 上下边框 + 上下内边距（padding）

如果要增加内边距和边框的大小，又不想改变盒子的大小，可以使用：

box-sizing: border-box;

块级元素，行内元素，行内-块元素

块级元素的特点：

<!--块级元素独占一行。
	如果不设置宽度，那么它的默认宽度是父级元素的宽度。
	支持所有的样式。-->
	
.box1{
	width: 100px;
	height: 100px;
	background: green;
	margin: 20px;
	padding: 20px;
}

行内元素：

<!--行内元素不独占一行。
	行内元素不支持设置宽高，宽高是由内容撑开的。
	代码换行，盒子会产生间距。
	盒子都是并行在一行的。
	只可以设置左右margin值。
	padding四周都可以设置。
	子元素是行内元素的，父元素可以设置text-align和line-height设置水平和垂直居中
-->

.span1{
            background: deeppink;
            font-size: 50px;
        }

行内块元素

<!--支持块元素的全部样式，也有行内元素的特性
	如果没有设置宽高，宽高由内容决定
	代码换行，盒子会产生间距
	子元素是行内块元素的话，父元素可以设置text-align和line-height设置水平和垂直居中-->

display用来设置元素以什么类型显示

   常用的属性值有：
      	none: 元素隐藏且不占位置
      	line:	以行内元素显示
      	block：以块元素显示
      	inline-block：以行内块元素显示
	.box{
		width: 100px;
		height: 100px;
		
		<!--元素以行内元素显示-->
		display: line;
		
		<!--元素以块元素显示-->
		display: block;
		
		<!--元素以行内块元素显示-->
		display: inline-block;
		
		<!--让元素隐藏，并且隐藏元素不会再占位-->
		<!--如果想让隐藏的元素在鼠标悬停的时候显示出来，可以在:hover里设置一个display: block;-->
		display: none;
	}

CSS内边距padding

<!--设置元素的内边距（padding），让内容和元素边框（border）有一定的距离-->
.odiv1{
	width: 200px;
	height: 200px;
	background: red;
	<!--在使用padding的时候，会改变元素本来的大小。如果只设置一个值，那么他会同时改变上下左右的内边距-->
	padding: 20px;
}

<div class="odiv1"> 文本内容 </div>

CSS外边距margin

<!--设置元素的外边距，是让当前元素和四周的元素产生距离，默认各元素的外边距是0，即两个div是贴合在一起的-->
div{
	width: 200px;
	height: 200px;
}
.box1{
	background: red;
	<!--设置元素box1的下外边距，让box1的下方和box2的上方有20px的距离-->
	margin-bottom: 20px;
	
	<!--如果设置两个值得话，那么第一个值代表上下，第二个值代表左右，padding同理-->
	//margin-bottom: 20px 50px;
	
	<!--用外边距设置元素水平居中，不能垂直居中-->
	//margin: auto;
	
	<!--margin还可以设置负值，使当前元素和另一元素边框合并，或者覆盖另一元素-->
	//margin-top: -100px;
}
.box2{
	background: blue;
}

<div class="box1"><div>
<div class="box2"></div>