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

CSS块级元素与行内元素的区别和联系相关推荐

CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...

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

CSS块级元素与行内元素的区别和联系相关推荐

最新文章

热门文章