多面手·前端面试题精粹合集（二）CSS篇

文字环绕图片的实现

1、给<img>添加属性align：right图片居右，left图片居左

2、给图片添加属性 float:left 盒子居左，float:right 盒子居右

3、使用绝对定位实现文字环绕效果，并用z-index属性来控制图文的位置关系

4、使用弹性盒布局实现文字环绕效果，并利用flex-direction和flex-wrap属性来控制文字环绕的方向和换行方式

如何使用CSS实现文本溢出省略号

1、使用text-overflow: ellipsis属性实现文本溢出省略号效果

2、使用white-space: nowrap属性禁止文本换行，并使用overflow: hidden属性隐藏溢出部分的文本，实现文本溢出省略号效果

如何使用CSS实现文字垂直居中

1、使用vertical-align: middle属性将文字垂直居中，并使用line-height属性来设置文本的行高

2、使用transform: translateY(-50%)属性将文字向上平移50%，实现文本垂直居中

3、使用position: absolute和top: 50%; transform: translateY(-50%)属性将文字垂直居中

CSS实现页面横向滚动条隐藏

1、使用overflow-x: hidden属性隐藏页面横向滚动条

2、使用overflow: scroll属性设置页面滚动条为纵向滚动条，并使用overflow-x: hidden属性隐藏页面横向滚动条

3、使用overflow: hidden属性隐藏页面滚动条，并使用width: 100%; height: 100%;属性将页面撑满整个屏幕，实现页面横向滚动条隐藏

如何使用CSS实现元素居中

1、使用text-align: center属性将元素水平居中

2、使用margin: 0 auto属性将元素水平居中

3、使用position: absolute; left: 50%; transform: translate(-50%, -50%);属性将元素水平和垂直居中

CSS伪类有哪些

1、链接伪类：a:link、a:visited、a:hover、a:active

2、表单伪类：input:checked、input:focus、select:hover、option:selected

3、元素伪类：::first-child、::last-child、::nth-child()、::hover

4、结构伪类：::before、::after

CSS选择器有哪些类型

1、元素选择器：div、p、h1、span

2、类选择器：.class-name

3、ID选择器：#id-name

4、后代选择器：div p

5、子选择器：div > p

6、相邻选择器：div + p

7、通用选择器：*

CSS盒模型包括哪些部分

1、内容框：包含元素的内容，如文本、图像和视频

2、内边距：内容框和边框之间的空间

3、边框：元素的边框

4、外边距：边框和相邻元素之间的空间