• 浅谈css的行内类型标签和块级标签


    常用标签的行内类型标签有:a、span、img;块级标签有:div、p、h1~6、ul、ol、li、dl、dt、dd。

    行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height,不会自动换行。

    块级标签的特征:可以设置width和height,会自动换行。

    行内类型标签还有一个特点就是:在同一行上每个标签之间有间隙。

    a标签的现象:

    p标签的现象:

    img标签的现象:

    解决这一现象最简单的办法就是将两个标签写在同一行。导致这一现象的原因还有待研究。

    同样是行内标签,现在想给他们设置width和height,其中的一种方式就是给他们设置display:inline-block;但是这种方式也会导致和上面一样的现象有间隙。

    解决这一现象有两种方式:1.将两个标签写在同一行;2.不采用display的方式,采用浮动的方式。因为浮动也可以将行内类型转换为块级类型,而且没有间隙。

    块级标签,现在给他们设置display:inline-block;想让他们都在同一行上,这种方式也会导致标签之间有间隙,解决的两种办法同上。

    也就是说当给行内标签和块级标签设置display:inline-block这个属性时,标签之间都会出现间隙。

    注意:给一个标签同时设置display和float没有任何意义。也就是说display和float不要混用。

    设置元素的几种类型:

    display:inline;-------------------->将元素设置为行内类型,此时元素在同一行内,不会自动换行,不能设置width和height;

    display:block;-------------------->将元素设置为块级类型,此时元素自动换行,可以设置width和height;

    diaplay:inline-block;------------>将元素设置为内联块(行内块),此时元素在同一行内,不会自动换行,但是可以设置width和height;

    display:none;--------------------->不占位隐藏。将元素隐藏,不显示;

    visibility: hidden;----------------->占位隐藏。将元素隐藏,但是元素还占用着那个位置。

  • 相关阅读:
    Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由
    nyoj 635 Oh, my goddess
    nyoj 587 blockhouses
    nyoj 483 Nightmare
    nyoj 592 spiral grid
    nyoj 927 The partial sum problem
    nyoj 523 亡命逃窜
    nyoj 929 密码宝盒
    nyoj 999 师傅又被妖怪抓走了
    nyoj 293 Sticks
  • 原文地址:https://www.cnblogs.com/RomanticLife/p/8061335.html
Copyright © 2020-2023  润新知