带你认清块级元素内联元素行内块级元素

Posted 2022-12-05 WHOVENLY

目录

• 一、定义
• 二、块级元素
• 三、行内元素
• 四、行内块级元素

一、定义

html可以将元素分类方式分为内联（行内）元素、块级（块状）元素和行内块元素三种。行内元素与块级函数可以相互转换。

html中的标签元素大体被分为三种不同的类型：块级（块状）元素、内联（行内）元素和内联块状元素，并且这三种类型可以通过display属性进行相互转换。

二、块级元素

1.设置元素为块级元素：display:inline

2.特点：

• 独处一行。
• 宽度默认为父级100%，高度为元素的高度。
• 可设置宽高。
• 可以容纳行内元素和其他块元素。特殊：文字类的块级元素不能放块元素，例如<p>、<h1>~<h6>、<dt>。

3.常见的块级元素有：div、p、table、ul、li、h1-h6、 form

三、行内元素

1.设置元素为块级元素：display:block

2.特点：

• 与其他元素共处一行。
• 宽高为内容的宽高，不可设置宽高。
• 不可设置上下的外边距。
• 行内元素只能容纳其他行内元素或者文本。特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。

3.常见的行内元素有：img、a、span、i、lebel、input、button

四、行内块级元素

1.设置元素为块级元素：display:inline-block

2.特点：

• 和相邻行内元素在同一行，但是之间会有空白缝隙。
• 默认宽度是他本身内容的宽度。
• 宽度、高度、行高、外边距以及内边距都可以手动设置。

3.常见的行内块级元素有：<img>、<input>、<td>
4.可以把行内块级元素当成文本来对待：
（1）行内块级元素间会有字间距，可以采用父级font-size：0px;自己font-size：想要的字号。进行消除间距。
（2）此时元素是不存在文档流中的，所以使用margin值并不能使其居中，而是应该在父级添加text-aling：center ==》水平居中。line-height ==>竖直居中