html元素类型

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都无效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。