块元素与行内（内嵌）元素的区别

最新推荐文章于 2022-02-27 19:19:25 发布

aochijing0046

最新推荐文章于 2022-02-27 19:19:25 发布

阅读量358

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/lichihua/p/8989910.html

版权

block（块）元素的特点：

①总是在新行上开始，相当于每个块元素默认有个换行符；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

inline元素的特点：

①和其他元素都在一行上默认没有换行符所以在一行上可以显示多个行内元素；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

块元素与内联元素的区别？

1.块元素，总是在新行上开始；内联元素，和其他元素都在一行上。

2.块元素，能容纳其他块元素或内联元素；内联元素，只能容纳文本或者其他内联元素。

3.块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变。

(这上面的区别，指的是默认情况下的，不包括CSS的刻意控制。也就是说当使用css控制时，块元素和内联元素的属性差异会越来越小。)

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。

内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE中浮动元素也存在于文档流中（还让我觉得这样很合理><）。

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。

基于文档流，我们可以很容易理解以下的定位模式：

相对定位，即相对于元素在文档流中位置进行偏移。但保留原占位。

绝对定位，即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。

固定定位，即完全脱离文档流，相对于视区进行偏移

转载于:https://www.cnblogs.com/lichihua/p/8989910.html

关注