css正方形盒子 自适应
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<style> | |
*{ | |
margin:0; | |
padding:0; | |
} | |
.box{ | |
display:inline-block; | |
margin: 1%; | |
width: 30%; | |
background: #ff6600; | |
padding-top: 30%; | |
} | |
</style> | |
</head> | |
<div class="box"></div> | |
<body> | |
//说明:一个不设置宽高的盒子,如何成为一个正方形:为啥padding-top:30%,width:30%就可以呢 因为padding-left;padding-top:padding-right;padding-bottom:设置的百分比是按照父级元素的宽度定的,所有只要其中任何两个组合就,在再加上相同的百分比,就可以成为一个随父级元素自适应的正方形,当然,如果盒子里有东西,会被撑开。 |
|
</body> | |
</html> |
人活着,最重要的就是开心