网页中的块级元素和行内元素

块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。

行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、<span>等元素都是行内元素。display属性等于“inline”的元素都是行内元素。

PS:块级和行内可以相互转换:通过设定CSS的display属性,可以使行内元素变为块级元素:display:block;也可以让块级元素变为行内元素:display:inline。

display

基本格式:display : none | block | inline

none:元素不会被显示。

block:元素将显示为块级元素,前后会带有换行符。

inline:默认。此元素会被显示为内联元素,元素后的内容在同一行显示。

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

  1. 块级元素可以设置 width,height属性,行内元素设置width,height无效。
  2. 块级元素可以设置margin 和 padding。 行内元素水平方向的padding-left,padding-right,margin-left,margin-right有效,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2128.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年7月10日 上午8:54
下一篇 2018年7月11日 上午8:39

99%的人还看了以下文章

  • 实施多元化线上教学,引导学生自主学习

    如何有效开展线上教学,调动学生的学习热情、课堂参与,是当下高校教师普遍关心的问题。结合使用腾讯会议+雨课堂的《生态学》线上教学,我的教学总结和反思如下: 设计好线上课程的整体布局和开展思路,让学生熟悉各授课环节。授课前通过雨课堂发布预习课件,如:阅读电子材料、观看嵌入式视频、设置目标思考题、完成预习检测、课堂讨论或其拓展调研题目等。学生自主完成学习,建立初步…

    2020年5月9日
    2.0K0
  • animation动画详解:制作颜色不停变化的正方形

    讲解CSS3 animation动画属性,并通过实例《制作颜色不停变化的正方形》演示animation的使用。

    2018年2月8日
    2.6K0
  • 未来将消失的十大职业,有没有你从事的工作?(必看)

    科技发展日新月异,有些原来难已想象的事情早已变成现实,无人驾驶,机器人技术,3D打印……未来几十年新技术的发展必然会给生活带来重大的影响。 未来将消失的十大职业之一:司机 无人驾驶技术的发展,会让司机、驾校和交警消失。 未来将消失的十大职业之二:银行柜员 线下支付的方法已经成为潮流,现在出门也不必带现金和钱包,仅靠一部手机就能够走到许多地方,到银行柜台办业务…

    2020年2月11日 未分类
    3.0K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    2.0K0
  • 18个优秀的CSS前端效果代码-网页设计师收藏

    网页设计师收藏的18个优秀的CSS前端效果代码

    2018年2月20日
    2.5K0
  • 综合实训-制作动态JSP企业网站

    [上机目的与要求] 综合运用所学相关知识,设计和开发企业网站。 [上机重点与难点] 项目开发的步骤、MVC设计模式的使用,前后端开发对接。 [上  机  方  法]     由指导老师演示和指导,学生亲自上机操作。 [上  机  内  容]    制作动态JSP企业网站 网站目录管理示例一: 网站目录管理示例二: 撰写文章示例一: 撰写文章示例二:

    2019年11月16日 未分类
    1.8K0

发表回复

登录后才能评论