css属性

6. 属性
	1. 字体、文本
		* font-size:字体大小
		* color:文本的颜色
		* text-align:对齐方式
		* line-height:行高
	2. 背景
		* background:背景颜色，复合属性
	3. 边框和轮廓
		* border:设置边框，复合属性
	4. 尺寸
		* width: 宽度
		* height: 高度
	5. 盒子模型:控制布局
		* margin: 外边距
			* margin-bottom
			* margin-left
			* margin-right
			* margin-top
		* padding: 内边距
			* 默认情况下内边距会影响整个盒子的大小
			* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

		* float: 浮动
			* left: 左浮动
			* right：右浮动

<!-- 字体 -->
<style type="text/css">
	p{
		color: red;
		font-size: 30px;
		text-align: center;
		line-height: 100px;
		/*
			border 边框
		*/
		border: 1px solid red;
	}

	div{
		border: 1px solid red;
		/*
			尺寸
		*/
		height: 200px;
		width: 200px;
		/*
			背景
		*/
		background: url("image/logo.jpg") no-repeat center;
	}
</style>

<p>传智播客</p>
<div>黑马程序员</div>

<!-- 盒子模型-->
<style type="text/css">
	div{
		border: 1px solid red;
		width: 100px;
	}

	.div1{
		width:100px;
		height: 100px;
		/* 外边距*/
		margin: 50px;
		margin-left: 50px; 
	}

	.div2{
		width:200px;
		height: 200px;
		/* 内边距*/
		padding: 50px;
		/* 设置盒子的属性，让width和height就是最终盒子的大小*/
		box-sizing: border-box;
	}

	.div3{
		float: left;
	}

	.div4{
		float: left;
	}

	.div5{
		float: right;
	}

</style>

<div class="div1">
	<div class="div2">
		
	</div>
</div>

<div class="div3">aaaa</div>
<div class="div4">bbbb</div>
<div class="div5">cccc</div>