7、display属性及块元素、内联元素、内联块元素的转化

最新推荐文章于 2022-06-20 10:54:03 发布

茶色小键帽

最新推荐文章于 2022-06-20 10:54:03 发布

阅读量443

点赞数

分类专栏：心得

本文链接：https://blog.csdn.net/qq_48773808/article/details/108037633

版权

心得专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、块元素、内联元素、内联块元素

1、块元素

块元素也可以称为行元素，常见的标签：div、p、ul、li、h1~h6、dl、dt、dd这些都是块元素。

块元素的一些行为：

· 支持全部样式；
· 如果没有设置宽度，默认宽度为父级宽度100%，高度由内容撑开；
· 一个块元素占据一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
		  	background-color:gold;
        }

    </style>
</head>
<body>
    <h1>我</h1><h2>你</h2>
    <h3>他</h3>
    <div>我</div><div>你</div>
    <div>他</div>
</body>
</html>

在这里插入图片描述

2、内联元素

内联元素也可以称为行内元素，常见的标签：a、span、em、b、strong、i这些都是内联元素。

内联元素的一些行为：

· 支持部分样式（不支持宽、高、margin上下、padding上下）；
· 宽高由内容决定；
· 盒子并在一行；
· 代码换行，盒子会出间距；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width:500px;
            height:300px;
            border:1px solid black;
            margin:50px auto 0;
        }
        .box a{
            background-color:gold;
            padding:0 30px;
        }
    </style>
</head>
<body>
   <div class="box">
       <a href="#">链接一</a>
       <a href="#">链接二</a>
       <a href="#">链接三</a>
   </div>
</body>
</html>

在这里插入图片描述
· 解决出现间距的问题：
1、去掉代码之间的换行；
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size；

.box{
            width:500px;
            height:300px;
            border:1px solid black;
            margin:50px auto 0;
            font-size:0;
        }
        .box a{
            background-color:gold;
            padding:0 30px;
            font-size:16px;

在这里插入图片描述

· 子元素是内联元素，父元素可以用text-align设置子元素的水平对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            width:500px;
            height:300px;
            margin:50px auto 0;
            border:1px solid black;
            text-align:center;
            line-height:300px;
        }
    </style>
</head>
<body>
   <div class="box1">
       <a href="#">链接四</a>
   </div>
</body>
</html>