css列表屬性和display屬性

阿新 • • 發佈：2021-07-01

列表屬性

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，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失*/
}