HTML面试题六：HTML有哪些布局元素，说明每种布局元素的应用场景

HTML面试题六：HTML有哪些布局元素，说明每种布局元素的应用场景

一. HTML有哪些布局元素

1. 内联元素——本身属性为 display:inline

• 典型的有：span,a,b,i,input,textarea,em,br,i
• 行内显示，从左到右排布
• 不能直接控制高度宽度等css属性，因为其宽高是由本身内容大小决定的（文字，图片等）
• 但能直接设置内外边距的左右值
• 只能容纳文本或者其他行内元素，不能嵌套块级元素

2. 块级元素本——身属性为display:block

• 典型的有 div,h,hr,menu,ol,ul,li,dl,table,p,from
• 独占一行，从上到下排布
• 可以直接控制宽高等其他相关css属性
• 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
• 在不设置高度的情况下，块级元素的高度是它本身内容的高度

2. 内联块状元素本——身属性为display:inline-block

• 内联块状元素综合了前两种的特性
• 它有内敛元素的：行内显示，从左到右排布 这一特点
• 它又有块级元素的：直接控制宽高等其他相关css属性 这特点

二. 布局元素应用场景

• 内联元素：用于标签行内展示，不指定标签宽高的场景
• 块状元素：用于标签独占一行，指定标签宽高的场景
• 内联块状元素：用于标签行内展示，指定标签宽高的场景