css列表属性和display属性

时间：2021-07-01 17:29:11 收藏：0 阅读：0

列表属性

ol,ul{
    /*list-style: disc;*/
    /*实心圆点*/
    /*list-style: square;*/
    /*实心小方块*/
    /*list-style: circle;*/
    /*空心圆点*/
    /*list-style: decimal;*/
    /*1/2/3数字排序*/
    /*list-style: decimal-leading-zero;*/
    /*01/02/03数字排序*/
    /*list-style: upper-alpha;*/
    /*大写ABC排序*/
    /*list-style: lower-alpha;*/
    /*小写abc排序*/
    list-style: none;
    /*无任何排序符*/
    padding: 0;
    /*去掉列表前面的空格*/
}

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>
    <!--ol有序列表默认1/2/3进行排序-->

<ul>
    <li>第一节</li>
    <li>第二节</li>
    <li>第三节</li>
</ul>
    <!--ul无序列表默认实心圆点进行排序-->

display属性

E{
    display: inline;
    /*inline把块级标签设置成内联标签，不独占一行且不能设置宽高*/
    display: block;
    /*block把内联标签设置成块级标签，独占一行且可以设置宽高*/
    display: inline-block;
    /*inline-block既有内联标签的不独占一行又有块级标签的可设置宽高，inline-block默认设置了间隙*/
    display: none;
    /*none隐藏该元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="css列表属性和display属性">
    <meta name="description" content="studying">
    <meta http-equiv="Refresh" content="1800;https://www.baidu.com">
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
    <title>标题</title>
    <link rel="stylesheet" href="day110.css">
    <link rel="icon" href="https://www.baidu.com/favicon.ico">
    <!--<script src="js.js"></script>-->
</head>

<body>
    <ol>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ol>
    <!--默认1/2/3进行排序-->

    <ul>
        <li>第一节</li>
        <li>第二节</li>
        <li>第三节</li>
    </ul>
    <!--默认实心圆点进行排序-->

    <dl>
        <dt>总述</dt>
        <dd>第一分述</dd>
        <dd>第二分述</dd>
    </dl>

    <div class="div1">divvvv</div>
    <p>pppppp</p>
    <div class="outer">
        <span>spannn</span>
        <a href="">aaaaaa</a>
        <!--将span和a标签内嵌于div标签，然后对div标签利用word-spacing去除文字间隔达到去间隙效果-->
    </div>
</body>
</html>

ol,ul{
    /*list-style: disc;*/
    /*实心圆点*/
    /*list-style: square;*/
    /*实心小方块*/
    /*list-style: circle;*/
    /*空心圆点*/
    /*list-style: decimal;*/
    /*1/2/3数字排序*/
    /*list-style: decimal-leading-zero;*/
    /*01/02/03数字排序*/
    /*list-style: upper-alpha;*/
    /*大写ABC排序*/
    /*list-style: lower-alpha;*/
    /*小写abc排序*/
    list-style: none;
    /*无任何排序符*/
    padding: 0;
    /*去掉列表前面的空格*/
}

div,p,span,a{
    height: 100px;
    width: 100px;
}

div{
    background-color: yellow;
    /*display: inline;*/
}

p{
    background-color: #d900ff;
    /*display: inline;*/
    /*inline把块级标签设置成内联标签，不独占一行且不能设置宽高*/
}

span{
    background-color: red;
    /*display: block;*/
    /*block把内联标签设置成块级标签，独占一行且可以设置宽高*/
    display: inline-block;
}

a{
    background-color: green;
    /*display: block;*/
    display: inline-block;
    /*inline-block既有内联标签的不独占一行又有块级标签的可设置宽高，inline-block默认设置了间隙*/
}

.outer{
    width: 200px;
    height: 100px;
    word-spacing: -5px;
}

.div1{
    display: none;
    /*none隐藏该元素，且隐藏的元素不会占用任何空间。也就是shuo，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/
}