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

程序员文章站 2022-03-15 23:01:06

...

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

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>

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

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>

7、display属性及块元素、内联元素、内联块元素的转化
· 解决出现间距的问题：
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;

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

· 子元素是内联元素，父元素可以用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>

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

3、内联块元素

内联块元素也叫行内块元素，没有标签归于此类，我们可以用display属性将块元素或者内联元素转化成这种元素

内联块元素的一些行为：

· 支持全部样式；
· 如果没有设置宽高，宽高由内容而定；
· 盒子并在一行；
· 子元素是内联元素，父元素可以用text-align设置子元素的水平对齐方式。

4、display常用属性

1、none：元素隐藏且不占位置；
2、block：元素一块元素显示；
3、inline：元素以内联元素显示；
4、inline-block：元素以内联块显示。

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

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

1、块元素

块元素的一些行为：

2、内联元素

内敛元素的一些行为：

3、内联块元素

内联块元素的一些行为：

4、display常用属性

html常见的块元素与内联（行内）元素用法说明（一）

元素分类，块级元素，内联元素，行内块元素，displaby 属性

html常见的块元素与内联（行内）元素用法说明（一）

html的块级、内联、内联块级元素基础_html/css_WEB-ITnose

CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose

【HTML基础】*元素、块元素、内联元素、可变元素、元素属性_html/css_WEB-ITnose

html的块级、内联、内联块级元素基础_html/css_WEB-ITnose

HTML元素内联元素、块级元素的布局介绍

html中块元素和内联元素的简单介绍（代码解析）

css的display属性如何实现块级元素和内联元素的相互转换？