第二次作业问题和方法

注：第二次作业减少了position属性的使用 更多的是使用margin和padding以及其他属性调节网页布局 并考虑网页兼容性问题。

盒模型的居中

水平居中

//html
<div class="father">
	<div class="son“>
		test
	</div>
<div>

//css
//方法1 使用margin：0 auto  此方法若元素浮动则不起作用。
.father{
			height: 500px;
			width: 500px;
			background: blue;
}
.son{
 			height:200px;
			width: 200px;
			margin:0 auto;
			background: green;
}

//方法2 内联元素利用 text—align: center 实现水平
.father{
			height: 500px;
			width: 500px;
			text-align: center;
			background: blue;
		}
		.son{
			height:200px;
			width: 200px;
			background: green;
			display: inline-block;
		}
//方法3 使用绝对定位实现：
.father{
			height: 500px;
			width: 500px;
			position: relative;
			background: blue;
		}
		.son{
			height:200px;
			width: 200px;
			background: green;
			position: absolute;
			left: 50%;
			margin-left: -100px;  /*行宽的一半*/
		}

垂直居中

//html同上
//css 
//方法一 绝对定位实现
.father{
			height: 500px;
			width: 500px;
			position: relative;
			background: blue;
		}
	.son{
			height:200px;
			width: 200px;
			background: green;
			position: absolute;
			top: 50%;
			margin-top: -100px;/*行高的一半*/
		}
//方法二 内联元素 vertical-align: middle; 
通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的
//注：若要IE7-浏览器支持，则可以将其改为<table>表格结构
//注： 设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。
.father{
			height: 500px;
			width: 500px;
			background: blue;
			display: table-cell;
			vertical-align: middle;
		}
		.son{
			height:200px;
			width: 200px;
			background: green;
		}

flex布局之后会补充

div内文本溢出自动换行

word-break: break-all;white-space: normal;

break-all: 遇到换行的最后一个单词时，会把单词截断
break-word：遇到换行的最后一个单词时，会把最后一个长的单词放到新的一行。

svg格式的图片改变背景

通过改变fill属性 改变颜色

参考链接：
https://segmentfault.com/a/1190000011130780
https://blog.csdn.net/lan_liang/article/details/45228201