html标签之块级元素与行内元素

html元素一般分为块级元素、行内元素、可变元素

块级元素：

独占一行——如果没有css的作用，块元素会依次以每次另起一行的方式一直往下排，一行内只会有一个块级元素存在。

可以设置宽高——会计元素可以收到css的作用，设置自身的宽高：height:100px; width:100px;

常见的块级元素主要有：

div     p    ul   ol    li    table    h1~h6    form    menu    address    blockquote     dir    dl    blockquote

行内元素：

行内并存——与块级元素相反，行内元素不会独占一行，就是说一行内可以有多个行内元素同事存在，依次向右排列，直到撑满父级元素的宽，才会换行；

设置宽高无效——css代码height:100px; width:100px;设置在行内元素身上时是不会有效果的；行内元素的宽高是有自身内容撑起来的；
常见的行内元素有：

span    a    select    input   mg    abel   textarea    em    font    strike    strong

可变元素：

这一部分的元素根据上下文语境决定为块元素还是内联元素

常见的可变元素有：

applet - java applet   

button - 按钮   

del - 删除文本   

 frame - inline frame   

ins - 插入的文本   

map - 图片区块(map)   

object - object对象   

script - 客户端脚本 

块级元素与行内元素之间的相互转换：

在实际开发过程中，我们经常会遇到需要把一个块级元素转换成行内元素，或者要给一个行内元素设置宽和高的情况，这时我们会用到一个属性：display，通过对元素的该属性设不同的值，我们可以改变元素的一些特性，该属性对应的值有：

display:block——设为块级元素，拥有块级元素的特性；

display:inline——设为行内元素，拥有行内元素的特性；

display:inline-block——设为行内块级元素，同时具备行内元素与块级元素的一些特性，即可在一行内同时存在；又可以设置宽高；

display:none——使元素消失，是真正的消失，既看不到元素，元素在网页上也不占据位置，排在该元素之后的元素会自动补到该元素原来的位置上。