css列表属性与display属性

Posted 2022-01-21 jintian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css列表属性与display属性相关的知识，希望对你有一定的参考价值。

list-style:none

内联标签不能设宽高

display:"inline-block"　有内联标签不独占一行的属性和块级标签可设宽高的属性

display:none　不显示，位置也没了　　display是显示、展示的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol,ul
            list-style: none;
        
    </style>
</head>
<body>


<ol>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ol>

<ul>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ul>

<dl>
    <dt>河北省</dt>
    <dd>廊坊</dd>
    <dd>保定</dd>
    <dd>石家庄</dd>
</dl>
</body>
</html>

列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span
             width: 100px;
             height: 100px;
        

         .div2
             background-color: yellow;
             /*display: inline;*/
             display: none;
         

        p
             background-color: red;
            /*display: inline;*/
         

        span
             background-color: palevioletred;
             display: inline-block;
         
        a
             background-color: green;
             display: inline-block;
         
        .outer
            word-spacing: -8px;
        
    </style>
</head>
<body>


<div class="div2">divvvvv</div>
<p>pppppp</p>


<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>


</body>
</html>

display属性

技术图片

以上是关于css列表属性与display属性的主要内容，如果未能解决你的问题，请参考以下文章

CSS display 属性

CSS visibility与display 属性

css display属性详解

如何理解CSS中的display:inline-block属性？

css元素类型如何转换？

CSS的Display属性可能的值