常见的inline内联元素,block块级元素,以及inline-block内联块级元素有哪些?各自有什么特点?

一、inline内联元素

  ➤b, big, i, small, tt

  ➤abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

  ➤a, bdo, br, img, map, object, q, script, span, sub, sup

  ➤button, input, label, select, textarea

eg:在HTML中:

    <p>This<span>span</span>is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.</p>

  在CSS中:

    span { background-color: #8ABB55; }

二、block块级元素

  ➤address,article,aside,audio,blockquote,canvas,dd,div,dl,fieldset

  ➤figcaption,figure,footer,form,h1~h6,header,hgroup,hr,noscript

  ➤ol,output,p,pre,section,table,tfoot,ul,video

*注:块级元素只能出现在<body>元素内。

eg:在HTML中:

  <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

在CSS中:

   p { background-color: #8ABB55; }

三、inline-block元素

  ➤img,input

四、特点

inline元素:

  (1)、和其他元素都在一行上;

  (2)、元素的高度、宽度、行高及顶部和底部边距不可设置;

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


block元素:

  (1)、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);

  (2)、元素的高度、宽度、行高以及顶和底边距都可设置;

  (3)、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。


inline-block元素:

  (1)、和其他元素都在一行上;

  (2)、元素的高度、宽度、行高以及顶和底边距都可设置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容