1、display：inline-block后为什么有间距?
- display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。
- 解决这种问题的方式有：
- 将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。
- 给父元素设置font-size:0,给子元素设置需要的font-size值。缺点:是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size,增加了代码量。
- 给元素设置float:left,缺点需要清除浮动。
- 设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。
- 设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。
2、display有哪几种属性值?分别代表什么?Img属于什么元素？
display属性的含义：display控制元素的显示类型：
display属性的属性值可以分成两大类
常用的属性值
none代表为不显示：控制元素的隐藏
block代表显示为块级元素：还可以让元素控制元素显示
块级元素的特点：默认站宽一整行，能设置宽度高度，纵向排列
块级元素有：div,p,h1,h6,ol,ul,ol,li,dl,dt,dd,form,fieldset,legend,table,header,footer,section,main,nav,article,aside等等
inline代表行内元素;
行内元素的特点：不能设置宽度高度，并且能横向显示
行内元素有:a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var
inline-block代表行内块元素
行内块元素的特点：能设置宽度高度并且横向显示
行内块元素有:input,textarea,select,
flex代表的是触发弹性盒子
grid代表的是触发网格布局
- 不常用的属性值
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 )，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 )，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 )。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 )。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 )。
table-row 此元素会作为一个表格行显示(类似 )。
table-column-group 此元素会作为一个或多个列的分组来显示(类似)。
table-column 此元素会作为一个单元格列显示(类似 )
table-cell 此元素会作为一个表格单元格显示(类似 和 )
table-caption 此元素会作为一个表格标题显示(类似)
inherit 规定应该从父元素继承 display 属性的值。
- img属于什么元素：
浏览器中的computed计算属性中的图片的display的取值为inline，虽然为inline但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向显示；所以属于行内块元素，但是有些程序员也会把图片认为是行内元素也是可以，从另一个角度讲img也称作是置换元素。
更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。
京公网安备 11010802030320号