相信刚开始写WEB前台页面的时候，经常会有一些搞得不太清楚的CSS样式：如margin和padding、absolute和relative！
一、对于margin和padding来说，不太注意的话，感觉这两者区别不大。但要写一个好的页面出来，还是需要对这二者的区别熟悉：
区别其实总结起来就是一句话：margin是对外的边距，padding是对内的边距
示例：
<div style=”width:400px;height:400px;border:1px solid grey;”>
<div style=”width:300px;height:300px;border:1px solid red;margin-left:10px;padding-left:10px;”>
<div style=”border:1px solid green;padding:10px;margin:10px;”><span>你好</span></div>
</div>
</div>
span距离第三个div的距离是10px(指上和左边距) //padding:10px起的作用
span距离第二个div的距离是30px和20px(指左和上边距) //padding:10px、margin:10px、padding-left:10px起的作用
span距离第一个div的距离是40px和20px(指左和上边距) //padding:10px、margin:10px、padding-left:10px、margin-left:10px起的作用
第三个div距离第二个div的距离是10px和20px(指上和左边距) //margin:10px、padding-left:10px起的作用
第三个div距离第一个div的距离是10px和30px(指上和左边距) //margin:10px、padding-left:10px、margin-left:10px起的作用
第二个div距离第一个div的距离是10(指左边距); //margin-left:10px起的作用
需要注意的是：在写页面时，一般要把body的默认属性设置为”*{margin:1px;padding:1px;}”
二、CSS样式position中的absolute和relative的用法与区别：
顾名思义:absolute表示相对定位，relative表示绝对定位：
position|absolute：一般用于该容器相对于浏览器来说的，配合着top、left、right、bottom使用。
父级有 position 属性，父级的“坐标原始点”为原始点:(第二个div距离第一个div的距离为20px<指左边>，距离body的距离为40px<指左边>)
<body>
<div style=”width:500px;height:500px;position:relative;left:20px;”>
<div style=”width:100px;height:100px;position:absolute;left:20px;”></div>
</div>
</body>
父级没有position 属性,以浏览器的最顶端为原始点(第二个div距离第一个div的距离为0px<指左边>，距离body的距离为20px<指左边>)
<body>
<div style=”width:500px;height:500px;margin-left:20px;”>
<div style=”width:100px;height:100px;position:absolute;left:20px;”></div>
</div>
</body>
position|relative：是相对定位，是相对于父级来定位的，要是无父级，就以body为原始点，配合着margin来使用。
今天的文章CSS之margin和padding、absolute和relative用法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/25675.html
