CSS margin全面了解(4)

发布时间：2020-03-15 14:09 所属栏目：52 来源：站长网

导读：imgsrc=%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpgalt=apicturestyle=width:200px;height:300px/ /div!--关闭container-- /body /html 二、margin的百分比数值

</div>

</body>

</html>

二、margin的百分比数值

当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。

请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

<title>margin的百分数值</title>

<style>

.container {

width: 500px;

height: 300px;

margin: 50px auto;

background-color: orange;

border: 1px solid black;

}

.box {

width: 250px;

height: 150px;

margin-left: auto;

margin-right: auto;

background-color: cyan;

}

.box1 {

margin-top: 75px;

margin-bottom: 75px;

padding: 5px;

}

.box2 {

margin-top: 25%;

margin-bottom: 25%;

padding: 5px;

}

</style>

</head>

<body>

（编辑：ASP站长网）