块级元素与内联元素的特性

块级元素与内联元素

块级元素(BlockElement)	内联元素(InlineElement)
块级元素一般都从新行开始，相邻的块级元素将会在不同行显示	内联元素一般都从当前行开始，相邻的内联元素将会在同一行显示
高度，行高以及外边距和内边距都可控制	高度，行高及外边距和内边距不可控制
宽度缺省是它的容器的100%，除非设定一个宽度	宽度就是它的文字或图片的宽度，不可改变
可以容纳内联元素和其他块元素	只能容纳文本或者其他内联元素

 

---

常见块级元素 :

div    h1-h6    p    ol    ul    li

全部块级元素:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

---

常见内联元素: 

a    img    input    button    span

 全部内联元素:

  a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

---

 css样式:

.css

display:block;    //显示为块级元素
display:inline;    //显示为内联元素
dipslay:inline-block;     //显示为内联元素,同行显示并可修改外边距和内边距