常见的inline内联元素,block块级元素,以及inline

2018-03-07  本文已影响0人  猪耳朵_2587

一、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)、元素的高度、宽度、行高以及顶和底边距都可设置。

上一篇 下一篇

猜你喜欢

热点阅读