0 0 2 7 - 块状元素 & 内联元素的缠绵关系

不二如是 · 发表于 2017-1-18 13:04:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:20 编辑

哈哈哈，看到标题点进来的单纯鱼油，你赚到了！

在26中我们，设计了一个很酷线的标题。

包括在之前25的图片边框、24的文本字体设计。都回避了一件事情，就是：

元素方位的排列

C3中的元素可以分为两大类型：

块级元素（块状元素），矩形的块

行内元素（内联元素），一行或几行的内容集合

拿一个，文案界的名言吧：

文案是关于用户感受的设计

而不是创造这些感受文字的设计

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
        <h1>经典名言</h1>
        <p>文案是关于用户感受的设计<br>
而不是<span>创造这些感受文字的设计</span></p>
</body>
</html>

效果图：

简单解释下元素，本身没有任何属性。

 在CSS定义中属于一个行内元素,在行内定义一个区域。

也就是一行内可以被 划分成好几个区域，从而实现某种特定效果。

<h1>、是块状元素。

是内联元素。

光说不练假把式，用背景色渲染下，你立刻就明白了

<style type="text/css">
                h1{
                        color: #FFF;
                        background: #000;
                }
                p{
                        color:#F33;
                        background: #BFE;
                }

效果图：

看到这两个，性感的大矩形框了吗？

h1、p两个的彼此相互隔开的两个矩形，就是“块状”。

再来给元素，添加背景色为淡淡的紫葡萄色吧，#9F88FF

span{
                        color: #FFF;
                        background:  #9F88FF;
                }

效果图：

看到了吗，包含的这句话，字体颜色变为白色，背景色葡萄色。

这就是内联元素，说白了，就是为指定行进行添加背景色。

不管是块状元素还是内联元素，大哥都是display属性。

display:block 就是块状元素

display:inline 就是内联元素

先把<h1>、设置为内联元素：

h1,p{
                        display: inline;
                }

效果图：

转换为内联元素后，三个小宝贝儿就前后拼接在了一起。

背景色按照字体默认大小，进行设置。

再来，只把转换为，block：

        span{
                        color: #FFF;
                        background:  #9F88FF;
                        display: block;
                }

效果图：

转换为块状元素后，span成了单独一行，不在和上文紧邻。

两种元素之间可以起随意切换，但一定要注意：

块状元素可以包含内联元素和块状元素。

内联元素却不能包含块状元素。

好拗口的定义！

说白了，就是p、h1元素可以设置宽高。

span没法设置行的宽高。

例如，将p、h1宽度设置如下：

        h1{
                        color: #FFF;
                        background: #000;
                        width: 150px;
                }
                p{
                        color:#F33;
                        background: #BFE;
                        width: 300px;
                }

效果图：

默认的块状元素，是占满整个屏幕，现在分别缩短了。

而span就无法做到这一点，因为他压根儿就不存在什么默认宽度！

他包含的元素宽高是多少，他就是多少。

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

joker11111 · 发表于 2017-3-5 16:33:00

本帖最后由 joker11111 于 2017-3-5 16:41 编辑

这是个测试

看来并没有预想的测试是来修饰的

不过还是找到了一些元素

不二如是 · 发表于 2017-3-5 18:12:16

joker11111 发表于 2017-3-5 16:33
这是个测试

看来并没有预想的测试是来修饰的

测试完成了~
举一反三，title的span呢

joker11111 · 发表于 2017-3-5 19:40:24

不二如是发表于 2017-3-5 18:12
测试完成了~
举一反三，title的span呢

还是不二厉害，哈哈哈，title的span被我吃了

shishunfu · 发表于 2017-4-24 14:39:49

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>块级元素&内联元素</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        width: 100%;
                        text-align: center;
                        background-color: beige;
                        color: red;
                }
                a{
                        color: green;
                        background-color: #a3f4f9;
                }
                div{
                        background-color: #f5f588;
                }
                h1{
                        color: #FFF;
                        background: #000;
                }
                p{
                        background-color:#c2edf9;
                }
                span{
                        background-color: aqua;
                }
                #test{
                        height:200px;
                        width: 300px;
                        color: #FFF;
                        background: #000;
                }
        </style>
