CSS margin全面了解

发布时间：2020-03-14 10:52:25 所属栏目：系统来源：站长网

导读：下面小编就为大家带来一篇CSS 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>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!