zoukankan      html  css  js  c++  java
  • 「网易官方」极客战记(codecombat)攻略-网页开发2-边际效用-marginal-utility

    (点击图片进入关卡)

    边距和填充用于分离内容。

    简介

    margin 和 padding 用于在元素和其他元素之间以及元素内创建空白。

    div {
        padding: 30px;
        margin: 30px;
    }

    默认代码

    <!-- 边距和填充用于布局元素。 -->
    <!-- 边距是元素之间的空间。 -->
    <!-- 填充是内容和…之间的距离。 -->
    <!-- …元素的边界。 -->

     

    <style>
        body {
            text-align:center;
        }
        img {
            border:1px black solid;
        }
        .paddedImage {
            /* 填充是内容和边界之间的空间。 */
            padding:30px;
        }
        .marginImage {
            /* 边距是元素之间的空间。 */
            margin:30px;
        }
        div {
            border:1px black solid;
            /* 将边距属性添加到所有div元素: */

     

            /* 将填充属性添加到所有div元素: */

     

        }
    </style>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
    <div>
        我是一个div!
    </div>
    <div>
        我也是。
    </div>
    <div>
        别忘了我!
    </div>

    概览

    边距

    margin 用来增加元素之间的空间。如果运用的话,就会发生在 border 之外。

    .spacedDivs {
        margin: 300px;
    }

    填充

    padding 用于增加元素内部和元素的边界之间的空间。如果运用的话,就会发生在 border 内。

    .paddedDivs {
        padding: 300px;
    }

    边际效用 解法

    <!-- 边距和填充用于布局元素。 -->
    <!-- 边距是元素之间的空间。 -->
    <!-- 填充是内容和…之间的距离。 -->
    <!-- …元素的边界。 -->

     

    <style>
        body {
            text-align:center;
        }
        img {
            border:1px black solid;
        }
        .paddedImage {
            /* 填充是内容和边界之间的空间。 */
            padding:30px;
        }
        .marginImage {
            /* 边距是元素之间的空间。 */
            margin:30px;
        }
        div {
            border:1px black solid;
            /* 将边距属性添加到所有div元素: */
            margin:30px;
            /* 将填充属性添加到所有div元素: */
            padding:30px;
        }
    </style>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="paddedImage" src=
        "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
        <img class="marginImage" src=
        "http://direct.codecombat.com/file/db/thang.type/578691f9bd31c1440083251d/portrait.png"/>
    <div>
        我是一个div!
    </div>
    <div>
        我也是。
    </div>
    <div>
        别忘了我!
    </div>
     

    本攻略发于极客战记官方教学栏目,原文地址为:

    https://codecombat.163.com/news/jikezhanji-bianjixiaoyong

    极客战记——学编程,用玩的!

  • 相关阅读:
    QT窗体程序设置成不可改变大小,并生成在Linux下可双击执行的程序文件
    QT新建一个窗口控制程序,以实现添加按钮点击弹出信息提示框为例
    C# 模拟Http请求、下载
    thingsboard改造使用mysql数据库
    Redis单机版分布式锁实现
    利用jvisualvm使用btrace进行线上调试案例
    Btrace官方教程-中文版
    Powerdesigner16 逆向 postgresql9.2
    Linux java进程无故被kill
    thingsboard填坑之路
  • 原文地址:https://www.cnblogs.com/codecombat/p/12932607.html
Copyright © 2011-2022 走看看