HTML元素类型详解

    xiaoxiao2021-04-18  61

    元素类型

    HTML的元素可以分为两种:

    块级元素(block level element)内联元素(inline element 有的人也叫它行内元素) 两者的区别主要在于以下三点:

         1、块级元素会默认独占一行,而内联元素则会显示到一行上。

         2、块级属性可以设置width、height属性,而内联元素设置无效。

         3、块级元素的宽度默认是100%,而内联元素的宽度则是根据自身的内容或者感觉子元素来决定的。

    常见我们常见的块级元素有:<div> <ul>等,常见的内联元素有<span> <a> <img>等。

    举例来说:

    .demo{ height:100px; width:100px; }

    给<div>这种块级元素设置宽高是有效的,那么如果想给<span>这样的内联元素设置宽高,如何使其生效呢?

         那我们就通过display:block;属性来实现,当display属性为block时,元素以块级形式呈现,当display属性为inline时,元素以内联元素形式呈现。

    当然如果我们既想让元素处在一行中,又想改变其宽高,该怎么做呢?

         这个时候我们需要使用display:inline-block;属性即可实现

    当然也有一些特殊情况的存在!

    比如说<img>标签 ,它被划分为内联元素,但是当给其设置宽高的时候,是会起作用的,这是为什么呢?

              这又衍生出一些概念,替换元素和不可替换元素,替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如这个<img>标签,浏览器会根据其src属性来读取显示其中内容。同样的<input>标签也是如此。替换元素一般有内在的尺寸,即使width和height,是可以自行设定的,如果没有明确指出,就按照内在尺寸显示,也就是被保存显示图片的宽高。对于表单元素,浏览器也有默认的样式,包括宽高。

              以上这些同时具备内联元素、块状元素特点的元素也可称为内联块状元素

    转载请注明原文地址: https://ju.6miu.com/read-674838.html

    最新回复(0)