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

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

  • 相关阅读:
    Python 类中方法的内部变量,命名加'self.'变成 self.xxx 和不加直接 xxx 的区别
    用foreach遍历 datagridView 指定列所有的内容
    treeView1.SelectedNode.Level
    YES NO 上一个 下一个
    正则 单词全字匹配查找 reg 边界查找 精确匹配 只匹配字符 不含连续的字符
    抓取2个字符串中间的字符串
    sqlite 60000行 插入到数据库只用不到2秒
    将多行文本以单行的格式保存起来 读和写 ini
    将秒转换成时间格式
    richtextbox Ctrl+V只粘贴纯文本格式
  • 原文地址:https://www.cnblogs.com/codecombat/p/12932607.html
Copyright © 2011-2022 走看看