1.关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

（但是在移动端要避免使用100vh）

####1.1 object-fit 与 object-position 属性

  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

alt

alt

如果使用过程中，图片显示的位置不是我们想要的，可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。

网页背景：cover保证能撑到整个页面；attachment按照cover的显示方式，然后等比例缩放。最终呈现出缩放的时候，背景不会变形，也只会出现一张背景图，背景图在缩放。

alt

图片自适应：图片是行内元素，虽然能设置宽高，display:block图片过后，才能用margin:0 auto居中。

alt

margin :0 auto居中（父元素要设置宽度/position:relatvie;left:0;right:0；这样是可以的。/ 但注意：子元素浮动，margin居中会失效！！ 比如flex，flex需要计算自身元素的宽度，且设置自身元素的宽度才能）

alt

2.可以设置父元素的left:0; right:0 这样会宽度会撑开，并且子元素使用margin:0 auto 可以居中

同样道理：top:0; bottom:0,高度会撑开。（父元素好像要设置position）

3.关于某个块级渐变/旋转

    -webkit-transition: all .3s ease 0s;	旋转是： transform:rorate(45deg)
    -moz-transition: all .3s ease 0s;;
    -ms-transition: all .3s ease 0s;;
    -o-transition: all .3s ease 0s;;
    transition: all .3s ease 0s;

这是为了适应不同浏览器，不同解析器

-webkit-代表chrome、safari私有属性

-moz-代表firefox浏览器私有属性

-ms-代表IE浏览器私有属性

-o-代表Operai私有属性

为什么要有私有前缀呢？

因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius。

4.swiper 插件。比较流行的滑动插件。可以了解，有vue-awesome-swiper；下载的时候两个版本需要对应，不然会失效。可以去官方api 查看。

5.vue中，watch监听屏幕尺寸，从而改变data中的值，双向绑定到页面中。

vue监听屏幕尺寸变化，window.onresize很简单

6.伪元素制作箭头

页面直接用

<div class="arrow"></div>

alt

这里还差position:absolute; 不然不生生效；而且父盒子需要设置position:relative; 这样好调正箭头位置。

内容content:"";为空，一般来说，还会有绝对定位去调正其位置。

7.设置了相对定位relative之后，改变top值，如何去掉多余空白

sal主题网站home页轮播图 有实践（top:-80px; margin-bottom:-80px）

众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。

要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白