HTML5第五天笔记01——display属性

最新推荐文章于 2022-12-19 17:51:21 发布

·青红造了个白·

最新推荐文章于 2022-12-19 17:51:21 发布

阅读量176

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119220205

版权

<!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>
        ul {
            background: lime;
        }
        
        ul li {
            width: 100px;
            height: 100px;
            background: pink;
            display: inline-block;
            vertical-align: top;/* 垂直对齐方式 */
        }
        
        div {
            background: lavender;
            display: inline;
            /* 此时设置宽高无效 */
        }
        
        span {
            background: red;
            display: block;
            width: 100px;
            height: 100px;
            /* 此时设置宽高有效 */
        }
    </style>
</head>

<body>
    <ul>
        <li>文字文字文字                               文字</li>
        <li>文字</li>
        <li>文字文字</li>
        <li>文字文字</li>
        <li>文字文字</li>
        <li>文字文字</li>
        <li>文字文字</li>
    </ul>
    <div>文字</div>
    <span>文字</span>
</body>

</html>

display ：规定元素应该生成的框的类型。

display 属性

inline
行内标签可以与多个行内标签排列在同一行，设置宽高无效

inline-block
行内块可以与多个行内标签排列在同一行，设置宽高有效

block
块级标签独占一行，设置宽高有效

none
隐藏标签此元素不会被显示

注意：将标签转换成其它类型标签是为了更方便工作，原来标签的语义不变。

display 属性
inline	行内标签	可以与多个行内标签排列在同一行，设置宽高无效
inline-block	行内块	可以与多个行内标签排列在同一行，设置宽高有效
block	块级标签	独占一行，设置宽高有效
none	隐藏标签	此元素不会被显示