HTML元素

元素类型
  1. 行级元素(display: inline)
    • 排列特性:可以和其他标签在同一行排列,一排无法放下的元素将在下一行开始排列
    • 宽高特性:不支持设置宽高、宽高均由内容撑开。
    • 边距特性:左右外边距生效,上下外边距不生效。上下内可以设置生效,但是无法作用于其他元素
    • 换行间距:标签之间的换行会被解析为空格
    • 常见的行级标签:<a>、<span>、<strong>、<em>、<i>、<b>、伪类元素....
  2. 块级元素(display: block)
    • 排列特性:单独占据一行的位置
    • 宽高特性:可以设置宽高,高度由内容或者字体行高撑开,宽度默认为父级元素100%(定位元素除外)
    • 边距特性:支持设置内外边距,并且正常生效
    • 常见的行级标签:<div>、<p>、<ul>、<li>、<h>、<dl>、<dt>、<dd>....
  3. 行块级元素(display: inline-block)
    • 排列特性:可以和其他标签在同一行排列,一排无法放下的元素将在下一行开始排列
    • 宽高特性:可以设置宽高,宽高均默认由内容或者字体行高撑开
    • 边距特性:支持设置内外边距,并且正常生效
    • 换行间距:标签之间的换行会被解析为空格
    • 对其方式:行块元素的位置会受到text-align文本对其方式的影响
    • 常见的行级标签:<img>、<input>、<select>....

注释:
文本对齐方式:text-align: [left(默认), right, center]
最常用就是让img图片居中对齐,注意:要给父级这个属性

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

推荐阅读更多精彩内容