初级前端的自我救赎【HTML+CSS篇】：8.HTML元素的分类以及display属性

最新推荐文章于 2023-11-07 17:52:00 发布

努力更加努力

最新推荐文章于 2023-11-07 17:52:00 发布

阅读量107

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44088319/article/details/120497208

版权

HTML元素的分类

块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li
行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span
行内块元素：可以设置宽度和高度，不独立成行。img,input,button

display属性

block：转换为块元素
inline：转换为行内元素
inline-block：转换为行内块元素
none：隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            width: 300px;
            height: 100px;
            border:1px solid red;
        }

        a{
            width: 300px;
            height: 100px;
            border:1px solid red;
        }
        img{
            width: 300px;
            height: 100px;
            border:1px solid red;
        }

        .block{
            width: 300px;
            height: 100px;
            border:1px solid red;
            /* 转换为块元素 */
            display: block;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <h1>hello world</h1>

    <a>hello world</a>
    <a>hello world</a>

    <img src="banner.jpg" alt="">
    <img src="banner.jpg" alt="">

    <a class="block" href="http://www.baidu.com">转换为块元素</a>
</body>
</html>

努力更加努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初级前端的自我救赎【HTML+CSS篇】：8.HTML元素的分类以及display属性

HTML元素的分类块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span行内块元素：可以设置宽度和高度，不独立成行。img,input,buttondisplay属性block：转换为块元素inline：转换为行内元素inline-block：转换为行内块元素none：隐藏元素<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