码迷,mamicode.com
首页 > Web开发 > 详细

css列表属性和display属性

时间:2021-07-01 17:29:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:outer   list   title   标签设置   line   --   内嵌   col   sheet   

列表属性

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,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失*/
}

 

css列表属性和display属性

标签:outer   list   title   标签设置   line   --   内嵌   col   sheet   

原文地址:https://www.cnblogs.com/xuewei95/p/14958741.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!