css元素子元素自适应大小的两种方法

简单说下css中子元素自适应大小的两种办法

1. 子元素设置百分比

<div class="box">
	<div class="content"></div>
</div>

.box{
	margin:100px auto;
	width: 100px;
	height: 100px;
	background: rgba(0, 0, 0, 0.6);
}
.content{
	width: 80%;
	height: 80%;
	margin-top: 10%;
	margin-left: 10%;
	background-color: palevioletred;
}

$('.box').click(function(){
	$(this).height('500px');
	$(this).width('500px')
})

2. 子元素不设置宽高（必须），通过定位来实现元素自适应大小
补充说下，我也是听好朋友说的才发现还有这种操作，感觉很神奇~~哈哈

.content{
	position: absolute;
	top: 10%;
	left: 10%;
	bottom: 10%;
	right: 10%;
	background:sandybrown
}

在开发过程中可以根据不同情况合理运用