编程技术文章分享与教程

网站首页 > 技术文章 正文

css padding巧用

hmc789 2024-11-24 16:42:52 技术文章 1 ℃

css 制作自适应的正方形，padding的妙用。

绘制一个相对于父自适应的正方形，很多人，可能会想到使用aspect-ratio，其实使用padding同样能做到。

padding属性的百分比值是相对于父元素的宽度计算的，使用这个特性，就很容易做一个 相对于父容器的正方形了。

/*===========*/

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style lang="css">

.square{

width: 20%; //设置父元素的20%

height: 0; //不要高度

padding-bottom: 20%; //和width 保持相同比例，也是相对于父元素。

background-color: #f0f0f0;

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="square"></div>

</body>

</html>


Tags：

猜你喜欢

标签列表
最新留言