CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。

  • 默认情况下块元素,是独占一行的
  • 常见的块元素:div、p、h1-h6、form(只能用来容纳其他块元素)、hr、table、ul、ol
  • 高度,行高以及外边距和内边距都可控制
  • 宽度缺省是它的容器的100%,除非设定一个宽度
  • 它可以容纳内联元素和其他块元素

行内元素(inline element)也叫内嵌元素或内联元素,一般都是基于语义级(semantic)的基本元素。行内元素只能容纳文本或者其他行内元素,常见行内元素有a、span、img。CSS权威指南》中文字显示:任何不是块级元素的可见元素都是行内元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  • 和其他元素都在一行上
  • 高,行高及外边距和内边距不可改变
  • 宽度就是它的文字或图片的宽度,不可改变
  • 行内元素只能容纳文本或者其他行内元素

块元素和行内元素的区别

  • 块元素,总是在新行上开始;行内元素,和其他元素都在一行上
  • 块元素,能容纳其他块元素或行内元素;而内联元素,只能容纳文本或者其他行内元素
  • 块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变
  • 说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现

文档流

  • 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流
  • 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动
  • 内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素
  • 三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位。 但是在IE中浮动元素也存在于文档流中
  • 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
  • 基于文档流, 我们可以很容易理解以下的定位模式:相对定位(relative), 即相对于元素在文档流中位置进行偏移,但保留原占位。绝对定位(absolute), 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移。固定定位(fixed), 即完全脱离文档流, 相对于视区进行偏移。

referrence:

CSS块级元素、内联元素概念 -- 简明现代魔法​www.nowamagic.net图标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438456.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题,包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…

CSS块级元素、内联元素概念

CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面。看过OReilly的《CSS权威指南》,发现里面…

带字母的计算机在线使用,ASCII,进位制在线转换工具

APP说明ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646。十进制&am…

JS入门

一. 总体介绍 结合近半年来前端的项目的经验,这里梳理一下JS常用知识,方便自己日后温习查找,同时给广大JS入门者提供一些帮助,文章中如有错误,欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门…

在微型计算机中 存储容量为1kb 指的是,2016年计算机一级考试模板

​​红色标题的是正确答案18)下说法中,正确的是A)软盘片的容量远远小于硬盘的容量B)硬盘的存取速度比软盘的存取速度慢C)软盘是由多张盘片组成的磁盘组D)软盘驱动器是唯一的外部存储设备19)1KB 存储容量能存储的汉字内码的个数是A)128 B)256C)…

第一节 从面向对象的角度重新认识JS世界

一. 背景 距离上一篇JS文章已经20天,经重新总结发现,上一篇概况的有点浅显,适合初学js的入门了解,但对于已经学习js一段时间的人,或者是想系统的了解JS体系,接下来的文章可能会更有帮助。 该系列博客的书写…

联想记忆计算机网络,什么是双向联想记忆神经网络

联想记忆神经网络是模拟人脑, 把一些样本模式存储在神经网络的权值中, 通过大规模的并行计算, 使不完整的、受到噪声“污染”的畸变模式在网络中恢复到原有的模式本身。大脑是人体最为复杂的信息处理系统。联想记忆(AssociativeMemory, AM) 是人脑的重要认知功能之一。例如, 听…

第二节 DOM-Document对象

一. 整体介绍 这里介绍DOM对象中的Document对象。 何为Document对象?每个载入浏览器的HTML文档都会成为Document对象,Document对象可以帮助我们对所有的HTML文档进行访问。 任何一个对象都会有属性和方法,当然Document对象也不例外&#xff0…

计算机专业的情书,【实用】大学各专业表白情书,你能看懂几个

原标题:【实用】大学各专业表白情书,你能看懂几个大学各专业表白情书的正确打开方式每每看到朋友圈秀恩爱时就会用知识摆脱烦恼刷刷微博浏览网页学学专业技能......但是!居然连专业都不放过表白还那么高调来感受感受吧……音乐专业每次看着你…

