元素类型的分类与转换

最新推荐文章于 2022-08-20 15:50:35 发布

我是打工人

最新推荐文章于 2022-08-20 15:50:35 发布

阅读量429

点赞数

文章标签：分类 css html

本文链接：https://blog.csdn.net/szydqq/article/details/123308308

版权

写导航考虑添加a标签，a是不可以直接设置宽高大小的，因为a是行内元素

1.元素类型

- 分类

- 转换

2.元素类型的分类: 块元素、内联元素、内联块元素

3.块元素/块状元素/块级元素: div、ul、li、ol、p、h...

- 块元素可以直接设置宽高大小

- 块元素默认独占一行

- 块元素默认上下排列的

- 作用:用来嵌套其他元素类型或者内联元素作为网页的布局

4.内联元素/行内元素:a、em、i、span、strong、b...

- 无法直接设置宽高大小的

- 行内元素的宽高大小是由内容本身决定的

- 行内元素默认在一行内逐个显示

- bug:在行内元素上设置margin-top/bottom是没效果的

5.行内块元素/内联块元素:input、img

- 可以添加宽高大小属于块级元素

- 可以在一行内逐个显示属于行内元素

- 总结: 可以添加宽高又可以在一行内显示属于行内块元素

- 特殊: 所有的行内块都是以基线对齐的(布局问题)

- 解决: vertical-align:top、middle、bottom

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="../../02-reset.css">
    <style>
        ul{
            width: 500px;
            height: 50px;
            border: 1px solid #000;
            margin: 100px auto
        }
        li{
            float: left;
            width: 100px;
            height: 50px;
        }
        li:nth-child(1){
            background: pink
        }
        li:nth-child(1) a{
            width: 100px;
            height: 50px;
            background: green;
            /* display: inline-block */
            float: left;
        }
        /* 块级元素 */
        div{
            width: 100px;
            height: 100px;
            background: pink
        }
        /* a{
            width: 100px;
            height: 50px;
            background: green;
            margin-left: 10px;
        } */
        input{
            width: 200px;
            height: 30px;
            border: 1px solid #000
        }
        img{
            width: 100px;
            height: 200px;
            border: 1px solid #000
        }
        input,img{
            vertical-align: middle
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">首页1</a></li>
        <li><a href="">首页2</a></li>
        <li><a href="">首页3</a></li>
        <li><a href="">首页4</a></li>
        <li><a href="">首页5</a></li>
    </ul>
    <hr>
    <div></div>
    文本
    <div></div>
    <hr>
    <a href="">1</a>
    <a href="">2</a>
    <hr><br><br>
    <input type="text"> <img src="https://img12.360buyimg.com/seckillcms/s140x140_jfs/t1/201156/2/15784/81512/61935149E6926b30a/24a3ddcdde73482a.jpg.webp" alt="">
</body>
</html>

效果图：

元素类型的转换

属性:display(显示方式) 19个属性值

- 常用的属性值

- block 块将其他元素类型转换为块级元素

- inline 行内将其他元素类型转换为行内元素

- inline-block 行内块元素将其他元素转换为行内块元素

- 了解的属性值

- list-item 列表项目(块级元素)

- 重要的属性值

- none 无没有的意思删除显示方式和结构

拓展: 浮动属性依然是可以脱离文档流的还可以将元素转换为行内块元素

<!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">
    <title>Document</title>
    <style>
        a{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            display: list-item
        }
        div{
            width: 100px;
            height: 100px;
            background: pink;
        }
        a,div{
            display: none;
        }
    </style>
</head>
<body>
    <a href="">行内元素</a><a href="">行内元素</a>
    <div>文本</div><div>文本</div>
    <span></span>
</body>
</html>