网站首页 网站建设 网站报价 成功案例 建站知识 增值服务 联系方式 关于我们
网站首页
电话联系
在线咨询
网站首页
电话联系
在线咨询

HTML中的块级元素和行内元素区别

发布时间:2019-02-18 14:53
发布者:admin
浏览次数:

 

  在我们学习前端开发的时候,肯定会遇到这样的问题:什么是块级元素和行内元素,二者有什么区别?今天郑州网站建设公司就来给大家分享一下:

  块级元素的定义:

  块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

  行内元素的定义:

  行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化

  块级元素和行内元素区别:

  1. 块级元素可以设置width,height属性.

  2. 行内元素设置width,height属性无效,它的长度高度主要根据内容决定.但是可以设置行高

  3. 块级元素即使设置了宽度,仍然是独占一行.

  4. 块级元素可以设置margin和padding属性.

  5. 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

  块级元素和行内元素联系:

  行内元素与块级元素可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

  常用块级元素:

  div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等

  常用行内元素:

  span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button