day05文本样式与盒子模式

day05
简单了解了css的一些基础属性，今天来看一看文本以及模型。

1、字体修饰

字体大小 ：font-size: 50px;
字体粗细：font-weight: bold;\lighter\normal\bolder\100-900
字体属性：font-style : italic;斜体
字体： font-family : arial;
字体颜色：color: #f40;
颜色
1、单词 ： color:transparent
2、颜色代码：color:#ffffff; r(0~ff) g(0~ff) b(0~ff)
3、颜色函数 : color : rgb(255,255,255)

2、文本格式
text-decoration: underline;\overline\line-through 文字划线
text-align:center;right\水平对齐方式
height: 200px;
line-height:24px;\单行文本所占高度，行间距。
* height=line-height\单行文本垂直居中*
text-indent:2em;\首行缩进em=font-size;
line-height: 1.2em;\1.2倍行高1.2*20=24px;

3、边框border

border:1px solid black;

由三个属性组成：border-width  border-style  border-color

每个属性可单独设置：border-style：solid \ dotted \ dashed
每条边可分开设置：border-left: 1px solid red;
每条边的不同属性也可单独设置：border-left-width: 100px;

3、盒子模型

由外向内 margin-border-padding-content
1、margin是外边距，不可视的，可分别对四边进行设置。
margin-left\right\top\bottom（margin：—，—，—，—，）
顺时针表示为上右下左：
margin : 1px 2px 1px 2px 等价于 margin: 1px 2px
margin: 1px 2px 3px 等价于 margin： 1px 2px 3px 2px
margin: 1px 等价于 margin：1px 1px 1px 1px
2、border前面已经讲到
3、padding为内边距（同margin）
4、content为盒子内容
ps:很多标签自带margin或padding。如body自带margin：8px；

做远视图加深对盒子的了解

html

<div class="wrapper1">
	<div class="wrapper2">
		<div class="wrapper3">
			<div class="wrapper4">
				<div class="wrapper">
					<div class="content0">
						<div class="content1">
							<div class="content2"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

css

.content2{
	width:10px;
	height:10px;
	background-color: #fff;
}

.content1{
	width:10px;
	height:10px;
	background-color:green;
	padding:10px;
}
.content0{
	width:30px;
	height:30px;
	background-color: #fff;
	border:10px solid #fff;
}
.wrapper{
	width:50px;
	height:50px;
	background-color:green;
	padding:10px;
}
.wrapper4{
	width:70px;
	height:70px;
	background-color:#fff;
	border:10px solid #fff;
}
.wrapper3{
	width:90px;
	height:90px;
	background-color:green;
	padding:10px;
}
.wrapper2{
	width:110px;
	height:110px;
	background-color:#fff;
	border:10px solid #fff;
}
.wrapper1{
	width:130px;
	height:130px;
	background-color:green;
	padding:10px;
}

                                                                   2018.9.18