行内元素和块级元素的区别？inline-block与float（面试题目）

╰半橙微兮° 2023-06-27 08:46 19阅读 0赞

# 一.行内元素与块级元素 #

**1.行内元素（inline）**：  
• 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.  
• 不能更改元素的height，width的值，大小由内容撑开.  
• 可以垂直方向上的padding和margin会失效

行内元素：span img input a i

a - 锚点  
abbr - 缩写  
acronym - 首字  
b - 粗体 ( 不推荐 )  
bdo - bidi override  
big - 大字体  
br - 换行  
cite - 引用  
code - 计算机代码 ( 在引用源码的时候需要 )  
dfn - 定义字段  
em - 强调  
font - 字体设定 ( 不推荐 )  
i - 斜体  
img - 图片  
input - 输入框  
kbd - 定义键盘文本  
label - 表格标签  
q - 短引用  
s - 中划线 ( 不推荐 )  
samp - 定义范例计算机代码  
select - 项目选择  
small - 小字体文本  
span - 常用内联容器，定义文本内区块  
strike - 中划线  
strong - 粗体强调  
sub - 下标  
sup - 上标  
textarea - 多行文本输入框  
tt - 电传文本  
u - 下划线  
var - 定义变量

**2.块级元素（block）**：  
• 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.  
• 能够改变元素的height，width的值.  
• 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

块级元素：div p form ul li h1-h6

address - 地址  
blockquote - 块引用  
center - 举中对齐块  
dir - 目录列表  
div - 常用块级容易，也是 css layout 的主要标签  
dl - 定义列表  
fieldset - form控制组  
form - 交互表单  
h3-大标题  
h4 - 副标题  
h3 - 3级标题  
h4 - 4级标题  
h5 - 5级标题  
h6 - 6级标题  
hr - 水平分隔线  
isindex - input prompt  
menu - 菜单列表  
noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容  
noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）  
ol - 排序表单  
p - 段落  
pre - 格式化文本  
table - 表格  
ul - 非排序列表

\*\*3.包含关系：\*\*块级元素可以包含行内元素和块级元素，  
但行内元素不能包含块级元素，只能包含文本或者其它行内元素

**4.行内元素与块级元素属性的不同**：主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，垂直方向上的margin与padding无效

**5.行内元素与块级元素的相互转换**：

/*表现形式为块级元素*/
    display:block;
    
    /*表现形式为行内元素*/
    display:inline;

# 二.inline-block与float #

## 1.inline-block： ##

（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。  
当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。

图一：原始状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]

图二：display：inline-block，但需要消除间隙  
![在这里插入图片描述][20200106173226728.png]

## 2.浮动布局： ##

图三：浮动布局父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：  
![在这里插入图片描述][20200106173553636.png]

## 3.高度不一的child的浮动布局与inline布局对比： ##

图四：浮动布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]  
图五：inline-block布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 2]

# 总结 #

• \*\*float浮动布局：\*\*可以达到横向排列的目的，但浮动会产生副作用，需要清除浮动,  
消除浮动：overflow:hidden;

• \*\*inline-block布局：\*\*也可以达到横向排列的效果，但需要消除间隙  
间隙产生的原因：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。  
清除间隙方法：[inline-block消除间隙][inline-block]

• inline-block布局：主要用于横向排列  
• 浮动布局：主要用于需要文字环绕的时候

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106173033987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg==,size_16,color_FFFFFF,t_70
[20200106173226728.png]: https://img-blog.csdnimg.cn/20200106173226728.png
[20200106173553636.png]: https://img-blog.csdnimg.cn/20200106173553636.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106173837391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200106185045936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg==,size_16,color_FFFFFF,t_70
[inline-block]: https://blog.csdn.net/weixin_46100406/article/details/103858615