HTML中标签元素三种不同类型:块元素,行内元素,行内块元素。三者的主要区别在于生成方式不同,布局表现不同,属性设置不同。
块元素
常用的块状元素:<div> <p> <h1>--<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
块级元素特点:display:block;
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及内外边距都可设置。
3、除非明确设定元素宽度,否则自动充满其本身父容器的宽度(和父元素的宽度一致)。
行内块元素
默认的行内块状元素:<input> <img> <button> <textarea>
行内块状元素的特点
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置
行内元素
常用的行内元素:<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>
行内元素特点:display:inline;
- 和相邻的行内元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置(padding和margin的left和right是可以设置的)
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
W3c css2规定,行内元素不会应用width属性。
行内元素不会应用height属性,但是盒子高度可以通过line-height来指定。
可以给行内元素设置margin与padding,但是只左右设置会生效,上下padding或者margin都无效。