css列表属性和display属性

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>
    

ul>
    li>第一节li>
    li>第二节li>
    li>第三节li>
ul>
    

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">
    
head>

body>
    ol>
        li>第一行li>
        li>第二行li>
        li>第三行li>
    ol>
    

    ul>
        li>第一节li>
        li>第二节li>
        li>第三节li>
    ul>
    

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

    div class="div1">divvvvdiv>
    p>ppppppp>
    div class="outer">
        span>spannnspan>
        a href="">aaaaaaa>
        
    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，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/
}