前端面试题---CSS篇（二）

1、居中对齐方式有哪些？

答：1、margin：0 auto；

        2、margin-left配合margin-top

        3、position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）

        4、margin-left,margin-top配合transform：translate（-50%，-50%）

2、实现文本溢出的省略样式

答： white-space：nowrap；

        text-overflow：ellipsis；

        overflow：hidden；

3、px、em、rem、vh/vw的区别

答： 1、px是绝对单位，一旦固定，就不能随页面变化而改变

        2、em和rem是相对单位，它们相对于px更为灵活，适合做响应式设计

        3、em是根据自身font-size改变，若自身没有，则根据父元素改变

        4、rem根据根标签的font-size改变，常配合@media一起做响应式

        5、vw/vh相对视口大小布局，把屏幕平均分成100份

4、盒子塌陷的原因？解决方式？

答： 1、浮动会引起盒子塌陷   

        解决办法：(1)、清除浮动 (2)、给父盒子加高度 (3)、给父盒子加overflow：hidden

        2、父子盒子，给子盒子margin-top，父盒子会下移

        解决办法：(1)、给父盒子加边框 (2)、给父盒子加overflow：hidden

5、BFC

答：BFC是块级格式化上下文，它是一块独立渲染的区域，与外界元素互不干扰

       开启BFC盒子的方法：

                (1)、display不为none

                (2)、overflow不为visible

                (3)、固定定位和绝对定位

6、如何设置比12px更小的字体

答：transform：scale()

7、flex布局常用的属性

答： flex-direction 改变主轴方向

        justify-content 主轴的排列方式

        align-items 侧轴排列方式

        flex-wrap 换行

8、对盒子模型的理解

答：标准盒子宽度（高度） = content

        IE盒子宽度（高度） = border + padding + content