html中的块级元素和行内元素区别--------(回顾一)

最新推荐文章于 2023-12-08 09:54:51 发布

ioseeker

最新推荐文章于 2023-12-08 09:54:51 发布

阅读量386

点赞数

分类专栏： Css 文章标签： CSS 块级元素行内元素 html

本文链接：https://blog.csdn.net/seeker_lqq/article/details/87793700

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

情景：最近由于公司的项目中需要用到CSS调整一些样式，嘿嘿 CSS有些知识已经记不太清楚啦，在网上重新学习一下，顺便把一些常用的知识点记录一下。

1.块级元素和行内元素什么是？

[1].块级元素:根据W3C上的解释，就是说block（块级）元素是独占一行显示的,它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）；常见的块级元素如div 、p、hr 、ul、ol、li和form等。

[2].行内元素:也叫内联元素，行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素；常见的行内元素如a、span、br、 strong和em等。

2.块级元素和行内元素的区别 ?

[1] 区别一:块级元素会独占一行，默认情况下宽度自动填满其父元素宽度;行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type='text/css'>
     #block1{background-color:#00FF00;}
     #block2{background-color: #008800;}
     .inline1{background-color: #FF3333;}
     .inline2{background-color: #FFFF33;}
    </style>
    <title>测试块级元素和行级元素</title>
</head>
<body>
        <div id="block1">测试块级元素1</div>
        <div id="block2">测试块级元素2</div>
        <a class="inline1">测试行级元素1</a>
        <span class="inline2">测试行级元素2</span>
</body>
</html>

效果图如下:

[2] 区别二:块级元素可以设置宽高，行内元素不可以设置宽高，而且块级元素即使设置宽度也还是独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type='text/css'>
     #block1{background-color:#00FF00;height: 50px;width: 50%;}
     #block2{background-color: #008800;height: 50px;width: 40%;}
     .inline1{background-color: #FF3333;height: 70px;width: 50%;}
     .inline2{background-color: #FFFF33;height: 70px;width: 50%;}
    </style>
    <title>Document</title>
</head>
<body>
        <div id="block1">测试块级元素1</div>
        <div id="block2">测试块级元素2</div>
        <a href="#" class="inline1">测试行级元素1</a>
        <span class="inline2">测试行级元素2</span>

</body>
</html>

效果图如下:

[3] 区别三:块级元素可以设置margin，padding；行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type='text/css'>
     #block1{background-color:#00FF00;height: 50px;width: 50%; padding: 20px;margin: 20px;}
     #block2{background-color: #008800;height: 50px;width: 50%; padding: 20px;margin: 20px;}
     .inline1{background-color: #FF3333;height: 70px;width: 50%; padding: 30px;margin: 20px;}
     .inline2{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px;}
    </style>
    <title>Document</title>
</head>
<body>
        <div id="block1">测试块级元素1</div>
        <p id="block2">测试块级元素2</p>
        <a href="#" class="inline1">测试行级元素1</a>
        <span class="inline2">测试行级元素2</span>

</body>
</html>

效果图如下:

[4] 区别四:块级元素对应display:block，行内元素对应display:inline,display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排,是一个很实用的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type='text/css'>
     #block1{background-color:#00FF00;height: 50px;width: 50%; padding: 20px;margin: 20px; display:block}
     #block2{background-color: #008800;height: 50px;width: 50%; padding: 20px;margin: 20px; display:inline}
     .inline1{background-color: #FF3333;height: 70px;width: 50%; padding: 30px;margin: 20px; display:inline}
     .inline2{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px; display:block}
     .inline3{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px; display:inline-block}
    </style>
    <title>Document</title>
</head>
<body>
        <div id="block1">测试块级元素1</div>
        <p id="block2">测试块级元素2</p>
        <a href="#" class="inline1">测试行级元素1</a>
        <span class="inline2">测试行级元素2</span>
        <span class="inline3">测试行级元素3</span>

</body>
</html>

效果图如下:

ok 就到这里了( ^ - ^ )

ioseeker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中的块级元素和行内元素区别--------(回顾一)

情景：最近由于公司的项目中需要用到CSS调整一些样式，嘿嘿 CSS有些知识已经记不太清楚啦，在网上重新学习一下，顺便把一些常用的知识点记录一下。1.块级元素和行内元素什么是？[1].块级元素:根据W3C上的解释，就是说block（块级）元素是独占一行显示的,它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）；常见的块级元素如div 、p、hr 、ul、ol、li和form等。[2]...
复制链接

扫一扫