菜鸟学习前端之CSS疑问

最新推荐文章于 2021-07-03 17:36:17 发布

Slience_jzk

最新推荐文章于 2021-07-03 17:36:17 发布

阅读量212

点赞数

分类专栏： Web Studio

本文链接：https://blog.csdn.net/Slience_jzk/article/details/81365514

版权

Web Studio 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

W3C代码

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:1px solid black;
padding:35px;
background-image:url('/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

W3C实例效果
这里写图片描述
本人所写代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            div
            {
                border: 1px solid black;
                padding: 35px;
                background-image: url('bg_flower.gif');
                background-position: left;
            }
            #div1
            {
                background-origin: border-box;
            }
            #div2
            {
                background-origin: content-box;
            }
        </style>
    </head>
    <body>
        <p>background-origin:border-box:</p>
        <div id="div1">
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
        </div>

        <p>background-origin:content-box:</p>
        <div id="div2">
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
            这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
        </div>
    </body>
</html>

浏览器运行效果图
这里写图片描述
重点来了
是我代码问题还是W3C这个学习网站bug？
表示之前在W3C学习发现网站有部分语言不严谨情况
比如

<html>
<head>
<style>
</style>
</head>
<body>
<p>...<a>
</body>
</html>

博客区的各位大佬教我

第一次写博文

Slience_jzk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜鸟学习前端之CSS疑问

W3C代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt; div{border:1px solid black;padding:35px;background-image:url('/i/bg_flower.gif');background-repeat:no-repeat;background-posi...
复制链接

扫一扫