行内元素块级元素空元素2019-02-16

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img,area ,base,col,command,embed,keygen,param,source,track,wbr

块级元素的特点:

1.总在新行上开始,占据一整行
2.默认情况下,其宽度自动填满其父元素宽度
3.宽度始终是与浏览器宽度一样,与内容无关
4.它可以容纳内联元素和其他块元素
5.display属性为block

块级元素的垂直相邻外边距margin会合并。

行内元素的特点:

1.和其他元素都在一行上
2.高,行高及外边距和内边距部分可改变
3.宽度只与内容有关
4.行内元素只能容纳文本或者其他行内元素
5.display属性为inline

水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,
但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。

空元素的特点:

没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
<br /> 就是没有关闭标签的空元素(<br /> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,121评论 1 45
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,591评论 0 8
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,946评论 0 7
  • 谈谈我对 行内元素/块级元素/空元素 的区别的认识 之前一直很熟悉 在行内元素、块级元素,后来听说竟然还有空元素一...
    _信仰zmh阅读 5,614评论 0 0