加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

CSS margin全面了解

发布时间:2020-03-15 22:55:57 所属栏目:电商 来源:站长网
导读:副标题#e# 一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM

            <img src="%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />  

        </div><!--关闭container-->  

    </body>  

</html>  

二、margin的百分比数值

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

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

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

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <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>  

(编辑:核心网)

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

热点阅读