前端应用_css_三大元素类型区别和联系（块元素，内联元素，内联块元素）

最新推荐文章于 2023-12-13 11:40:26 发布

上海_彭彭

最新推荐文章于 2023-12-13 11:40:26 发布

阅读量235

点赞数

分类专栏： css 文章标签： css 块元素内联元素内联块元素区别 css 三大元素类型

本文链接：https://blog.csdn.net/qq_34979346/article/details/97287068

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

块元素

块元素又称为行元素，常见的有 div ，h， ul ，li ，h1-h6，dl，dt 等
特点为：
1.独占一行
2. 可以设置任何样式
3. 如果没有设置宽度，默认为父级宽度的100%

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    body{margin:0px;}
     div{background-color:gold;
     }
</style>
</head>
<body>
<div>
这个是div 的块元素
</div>

</body>
</html>

显示的效果如下：
在这里插入图片描述
我们设置 margin 和宽度，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    body{margin:0px;
    }
     div{background-color:gold;
       text-align:center;
       margin:20px 10px;
     }
     .box{width:300px; }
     .box2{width:200px;}

</style>
</head>
<body>
<div>
这个是div 的块元素
</div>

<div class="box">
这个是div 的块元素
</div>
<div  class="box2">
这个是div 的块元素
</div>

</body>
</html>

证实了独占一行的说法，即使你设置宽度了。再次解析 margin 是边距，例如div 在body的边距对象是盒子， padding是内容到div 框的距离对象是内容到盒子的距离。搞清楚他们的对象不同。
width 是 div 的宽度， height 的高度。

内联元素

内联元素又称为行内元素，常用的标签有 a,span, em,b,strong 等
特点如下：

支持部分样式（不支持宽width，高height，margin 上下（top, bottom）， padding 上下）
宽度有内容决定
盒子并在一行
各个内联元素有间隙
子元素是内联元素，父元素可以用text-align 设置对齐方式，，用line-height 属性值控制垂直的对齐方式。

解决内联元素间隙方法有：
先设置父级的font-size 为 0，然后子级别再设置 font-size 。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    body{margin:0px;
    }

     .box{width:800px;
     border:1px solid #333;
     height:300px;
     margin:200px 200px;
}

     .box a{
     background-color:gold;
     width:200px;
     border:1px solid #333;
     height:300px;
     margin-left:100px ;
     margin-top:3000px;
     padding-left:20px;
     
     }





</style>
</head>
<body>

<div class="box">
    <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>

</div>
<div  class="box2">
这个是div 的块元素
</div>

</body>
</html>

可以证实 padding 上下， margin 上下是不能生效的，width 和height 同样也不生效，并且他们在一行，之间有空隙。增大字体可以提高宽度 font-size 设置，想设置对齐方式在父级别的搞下。
text-align:center;

现在该有疑问了，那我想把块元素都放在一行，并且可以设置 width 和 height 怎么搞呢，有没有可以实现呢，

答案出来了，是可以实现的，只要把内联元素强制转化为块元素这样，他会取到块元素和内联元素的集合优点。

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
•支持全部样式
•如果没有设置宽高，宽高由内容决定
•盒子并在一行
•代码换行，盒子会产生间距
•子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式此种方法的前提是：子元素的margin左右设置为0.

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

示例代码：
应用了 display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    body{margin:0px;
    }

     .box{width:800px;
     border:1px solid #333;
     height:300px;
     margin:200px 200px;
     text-align:center;
}

     .box a{
     background-color:gold;
     width:100px;
     border:1px solid #333;
     height:50px;
     margin-left:50px ;
     margin-top:30px;
     padding-left:20px;
     display: inline-block;


     }





</style>
</head>
<body>

<div class="box">
    <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>
     <a href="#"> 内联元素</a>

</div>
<div  class="box2">
这个是div 的块元素
</div>

</body>
</html>