Heim > Web-Frontend > HTML-Tutorial > 了解HTML 元素分类_html/css_WEB-ITnose

了解HTML 元素分类_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:26:54
Original
1064 Leute haben es durchsucht

  HTML中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不同造成的结果.

  块级元素

  在HTML中,

,

,

,

,
    ,
    ,
  1. 等标签就是块级元素, 每个块级元素一般都具有相同的特点.

      1, 每个块级元素都从新的一行开始, 并且其后的元素也另起一行. (也就是块级元素就要自己占一行, 后面的也得让路)

      2, 元素的高度, 宽度, 行高以及顶和底边距都可设置.

      3, 元素宽度在不设置的情况下, 是它本身父容器的100%, 也可以单独进行的设置.

      内联元素

      区别于块状元素, , ,

      当然, 内联元素也有自己的一些特点, 这些和块级元素都是一一对应的.

      1, 内联元素和其他元素都是在一行上, 而不会排挤其他的元素, 

      2, 元素的高度, 宽度以及顶部底部边距不可设置(因为元素都是行内紧挨着, 你如果设置这些, 那么元素不就都乱了).

      3, 元素的宽度就是它包含的文字或图片的宽度, 不可改变.

      内联块状元素

      这种元素非常少, 它们同时具备两种元素的特点, 了解HTML 元素分类_html/css_WEB-ITnose, 这两个标签就是内联块状元素. 就不多做介绍了.

      

      这三种元素是可以互相转化的, 也就是说可以通过css强制修改其元素类型, 只需要设置display的属性即可, 假如想要将内联元素类型修改为块级元素, 代码如下

      span{

        display:block;

      }

      同理其他的也是一样的属性值不同而已, 修改为块级元素:block, 修改为内联元素:inline, 修改为内联块状元素:inline-block.

      这三种元素一定要非常准确的掌握, 因为在div + css布局中, 它们占了举足轻重的地位.

      

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage