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——使元素消失,是真正的消失,既看不到元素,元素在网页上也不占据位置,排在该元素之后的元素会自动补到该元素原来的位置上。