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