|
阅读：9466回复：2
自适应下的DIV固定宽高比（百分比各种属性的参照值）
题目：实现一个由九个正方形组成的九宫格，要求正方形的宽度为浏览器宽度的30%。
难点：如何在浏览器宽度发生变化的情况下实现正方形（高度）的尺寸自适应。 代码： style *{ margin: 0; padding: 0; } ul{ list-style-type: none; } ul::after{ content: ''; height: 0; display: block; clear: both; } li{ width: 30%; height: 0; padding: 15% 0; border-radius: 20%; margin: 2.5% 0 0 2.5%; background-color: orangered; float: left; } style <body> <ul> li*9 </ul> </body> 效果： 图片：QQ图片20190217181525.png  说明： li的宽度设置为30%，即为父级ul的30%，ul默认宽度其父级body的宽度，由于设置了*{margin:0; padding:0;}，即li的宽度相当于浏览器宽度的30%。 要保证li为一个正方形，因此要保证li的高度和宽度相等，又因为li的宽度为不确定值，所以不能设置li的高度为固定值（也不能设置为30%，因为此30%为其父元素ul高度的30%，显然不能保证和其宽度相等）。在不借助JS的情况下，所以必须要使li的高度和宽度都与其父级ul的宽度相关联。 “margin、padding的值设置为百分比时，其相对的百分比值为其父级元素的宽度”。 “border-radius的值设置为百分比时，其相对于的百分比值为元素本身的宽度和高度（在宽度方向上的圆角依照宽度的百分比计算，在高度方向上的圆角依照高度的百分比计算）”。 即设置li的padding：15% 0；其值为ul的宽度的15%，上下padding的总值即为ul的30%，也就能保证和其宽度相等了。 应用： 某个网页的banner图宽度为浏览器宽度的100%时，要保证其banner的宽度和高度比例固定（不使用img标签）。 代码： .banner{ width: 100%; height: 0; padding: 50% 0; position: relative; background-image: url(""); } .banner_child{ position: absolute; } 设置position是为了方便banner子元素的布局。 [第七颗皮蛋于2019-02-17 20:43编辑了帖子]
|
|
|
沙发#
发布于：2019-02-17 20:59
|
|
|
板凳#
发布于：2019-02-17 20:23
百分比引用二：
利用 position 和 transform:translate()； 实现父元素和子元素均不知道宽度和高度情况下的水平垂直居中。 代码： .parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 说明： position:ansolute；定位中top:50%；left:50%；是相对于父级元素的高度（top:50%）和宽度（left:50%）的百分比来计算。transform:translate(-50%,-50%)中的百分比是相对于元素自身的宽度和高度的百分比来计算的。因此能实现水平垂直居中。 |
|
