关于css中body的margin属性margin:1em 10%;的问题

最新推荐文章于 2022-08-05 23:50:13 发布

圣西罗小码农

最新推荐文章于 2022-08-05 23:50:13 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/m0_37196530/article/details/89331733

版权

最近学习前端js知识，但是对css不甚了解，看到一个案例“美女画廊”，对其中css语法有些疑问，百度之后发现，有个别人也有类似的困惑，但是解决的人说的不清不楚，于是我还是自己根据理解大胆测试了一下，终有所获。其实也是非常基础的东西，话不多说，摆上美女吧，呵呵，案例！

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 2em 10%;
        }

        h2 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
<h2>
    美女画廊
</h2>
<ul id="imagegallery">
    <li><a href="../../images/1.jpg" title="美女A">
        <img src="../../images/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="../../images/2.jpg" title="美女B">
        <img src="../../images/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="../../images/3.jpg" title="美女C">
        <img src="../../images/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="../../images/4.jpg" title="美女D">
        <img src="../../images/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>

<div style="clear:both"></div>
<img id="image" src="../../images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>
    var aObjs = my$("imagegallery").getElementsByTagName("a");
    for(var i=0; i<aObjs.length;i++){
        aObjs[i].onclick=function(){
            my$("image").src=this.href;
            my$("des").innerText=this.title;
            return false;
        }
    }
</script>
</body>

这个案例实现的功能很简单，就是点击小图片的美女就在底下显示大图片的美女。唯一让我疑惑的就是<style>标签中margin:2em 10%;当我去改变数值的时候，上下边距是会变化的，这符合css对于margin的定义，但是我想知道的是这种变化是相对于哪个盒子？其实很简单，只要我们设置一下html的样式就一目了然了（很多人说是相对于浏览器，至少我不认同，也不知道这个浏览器和html是不是一样的呢）。

html{
    background: hotpink;
}
body {
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 2em 10%;
}

好的，这里就截取小部分css，其他的都没变化。

看到设置后的效果相信大家就明白了，你再怎么设置margin的左右值（上面同理），左右的pink颜色区域都是x%（相对于html元素），

圣西罗小码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css中body的margin属性margin:1em 10%;的问题

最近学习前端js知识，但是对css不甚了解，看到一个案例“美女画廊”，对其中css语法有些疑问，百度之后发现，有个别人也有类似的困惑，但是解决的人说的不清不楚，于是我还是自己根据理解大胆测试了一下，终有所获。其实也是非常基础的东西，话不多说，摆上美女吧，呵呵，案例！<head> <meta charset="UTF-8"> <title>T...
复制链接

扫一扫