前端面试问题(CSS3)

CSS(3)

1.水平居中的方法

1.元素为行内元素,设置父元素text-align:center

2.如果元素宽度固定,可以设置左右margin为auto;

3.如果元素为绝对定位,设置父元素position为relative,元素设left:0;right:0;margin:auto;

4.使用flex-box布局,指定justify-content属性为center

5.display设置为tabel-ceil

2.垂直居中的方法

1.将显示方式设置为表格,display:table-cell,同时设置vertial-align:middle

2.使用flex布局,设置为align-item:center

3.绝对定位中设置bottom:0,top:0,并设置margin:auto

4.绝对定位中固定高度时设置top:50%,margin-top值为高度一半的负值

5.文本垂直居中设置line-height为height值

3.简要介绍一下CSS3的新特性

在布局方面新增了flex布局,

扫描二维码关注公众号,回复: 98140 查看本文章

在选择器方面新增了例如:first-of-type,nth-child等选择器,

在盒模型方面添加了box-sizing来改变盒模型,

在动画方面增加了animation、2d变换、3d变换等。

在颜色方面添加透明、rgba等,

在字体方面 允许嵌入字体和设置字体阴影,同时当然也有盒子的阴影

最后还有关键的媒体查询。

4.如何使用CSS实现硬件加速?

硬件加速是指通过创建独立的复合图层,让GPU来渲染这个图层,从而提高性能, 一般触发硬件加速的CSS属性有transform、opacity、filter,为了避免2D动画在 开始和结束的时候的repaint操作,一般使用tranform:translateZ(0)

5.说一说css3的animation

6.绝对定位和相对定位的区别?

绝对定位是相对于最近的已经定位的祖先元素,没有则相对于body,绝对定位脱离文档流,

而相对定位是相对于元素在文档中的初始位置,并且 相对定位的元素仍然占据原有的空间。

7.BFC是什么?介绍一下,如何触发BFC?

BFC也就是常说的块格式化上下文,这是一个独立的渲染区域,规定了内部如何布局,并且这个区域的子元素不会影响到外面的元素。其中比较重要的布局规则有内部box垂直放置、计算BFC的高度的时候,浮动元素也参与计算。 触发BFC的规则有根元素、浮动元素、position为absolute或fixed的元素、display属性为inline-block、table-cell、table-caption、flex、inline-fllex、overflow不为visible的元素。

 

猜你喜欢

转载自www.cnblogs.com/FunkyEric/p/8979230.html