第三节 DOM-Element对象

一. 整体介绍 这里介绍DOM对象中Element对象。 那么何为Element对象呢?Element对象就是HTML元素,Element对象包括:元素节点、文本节点、属性节点。 下面利用一张图来总体概括一下Element对象包含的知识点。 二. 知识梳理 一张图胜似千言万语…

计算机维修案例分析题,14-15年春季高考信息技术题(组装维修部分)

2014年山东省春季高考信息技术类组装维修试题一、选择题(每小题2分)36.计算机硬件系统的核心部件是A.主板B.CPU C.内存D.硬盘37.北桥芯片的功能不包括A.对CPU类型和主频的支持B.对ECC纠错的支持C&#xff0…

第四节Dom-Attribute对象

Dom-Attribute对象 Dom-Event对象

w8计算机配置要求,win8配置要求 详细介绍

随着win8系统的不断完善,现在已经越来越多用户投身到win8的行列之中,越来越多的人使用win8也代表着出现了新的问题,很多用户考虑到win系统对电脑的硬件要求有所不同,所以有些电脑无法完美的运行win8系统,究竟要怎么样才…

C#多线程编程系列(一)- 简介

目录 系列大纲一、前言二、目录结构四、章节结构五、相关链接系列大纲# 目前只整理到第二章,线程同步,笔者后面会慢慢更新,争取能把这本书中精华的知识都分享出来。C#多线程编程系列(一)- 简介C#多线程编程系列&…

计算机论文答辩注意哪些问题,计算机专业论文答辩(准备和注意事项)

随着社会的不断发展,计算机的应用在中国越来越普遍,在互联网、通信、多媒体等领域都有应用,对于计算专业的同学,毕业时,除了想了解毕业论文如何写作,还有就是论文的答辩准备,下面我们就为大家重…

C#多线程编程系列(二)- 线程基础

目录 C#多线程编程系列(二)- 线程基础 1.1 简介1.2 创建线程1.3 暂停线程1.4 线程等待1.5 终止线程1.6 检测线程状态1.7 线程优先级1.8 前台线程和后台线程1.9 向线程传递参数1.10 C# Lock关键字的使用1.11 使用Monitor类锁定资源1.12 多线程中处理异常…

南京大学计算机考研分数线2021,南京大学2021年硕士研究生复试基本分数线

一、学术学位报考学科门类总分第1门第2门第3门第4门备注哲学[01]33555559090各院(系、所)综合考虑生源情况、本学科、专业人才培养特点及复试比例要求,根据学校复试基本分数线,可上调本院(系、所)复试的成绩要求。经济学[02]39060609090法学[03]34550509…

计算机文化基础论述题,计算机文化基础复习题六

计算机文化基础复习题第六套答案仅供参考一、单项选择题(每题1分,共30分)1、网络信息安全的技术特征中 ,( )是系统安全的最基本要求之一,是所有网络信息系统建设和运行的基本目标。A、稳定性 B、运行速度 C、可靠性 D、运行质量2、要在FrontP…

C#多线程编程系列(三)- 线程同步

目录 1.1 简介1.2 执行基本原子操作1.3 使用Mutex类1.4 使用SemaphoreSlim类1.5 使用AutoResetEvent类1.6 使用ManualResetEventSlim类1.7 使用CountDownEvent类1.8 使用Barrier类1.9 使用ReaderWriterLockSlim类1.10 使用SpinWait类参考书籍笔者水平有限,如果错误…

C#多线程编程系列(四)- 使用线程池

目录 1.1 简介1.2 在线程池中调用委托1.3 向线程池中放入异步操作1.4 线程池与并行度1.5 实现一个取消选项1.6 在线程池中使用等待事件处理器及超时1.7 使用计时器1.8 使用BackgroundWorker组件参考书籍笔者水平有限,如果错误欢迎各位批评指正!1.1 简介…