2018前端必考面试题总结3

2018前端必考面试题总结3

• 列出display的值，说明他们的作用。
  

  display常用的属性值有：none、inline、block、inline-block。
  1.none：元素不显示，而且该元素的空间也不会保留。（区别于visibility：hidden，元素不显示但是会保留该元素的空间）
  2.inline：将元素显示为内联元素，元素前后没有换行符。无法设置宽高，此时影响它的高度一般是内部元素的高度（font-size）和padding。
  3.block：将元素显示为块级元素，元素前后会带有换行符。可设置宽高，且元素独占一行。
  4.inline-block：行内块元素。这个属性融合了inline和block的特性，所以它既是内联元素，也可设置宽高。

• position的值，relative和absolute定位原点是？

  position的属性值有：absolute、relative、fixed、static、inherit。
  1.absolute：绝对定位，相对于值不为static的最近的父元素进行定位。所有定位原点为离他最近的已定位的父元素的左上角为原点。
  2.relative：相对定位，相对于其正常位置进行定位。所以定位原点为元素本身的位置。
  3.fixed（老IE不支持）：绝对定位，相对于浏览器窗口进行定位。
  4.static：默认值，没有定位，元素出现在正常的流中。
  5.inherit：规定从父元素继承position属性值。

  • 为什么要初始化CSS样式？
    

  因为浏览器的兼容问题，不同浏览器有些标签的默认值是不同的，如果没有CSS 初始化往往会出现浏览器之间页面显示差异。
  但是初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
  最简单的初始化方法就是：

*{
    padding：0；
    margin：0；
}

但是不建议这样使用，淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size：100%；}

• CSS3有哪些新特性？

  主要有：
  1.CSS3实现圆角（border-radius），阴影（box-shadow）
  2.对文字加特效（text-shadow），强制文本换行（text-wrap），线性渐变（linear-radient）
  3.旋转，缩放，移动，倾斜：transform：rotate（90deg） scale（0.85,0.90） translate（0px，-30px） skew（-9deg,0deg）;
  4.增加了更多的CSS选择器，多背景，rgba();
  5.在CSS3中唯一引入的伪元素是 ::selection;
  6.媒体查询（@media），多栏布局（flex）
  7.@font face属性，它允许从web服务器上把字体下载到用户计算机上，从而准确的显示字体。是CSS3特性中唯一能被所有浏览器支持的属性。