五年面试，三年模拟(css篇)

position哪几个属性？

1. static 默认值没有定位，元素出现在正常的流中
2. relative 相对定位，相对于其正常位置进行定位(例如：”top:20px” 会向当前元素不加position属性时的位置添加20像素的距离)
3. absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位(若所有父元素都没有position属性即和relative效果一样)
4. fixed 绝对定位，相对于浏览器窗口进行定位

文档流了解过吗？

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。

display、visibility和opactity的区别

display：none	visibility：hidden	opacity: 0
元素从DOM中消失，不占空间	没有消失，占空间	没有消失，占空间
子元素一同从DOM中消失，将子元素设置为block，仍然不可见	继承，子元素不可见时因为继承了父元素的样式，子元素设置为visible，仍然可见	子元素opacity: 1仍然不可见
无法触发绑定在该元素上的事件	无法触发绑定在该元素上的事件	可以触发事件

css中奇偶数的选择器

// 偶数
p:nth-child(even) {
    color: red;
}

// 奇数
p:nth-child(odd) {
    color: green;
}

盒模型有哪些，他们的区别是什么

目前有两种盒模型：W3C盒子模型(标准盒模型)、IE盒子模型(怪异盒模型)

区别：元素宽度和高度的计算不同(通俗点就是div的width或者height组成不同)

// 标准盒模型元素(div)的宽度/高度
content-box为默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）

// IE盒子模型元素(div)的宽度/高度
border-box代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

如何设置这两种模型

//通过css中的box-sizing属性

box-sizing: content-box; // 标准盒模型
box-sizing: border-box; // IE盒模型

这个demo更好的说明了两个盒模型的区别

清除浮动的几种方式

清除浮动是清除掉 “当前元素” “前面” 的 “兄弟级浮动元素” 对 “当前元素” 的影响,为了解决子元素浮动，父元素高度塌陷的问题

1.父级容器设置 overflow：hidden ，重新计算高度 

2.父级元素用after伪元素

.father::after {
    content: '';
    clear: both;
    display: block;
    height: 0; //高度为0且hidden让该文本彻底隐藏
    visibility: hidden;
}

3.“当前元素”设置 clear: both

移动端1px如何实现

为什么会出现1px的问题：css中的1px并不等于移动设备的1px

解决方案:

1.使用border-image

2.使用background-image

3.使用box-shadow模拟边框

4.使用伪元素 after

移动端滚动穿透问题

问题描述：在移动端，如果出现了模态框那么点击模态框或者滚动模态框里面的列表时，模态框下面的页面也会跟着滚动

1.在模态框touchstart事件时，调用preventDefault

modal.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, false);

缺点：如果模态框本身有滚动条将无法滚动

2.模态框出现时，父级body{overflow:hidden}