html基础之块元素、行内元素、行内块元素

一、块元素

display:block

//常见的块元素有<p></p><h1></h6><ul></ul><ol></ol><hr><div></div><form></form>

特点：

①、自己独占一行。

②、高宽、内外边距都可以控制。

③、默认宽度时父级宽度。

④、是一个容器和盒子，里面可以放行内元或者块级元素。

注意：

①、文字类元素内不能使用块级元素。

例如：

、标签主要用于放文字，里面不能再放其它块级元素。

插入一下如果两个块元素同时设置margin，会引起margin塌陷，两个块之前的margin以大的margin为准

二、行内元素

display：inline

//常见的行内元素有<span></span><a href=""></a><b></b><strong></strong><i></i><em></em><label></label><small></small>

特点：

①、一行可以显示多个。

②、宽高设置无效。

③、默认宽度是他本身内容的宽度。

④、行内元素只能容纳文本或者其它行内元素，不能放块级元素。

注意：

①、链接里面不能再放链接。

②、特殊情况 a 里面可以放块级元素，但是要转换为块级模式最安全。

三、行内块元素

display：inline-block

//常见的行内块元素有<img src="" ><iframe src="" ></iframe><input type="" /><textarea rows="" cols=""></textarea><select></select><button type=""></button>

特点：

①、一行可以显示多个。

②、默认宽度就是他本身内容的宽度。

③、宽高、内外边距都可以控制。

链接: /wan520/p/13916536.html