CSS元素分类(按照样式属性)

来源:互联网 发布:linux mint 18 编辑:程序博客网 时间:2024/05/18 03:07

CSS元素分类

在CSS中,html中的标签元素被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

  1. 块状元素

    特点

    (1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。
    (2)元素的高度、宽度、行高以及顶和底边距都可设置。
    (3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    常用的块状元素

    <div><p><hx><ol><ul><dl><table><address><blockquote><form>

    设置方法

    设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

    a{display:block;}

  2. 内联元素

    特点

    (1)和其他元素在一行上;
    (2)元素的高度、宽度及顶部和底部边距(margin-top、margin-bottom)不可设置;
    (3)元素的宽度就是它包含的文字或图片的宽度,不可改变。

    常用的内联元素

    <a><span><br><i><em><strong><label><q><var><cite><code>

    设置方法

    块状元素可以通过代码display:inline设置为内联元素。

    注意:

    内联元素是当做字体来处理的,字体之间是有间隔的,所以内联元素之间也是有间隔的。这一间隔通过父元素的字体属性来设置。

  3. 内联块状元素

    特点
    (1)和其他元素都在一行上;
    (2)元素的高度、宽度、行高以及顶和底边距都可设置。

    常用的内联块状元素

    <img><input>

    设置方法

    display:inline-block