前端面试题-display篇

1、display: inline-block后为什么有间距?

display:inline-block是让元素在一行显示， 但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙。

解决这种问题的方式有:

• -将html标签要display:inline-block的元素写在一行。缺点:代码可读性差。
• -给父元素设置font-size:0，给子元素设置需要的font-size值。缺点:是子元素如果里面有文字，文字会消失不见,所以又要给子元素设置font-size,增加了代码量。
• -给元素设置float:lef,缺点需要清除浮动。
• -设置子元素的margin-left为负值,但是元素之间的间隙大小是根据.上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，所以这个方法不通用。
• -设置父元素display:table;word-spacing:-1em;目前这个方法可以完美解决,且兼容其他浏览器。

2、display有 哪几种属性值?分别代表什么?lmg属于什么元素?

display控制元素的显示类型:

display属性的属性值可以分成两大类

1）常用的属性值——

none代表为不显示：控制元素的隐藏；

block代表显示为块级元素：还可以让元素控制元素显示；

块级元素的特点：默认站宽-整行，能设置宽度高度,纵向排列；

块级元素有：div,p,h1 ,h6,ol,l,l,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代表的是触发网格布局

2）不常用的属性值

• listitem此元素会作为列表显示；
• 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也称作是置换元素。