</head>
<body>
<div>
        <h1>经典名言</h1>
        <p>文案是关于用户感受的设计<br>
                而不是创造这些感受文字的设计
        </p>
        <div id="container">
                <p>块级标签
                        <span>行级标签</span>
                </p>
                <p>
                块状元素可以包含<span>行级标签</span>(内联元素和块状元素)。
                内联元素却不能包含块状元素。
                </p>
        </div>
        说白了，就是p、h1元素可以设置宽高。
        span没法设置行的宽高。
        <br />
        <a href="http://www.fishc.com/" id="first_Js">传送门</a>
        <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
</div>

<p id="test">测试宽度和高度</p>
</body>
</html>

aswyamato1989 · 发表于 2017-7-17 23:09:10

交作业！

像番茄加两个蛋 · 发表于 2018-4-15 08:57:51

还有一个行内块元素inline-block

rock5442107 · 发表于 2018-6-7 20:47:22

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>027</title>
        <style type="text/css">
        h1{
                color:#FFFFFF;
                background:#000000;
                width:150px;
                border-left:8px solid #8FF880;
        }
        p{
                color:#F33;
                background:#BFE;
                width:300px;
        }
        span{
                color:#FFF;
                background:#9F88FF;
                display:block;
        }
        </style>
</head>
<body>
        <h1><i>經典名言</i></h1>
        <p>文案是关于用户感受的<sub>设计</sub><br>
        <s>而不是</s><span>创造这些感受文字的<sup>设计</sup></span></p>
</body>
</html>

soulwyb · 发表于 2018-10-18 00:10:23

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        h1 {
            color: #fff;
            background: #000;
            width: 150px;
        }
        
        p {
            color: #f33;
            background: #bfe;
            width: 300px;
        }
        /* h1,
        p {
            display: inline;
        } */
        
        span {
            /* display: block; */
            color: #fff;
            background: #9f88ff;
        }
    </style>
</head>

<body>
    <h1>经典名言</h1>
    <p>文案是关于用户感受的设计<br> 而不是
        <span>创造这些感受文字的设计</span></p>
</body>

</html>

QiaoaiMen · 发表于 2018-11-21 17:21:27

交作业，没有额外改什么，就不放图片了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        h1{
            color: #FFF;
            background: #000;
            width: 150px;
        }
        p{
            color:#F33;
            background: #BFE;
            width: 300px;
        }
        span{
            color: #FFF;
            background:  #9F88FF;
             /*display: block;*/
        }
        /*h1,p{
            display: inline;
        }*/
    </style>
 </head>
 <body>
    <h1>经典名言</h1>
    <p>文案是关于用户感受的设计<br>
    而不是<span>创造这些感受文字的设计</span></p>
</body>
</html>

guohuo888meng@1 · 发表于 2019-2-13 13:20:47

如果一句有多个span，并且想让多个span拥有不同样式该怎么做呢？

你在意在便在 · 发表于 2019-10-29 10:19:32

作业~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style type="text/css">
h1 {
  color:#fd79a8;
  background: #dfe6e9;
  width: 150px;
  /* ext-align: center; */
}
p {
  color:#ff7675;
  background: #ffeaa7;
  width: 300px;
}
span {
  color:#a29bfe;
  background: #636e72;
  /* display: block; */
  /* height: 500px;
  width: 200px; */
}
h1,p {
  /* display: inline; */
  text-align:center;
}

</style>
</head>
<body>
<h1>经典名言</h1>
<p>文案是关于用户感受的设计<br>
而不是<span>创造这些感受文字的设计</span></p>
</body>
</html>

小脑斧 · 发表于 2020-3-10 18:41:22

本帖最后由小脑斧于 2020-3-10 18:42 编辑

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>你大哥还是你大哥</title>
        <style>
            h1,p{
                display: inline;
            }
            p{
                background: yellow;
                color: rgb(15, 15, 117);
            }
            h1{
                background: rgb(54, 49, 49);
                color: seashell;
            
            }
            span{
                background: rgb(17, 58, 20);
                color: rgb(145, 145, 168);
            }
        </style>
    
</head>
<body>
        <h1>经典名言</h1>
        <p>文案是关于用户感受的设计<br>
而不是<span>创造这些感受文字的设计</span></p>
</body>
</html>

huanghuiyv · 发表于 2020-8-18 19:59:33

无条件支持楼主！

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 2 7 - 块状元素 & 内联元素的缠绵关系

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

作业

浏览过的版块

[庖丁解牛] 0 0 2 7 - 块状元素 & 内联元素 的缠绵关系

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

作业

浏览过的版块

[庖丁解牛] 0 0 2 7 - 块状元素 & 内联元素的缠绵关系