今天小编跟大家讲解下有关前端设计师需要了解的9个问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端设计师需要了解的9个问题 的相关资料，希望小伙伴们看了有所帮助。
1.块级元素和行内元素的区别
块级元素即使设置了宽度 仍然是独占一行的 块级元素可以设置margin和padding属性。行内元素的margin和padding属性只有水平边距 没有竖直边距。竖直方向的padding虽然增大了行内元素的面积 但并没有和相邻元素拉开距离。
2.display:inline-block和hasLayout
为了兼容IE6、IE7(不支持display:inline:block) 我们真正能使用的display类型只有inline,block和none.display:inline-block集块级元素和行内元素的特点于一身。为了使IE6、IE7实现display:inline-block效果 可以在行内元素(如span)中定义display：inline-block 以触发hasLayout,可以使用vertical-align:-10px和其他实现浏览器效果一样。它只能对行内元素实现display:inline-block；还要用到针对IE的hack,*vertical-align。
3.relative、absolute和float
position:absolute和float会隐式的改变display类型 不论之前是什么类型的元素（display:none除外） 只要设置了postion:absolute、float；left和float:right中任意一个 都会让元素以display:inline-block显示 这也就是IE6下使用float产生双边距可以使用display:inline去除.position:relative不会隐式改变display的类型。
4.水平居中
文本、图片等行内元素的水平居中可以使用text_align:center。确定宽度的块级元素的水平居中可以使用margin:0 auto;不确定宽度的块级元素的水平居中（1）.讲内容放入table标签 这是table标签margin:0 auto;（2）将块级元素使用display:inline变成行内元素 在通过text-align:center实现；（3）给父元素设置float,然后父元素设置position:reletive和left:50%,子元素设置成position:reletive和left:-50%.
5.竖直居中
父元素高度不确定的文本、图片和块级元素竖直居中是通过给父容器设置上下边距实现的。父元素高度确定的单行文本竖直居中 是通过给父元素设置line-hignt等于父元素hight高度实现的。父元素高度不确定的多行文本、图片和块级元素竖直居中（1）直接使用表格（2）对于支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle实现居中。对于不支持则使用IE hack
6.网格布局
同级下 哪块内容重要 在HTML就优先写到前面。用于布局个人偏好子选择器
7.Z-index的相关问题及flash和IE6下的select元素
除了x,y轴 还有一个Z轴 z轴在元素设置position为reletive或absolute或被激活 起大小有z-index设置 z-index越大 元素位置越靠上。z-index只对非窗口的元素有效 而flash默认是窗口模式 我们要将flash中的womde设置成opaque或transpartentselect元素在IE6下也是默认以窗口形式显示的。
8.插入png图片
IE6的png图片不支持透明 可以使用IE下私有的滤镜解决。
9.使用IETest进行多IE版本调试。
来源：爱蒂网
