CSS元素类型

时间 2019-11-18

标签 css 元素类型栏目 CSS 繁體版

原文原文链接

前面有一篇文章讲到在css世界中，html元素的表现都是一个个盒子，而css中盒子的显示方式有三种方式，分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。css

1 写在前面

最近在整理cnblogs上页面的样式，默认右侧【随笔分类】中的标签是每行显示一个，而我想把右侧【随笔分类】中的标签设置为一行显示多个标签，至于显示多少个则随标签的大小而定，而且每一个标签在鼠标放上去的时候会有背景颜色的变化。效果以下图。html

下面咱们就来分析一下如何让左边的标签显示方式变为右边这样的吧算法

2 块元素

在分析块元素以前咱们首先创建html网页，以便后面的分析。html代码以下。布局

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body{   
                width:500px;
                margin:20px auto;
                color:black;
            }
            a{
                color:inherit;
                text-decoration:none;
            }
            div{
                width:320px;
                border:1px solid red;
            }
            div ul {
                padding-left:10px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="pagestyle.css">
    </head>
    <body>
        <div>
            <ul>
                <li><a href="#">.NET(7)</a> </li>
                <li><a  href="#">Android(2)</a> </li>
                <li><a href="#">ArcgisEngine(3)</a> </li>
                <li><a  href="#">ASP.NET(1)</a> </li>
                <li><a  href="#">CSS(1)</a> </li>
                <li><a  href="#">C语言(1)</a> </li>
                <li><a  href="#">Demo(5)</a> </li>
                <li><a href="#">JavaScript(2)</a> </li>
                <li><a  href="#">Linq(1)</a> </li>
                <li><a  href="#">MSSQL(1)</a> </li>
                <li><a  href="#">其余(1)</a> </li>
                <li><a href="#">算法(3)</a> </li>
            </ul>
        </div>
    </body>
</html>

固然这段html咱们给他设置一些简单的样式，去掉列表符号，和a标签的下划线。目前pagestyle.css文件中尚未任何代码，上面这段代码的效果以下。3d

咱们能够发现，每一个列表li元素都是呈单行显示的，而且他们的高度和内部的内容至关，如今咱们给li元素增长一个外边框并适当的设置一下padding，在pagestyle.css中写以下代码。code

li{
    border:1px solid green;
    margin-top:2px;
    padding:5px 0 5px 0;
}

效果以下。
htm

经过给li元素设置边框，能够知道li元素默认是占一行的，它的宽度和父容器的宽度同样，而高度则是他们实际内容+padding的高度。li元素属于c块元素。下面总结一下css块元素有哪些特征。blog

块元素默认占据一行，宽度与父容器一致，高度为内容+padding的高度。
块元素能够经过设置margin和padding的值来控制块元素与其余元素的边距以及自身边框与内容的留白（内边距）。
块元素能够设置宽度和高度。
块元素设置高度，padding，margin会撑大父容器的文档流，固然这要在父容器没有设置固定高度的前提下。

上面说了块元素老是要占据一行的，宽度与父容器一致。当咱们把li元素的宽度手动设置成很小的宽度，那么下面那个li元素会不会跑到上面来呢？答案是确定不会跑上来的，由于块元素老是那么的霸道，即便本身宽度很小，也要独占一行的，不信看下面的代码和效果。ip

li{
    border:1px solid green;
    margin-top:2px;
    padding:5px 0 5px 0;
    width:150px;/*手动设置宽度*/
}

咱们把li元素的宽度设置为150，效果以下。utf-8

咱们能够看到li元素的宽度变了，可是它依然是独占一行的。

常见的块元素有div，h1-h6，p，ul，ol，li等等。通常布局中的父元素都是采用块元素。

3 行内元素

上面第2节讲到li元素是块元素而且独占一行的，而博客园的标签都是使用li元素。那咱们须要把博客园的标签变为一行显示多个，该怎么办呢？下面开始轮到行内元素上场了。

行内元素，顾名思义即在一行内显示的元素。在css中，有一个display的属性，他能够更改html元素默认的显示方式，能够把块元素变为行内元素，行内元素变为块元素。display属性有四个值可选，分别是block：块元素；inline：行内元素；inline-block：行内块元素；none：元素不显示。

下面咱们把li元素的css样式添加一个display属性看看效果。代码以下。

li{
    border:1px solid green;
    margin-left:5px;/*左边距*/
    margin-top:7px;/*设置高度*/
    display:inline;
}

效果以下。

经过设置li元素的display属性，将其改变为行内元素，li元素就能够一行显示多个，一个挨着一个，从效果中发现，咱们设置了margin-left:5px这个左边距是有效果，而设置margin-top:7px是没有效果。这就是行内元素的特色。

对行内元素设置高度相关的都是没有效果的，如设置margin-top，margin-bottom，padding-top，padding-bottom，height这些属性都是无效的。
对行内元素设置宽度也是无效的，行内元素的宽度只有左右内边距和内容宽度来决定。

行内元素对其高度有关的属性设置都无效，致使li元素两行之间都紧靠在一块儿，显然在美观上不能知足咱们的要求。可是css提供了另一个属性也就是行高line-height，该属性能够设置行与行之间的高。，下面我给li元素的父容器ul元素设置行高。代码以下。

ul{
    line-height:1.5em;
}
li{
    border:1px solid green;
    margin-left:5px;
    margin-top:7px;
    display:inline;
}

效果以下。

经过设置ul元素的行高，实现了行内元素上下之间的间隔。虽然离我理想中的效果差不太远了，可是仍是有些不近人意。上下边框和元素的内容挨的太近（内边距无），当鼠标移动到上面的时候，效果可能会不太好。不过咱们仍是按照咱们理想中的效果试试。代码以下。

ul{
    line-height:1.5em;
}
li{
    /*border:1px solid green;*//*不要边框的显示*/
    margin-left:13px;
    display:inline;/*行内元素*/
    padding:11px 20px;
}
li:hover{
    background-color:blue;
    color:white;
}

效果以下。

前面说到设置行内元素与高度相关的属性都是无效的，可是上面设置的padding-top和padding-bottom好像是有效果的哈。可是实质上设置padding的上下内边距并无增长行高，也没有撑大父容器的文档流，并且咱们能够看到背景颜色显示的时候，还有覆盖了上下li元素的内容了。

行内元素设置padding的上下边距，并不会撑大父容器的文档流，可是会有效果，在上一篇文章CSS盒子模型中说到html中全部元素都是一个盒子，而背景颜色显示的范围是padding+content的范围。

上面的效果咱们再美化一下css效果（修改行高和上下边距），差很少就可以达到咱们想要的效果了，可是从上面效果图的右边来看，有时候一个行内元素在一行中没显示完的时候，会有一小部分在下面一行显示，若是最后出现效果图右边这种状况，那就比较尴尬了。

常见的行内元素有：a、img、input、select等。

4 行内块元素

行内块并非兼具二者都有的特征，从字面上来理解，就是能够在行内显示的块元素，在第2节讲到块元素即便设置了宽度，也会独占一行，并会跟其余元素同行，那么行内块元素在这点上就与块元素不一样。

行内块元素对其设置高度，宽度，padding和margin都是有效果的。
行内块元素不会独占一行，若是该行内块元素在设置完宽度、padding、margin以后，父容器后面的宽度还可以容的下第二元素，那么第二个元素就会与第一个元素同行显示，不然，另起一行。
两个同行显示的行内块元素，对其上下的元素的间隔距离，以其中最大的间距为主。

关于第三点特征咱们能够写代码实验一下。把ul元素下面的第一个li元素设置class属性。代码以下：

<li class="first"> <a href="#">.NET(7)</a> </li>

css的代码以下。

li{
    /*border:1px solid green;*//*不要边框的显示*/
    margin-left:13px;
    display:inline-block;/*行内块元素*/
}
li:hover{
    background-color:blue;
    color:white;
}
ul .first{
    margin-bottom:50px;/*设置第一个li元素的下边距50px*/
}

效果以下。

咱们能够发现第一行有两个li元素，第一li元素咱们设置了下边距为50px，而第二个没有设置默认为0，致使最终这一行与下一行的边距为第一个li元素的下边距50px，和咱们预想的效果一致。

通过对行内块元素的总结，发现行内块元素可以很好的知足咱们的需求。下面把li元素设置为行内块显示方式，对其进行美化，代码以下。

li{
    display:inline-block;/*行内块元素*/
    margin-bottom:5px;/*下边距5px*/
    padding:5px 7px;/*上下内边距5p，左右内边距7px*/
    border-radius:5px;/*圆角*/
}
li:hover{
    background-color:blue;
    color:white;
}

效果以下。

其实css默认的元素类型只有两种，块元素和行内元素，而行内块元素须要咱们使用display去设置的。

5 总结

通过一天的时间整理本身的博客风格，将博客风格整理成很是简洁的样式，页面都是黑白风格，当鼠标交互时，相应的元素会变成浅蓝色，我的挺喜欢这种风格。也经过此次整理，从新温习了css里面几个比较重要的概念，比css盒子模型，选择器，元素类型等。

1. CSS元素类型
2. css盒模型、元素类型
3. css 元素类型行内元素块元素内联块元素 0302
4. css--元素分类
5. CSS元素分类
6. 元素类型
7. CSS盒模型,元素分类,
8. 元素的类型
9. CSS 伪类与伪元素
10. css伪类和伪元素
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• C# 数据类型 - C#教程
• Kotlin学习（二）基本类型
• 适用于PHP初学者的学习线路和建议