HTML中块级元素和行内元素的总结（上）

最新推荐文章于 2023-12-07 20:28:44 发布

寒漪hy

最新推荐文章于 2023-12-07 20:28:44 发布

阅读量157

点赞数

分类专栏： 1

本文链接：https://blog.csdn.net/qq_45146082/article/details/103398792

版权

25 篇文章 0 订阅

订阅专栏

HTML标签

<br/><hr/><input/><img/>

5.标签可以嵌套,例如:

<a><b><b/><a/>

但是不能交叉嵌套,例如：

<a><b><a/><b/>

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。
怪异模式中，width包含padding和border的宽度，即网页宽度为width。
css3新增box-sizing属性，用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型：
content-box，默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中，即标准模式下的盒模型。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值，即怪异模式下的盒模型。

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
注意：
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
通过display属性对行内元素和块级元素进行切换(主要看第2.3.4个值)：

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 tbody）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 thead）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 tfoot）。
table-row	此元素会作为一个表格行显示（类似 tr）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 colgroup）。
table-column	此元素会作为一个单元格列显示（类似 col）
table-cell	此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption	此元素会作为一个表格标题显示（类似 caption）
inherit	规定应该从父元素继承 display 属性的值。

关注