1.z-index的使用
答：z-index是用于设置标签的层级关系，需要同时设置标签的position属性，标签的默认z-index为0，可以设置负数，值越大，越在顶部，相反值越小 越在下面， 权重的数字也要适当 导航 底部切换 固定logo等 一些常见估计在最顶部 的权重可以把数值调大 ，其他的 就适当
2.float的使用
答：属性定义元素在哪个方向浮动。在HTML有标准流，浮动流 当元素浮动的时候，他本身就会脱离标准流，如果父盒子没设置高度的话 会变成0，所以我们可以通过清除浮动来消除影响 以往这个属性总应用于图像，使文本围绕在图像周围，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。具体如下：
float造成的效果
- 使元素本身变成了类似于inline-block的元素
- 使包裹它的元素忽略它的高度，即父元素没有了高度
- 如：给子元素box设置了height:100px;此时的父元素height也是100px。
float的影响
- float使元素脱离了文档流按照指定的方向发生了移动，直到它的外边缘碰到包含框或者另一个浮动的边框为止。
- 浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的
- 如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
- 以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素"卡住"
3.清除浮动影响的方式
答：float会造成文档流的破坏，会让布局方式发生改变 浮动元素会覆盖在标准流的元素上面 因此，需要消除float所造成的影响一般有如下几种方案解决：
- 针对子元素：给浮动的子元素后面再加一个元素，加上一个clear：both属性即可正常显示，缺点是随意添加了一个空元素，不符合代码规范
- 针对于1的另外一个思路就是通过伪类的方法在伪类上添加clear：both;
- 针对父元素：给父元素后面添加一个相邻的空元素，设置clear属性，但只是让后面的元素正常显示，并没有撑开父元素的高度
- 针对父元素：给父元素设置高度，可以正常显示，但扩展性不好，因为一般都是由里面的内容来撑开高度
- 针对父元素：给父元素设置display: inline-block，可以正常显示，但父元素的margin：auto失效了，而且会发现上下两个部分会出现间隙
- 针对父元素：给父元素设置overflow: hidden，可以正常显示了，但需要配合宽度，否则会默认占满一行。
4.css形变属性
答：CSS3添加了形变功能，通过transform 我们可以对元素进行旋转，平移，缩小放大，倾斜的操作，默认是2D，操作X和Y，
- 通过transform-style: preserve-3d 开始元素的3D模式 多了个Z轴，
- 通过 backface-visibility选择元素旋转到180度后 是否可以看到背面
- 通过perspective 开始元素近大远小的效果
- 这个是一些常见CSS图形 CSS图形变化
5.box-sizing的用法
答：标准的盒子模型的包括：margin，border，padding以及内容的宽度，即：盒子的实际宽度=内容的左右margin+左右border+左右padding+内容的实际宽度；默认的添加边距的话 内容盒子就会对应变换，而有时候我们需要固定大小但又要加边距 wm引入了box-sizing属性，可以改变标准盒子模型的计算方式，具体为：设置box-sizing：border-box的时候，盒子的实际宽度=内容的左右margin+内容的实际宽度，即宽度会保持不变 当然可以直接设置box-sizing：content-box的时候即可恢复正常的标准盒子模型
6.flex弹性布局
答：设置盒子的display属性为flex，或者line-flex，其对应还有六个css属性
- flex-direction：设置子元素的排列方式（row，column，row-reverse，column-reverse）
- row 默认值。灵活的项目将水平显示，正如一个行一样。
- column 灵活的项目将垂直显示，正如一个列一样。
- row-reverse 与 row 相同，但是以相反的顺序。
- column-reverse 与 column 相同，但是以相反的顺序。
- flex-warp：设置子元素的是否换行（nowarp，warp，warp-reverse）
- flex-flow：flex-direction和flex-warp的缩写，默认为row nowarp
- justify-content：设置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）
- align-items：设置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）
- align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）
7.常见居中方案
- 行内元素水平居中：直接使用text-align：center;
- 行内元素垂直居中：vertical-align：middle并设置父级元素的行高为父级元素的高度
- 块级元素 水平居中使用：magin：0 auto;
- flex弹性布局：设置justify-content：center水平居中，align-items：垂直居中
- 通过padding属性进行垂直居中，计算中间值
- 通过table 布局 设置父级元素为：display：table-cell，vertical-align：middle;text-align：center；
- 高度确定的时候：绝对定位+margin来垂直居中 上下各为50%，上边距为高度的一半 左边距为宽度的一半
- 高度不确定的时候：绝对定位+transform，具体为：设置需要垂直居中的元素为：position：absolute，top：50%,left: 50%； transform：translate(-50%，-50%)
- 父级元素高度已知，子元素高宽固定（高度可不固定）：text-align：center，line-height：父级高度
