特殊布局方式（宽度可变的正方形，三角形，垂直居中）

宽度可变的正方形

padding-bottom和定位配合 实现宽度可变的正方形，要设两个div
css

.box{
				position: relative;
				width: 30%;
				padding-bottom: 30%;
				background: red;
				/*overflow: hidden;*/
				
			}
			.position-box{
				position: absolute;
				text-align: center;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				
			}
			.position-box img{
				height: 100%;
			}

html

<div class="box">
			<div class="position-box">
				<img src="img/et-4_4f05e68.png"/>
			</div>			
		</div>

运行截图

画三角形

宽跟高设为0，左右边框设为全头名，上边框不需要（注释），
设置三角形 transparent全透明色彩
css

.triangle{
				width: 0px;
				height: 0px;
				/*border-top: 50px solid #FF0000;*/
				border-bottom: 50px solid royalblue;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
			}
			

html

<div class="triangle"></div>

运行截图

垂直居中

使用两个盒子嵌套 第一个 属性是 display:table 子元素的属性是display:table-cell,同时两个盒子都要vertical-align: middle;
css

.main{
				display: table;
				vertical-align: middle;
				width:300px;
				height: 300px;
				background: cornflowerblue;
			}
			.main-box{
				display: table-cell;
				vertical-align: middle;
				width: 100px;
				height: 100px;	
			}

html

<div class="main">
			<div class="main-box">
				<label>111</label>
			</div>
		</div>

运行截图