0 0 2 7 - 块状元素 & 内联元素的缠绵关系,Web密训营,Web开发,鱼C论坛

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

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

本帖最后由不二如是于 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>
效果图：

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

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

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

<h1>、<p>是块状元素。

<span>是内联元素。

光说不练假把式，用背景色渲染下，你立刻就明白了
<style type="text/css">
h1{
color: #FFF;
background: #000;
}
p{
color:#F33;
background: #BFE;
}

效果图：

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

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

再来给<span>元素，添加背景色为淡淡的紫葡萄色吧，#9F88FF
span{
color: #FFF;
background:#9F88FF;
}
效果图：

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

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

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

先把<h1>、<p>设置为内联元素：
h1,p{
display: inline;
}
效果图：

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

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

再来，只把<span>转换为，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就无法做到这一点，因为他压根儿就不存在什么默认宽度！

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

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

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

这是个测试

看来并没有预想的测试是<span>来修饰的{:10_266:}

不过还是找到了一些<span>元素

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

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

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

测试完成了~
举一反三，title的span呢{:10_297:}

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

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

还是不二厉害，哈哈哈，title的span被我吃了{:10_250:}

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

无条件支持楼主！

页: [1]

鱼C论坛's Archiver

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

作业

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