首頁 > web前端 > html教學 > html的块级、内联、内联块级元素基础_html/css_WEB-ITnose

html的块级、内联、内联块级元素基础_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:33:13
原創
1140 人瀏覽過

概念

块级:block

内联:inline

内联块级:inline-block

 

在html元素中,元素会有display属性

display属性默认值是block,那么该元素是块级元素。

display属性默认值是inline,那么该元素是内联元素。

没有元素的display默认值是inline-block。

display属性值可以被设置,比如可以把块级元素div的display的值设成inline,那么它就变成了内联元素,不再独行显示。

 

特征

1.块级元素

  独占一行。

  可设置width,height,margin,padding。

  内部可包含块级或内联元素。

2.内联元素

  和其他inline元素同行显示。

  设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom无效,可以设置margin-left,margin-righ,padding-left,padding-right。

  内部可包含块级或内联元素,内部包含块级元素时,该块级元素继续保持独行显示,下一个内联元素会换行显示。

3.inline-block

  和其他inline元素同行显示。

  和块级元素一样可设置width,height,margin,padding。

  内部可包含块级或内联元素,内部包含块级元素时,该块级元素会在内联元素的内部独行显示,不会影响下一个内联元素的同行显示。

  

常用的块级元素

div,form,p,table,h1~h6,hr,dl,ol,ul,pre等

 

常用的内联元素

a,img,input,span,br,select,strong,em,textarea,label等

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板