一些常见的css面试题汇总,后续不断更新。。。

174 阅读6分钟

§ 1.CSS的px,%,em,rem,vh,vw的区别:

在开发移动端的时候,需要适配各种机型,不同的机型的分辨率都是不一样的,我们需要一套代码,去适配不同的机型大小

在index.html文件里的head新增meta标签,width=device-width:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不设置width=device-width,移动设备会按照默认视口的宽度去渲染,比如手机是375的屏幕,默认视口可能是800,1000,这样会出现横向滚动条,这样就有问题,所以我们需要设置一下,也就是把我们网页的宽度和设备的宽度是一样的,这样就不会出现横向滚动条以及内容被截断的情况

1.px:

px是固定的单位长度,一旦设置了就无法随页面的大小而适应改变

2.em:

em是相对长度定位,比px更具有灵活性,em的长度是相对于父元素计算的,需要注意的是,em存在继承效果:

1.如果使用em存在继承效果,每个元素都自动继承其父元素的字体大小

2.只要父级元素及上面一直有fontsize为em单位,则会一直继承

3.rem:

rem是css3新引进的一种度量单位,r = root,rem相对于根元素,也就是html的字体大小,比如给html设置一个标准值,比如是font-size为62.5%,那么1rem等于16px,12像素的大小就是12除以16等于0.75rem,14像素的大小就是14除以16等于0.875rem

4.vh / vw:

是指viewport,vh / vw是相对于视口的宽高进行控制的,比如屏幕375px,1wh就是3.75px,这样换算就非常简单

5.%百分比:

百分比是相对于父元素的

补充:

谷歌浏览器默认字体大小是16px,谷歌浏览器字体大小最小为12px,如果想要设置小于12px的字体,可以通过CSS3的transform的scale(),缩放方法来解决

§ 2.说一下CSS权重优先级

!important(无穷大) > 内联样式(1000) > id选择器(100) > 类选择器(属性选择器,伪类选择器)(10) > 标签选择器(伪元素选择器)(1) > 通配符选择器(0) > 继承(0)

§ 3.说一下CSS伪类,伪元素都有哪些

参考:www.w3school.com.cn/css/css_pse…

伪类选择器:

1.动态伪类

:link => 链接没有被访问前的样式效果

:visited => 链接被访问后的样式效果

:hover => 鼠标悬停在元素上面时的样式效果

:active => 点击元素时的样式效果

:focus => 用于元素成为焦点时的样式效果,一般用于表单元素

2.结构伪类

:first-child => 选择某个元素下的第一个子元素

:last-child => 选择某个元素下的最后一个子元素

:nth-child => 选择某个元素下的一个或多个特定的子元素

:nth-last-child => 选择某个元素的一个或多个特定的子元素,从后往前数

:nth-of-type => 选择指定的元素

:nth-last-of-type => 选择指定的元素,从后往前数

:first-of-type => 选择一个父级元素下的第一个同类型子元素

:last-of-type => 选择一个父级元素下的第一个同类型子元素,从后往前数

:only-child => 选择的元素是其父元素的唯一 一个子元素

:only-of-type => 选择一个元素是上级元素下唯一相同类型的子元素

:empty => 选择的元素里没有任何内容(空标签)

3.否定伪类

:not => 排查或者过滤特定元素

4.状态伪类

:enabled => 选择匹配指定范围内所有可用的UI元素

:disabled => 选择匹配指定范围内所有不可用的UI元素

:checked => 选择匹配指定范围内所有可用的UI元素

5.目标伪类

:target => 选择匹配父元素的所有元素,并且匹配元素被相关URL指向

伪元素选择器:

:after => 在标签里的元素之后插入内容

:before => 在标签里的元素之前插入内容

:first-letter => 选择每个标签里的元素的首字母

:first-line => 选择每个标签里的元素首行

:selection => 选择用户选择的元素部分

§ 4.css布局模型,flex布局有哪些属性?

image.png

§ 5.css属性,visibility,display,opacity有什么区别?

visibility:设置为hidden时,元素不可见,但是占位,元素在页面结构中不消失,默认值为visible可见

display:设置为none时,元素不可见,不占位,元素在页面结构中不展示

opacity:通过透明度,来实现元素不可见,为0时则不可见,占位,元素在页面结构中不消失

§ 6.如何用css实现div水平垂直居中,常见一共都有哪几种方法?

1.绝对定位:

父div为position: relative,子div为position: absolute,上右下左各为0,margin为auto

2.子元素相对父元素绝对定位

父div为position: relative,子div为position: absolute,left和right各50%,transform: translate(-50%,-50%),平移各50%

3.利用绝对定位,calc函数动态计算实现水平垂直居中,缺点是需要知道父元素的宽高,不推荐使用

父div为position: relative,子div为position: absolute,left用calc函数,父div的宽度减去子div的宽度除以2,top用calc函数,父div的高度减去子div的高度除以2

4.flex布局:

父div设置为display:flex,align-items: center,justify-content: center,子div正常宽高

5.grid布局:

父div设置为display:flex,grid-template-columns: 50px,grid-template-rows: 50px,place-content: center center,子div正常宽高

§ 7.用grid布局实现一个九宫格

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<style>
* {margin:0;padding:0;}
.box {
    height:300px;
    width:300px;
    background-color: #ccc;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 10px;
    padding:10px;
    box-sizing: border-box;
}
.item {
    background-color: #f00;
}
</style>

§ 8.CSS的flex简写以及所代表的意思

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器会根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

/* 默认值 */

flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */

/* 不放大、不缩小,但占据固定宽度 */

flex: 0 0 100px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 100px */

/* 简写为 none */

flex: none; /* 等同于 flex: 0 0 auto */

/* 简写为 auto */

flex: auto; /* 等同于 flex: 1 1 auto */

§ 9.CSS如何实现模拟省略号

单行省略号:

.box {
  width: 200px; /* 定义宽度 */
  white-space: nowrap; /* 保持文本在一行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

多行省略号:

.box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  overflow: hidden;
  width: 200px; /* 定义宽度 */
}