zoukankan      html  css  js  c++  java
  • 浅谈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;----------------->占位隐藏。将元素隐藏,但是元素还占用着那个位置。

  • 相关阅读:
    挺有意思的HBase日志+Splunk
    eclipse连接远程hadoop集群开发时权限不足问题解决方案
    auxiliary variable(辅助变量)的引入
    auxiliary variable(辅助变量)的引入
    十万个为什么 —— 自然的好奇
    十万个为什么 —— 自然的好奇
    高级鸡汤
    高级鸡汤
    protobuf反射详解
    思想实验(逻辑思维)解题
  • 原文地址:https://www.cnblogs.com/RomanticLife/p/8061335.html
Copyright © 2011-2022 走看看