秋招面试—CSS篇

news2024/9/23 7:29:55

2021 CSS面试题

1.CSS可继承属性有哪些？

文字相关：font-famliy 、font-weight 、font-size 、font-style
文本相关：text-indent（首行缩进）、text-align（水平对齐）、line-height 、text-transfrom（文本大小写）、word-sacping (字符间距)、letter-spacing 、color
元素可见性：visibility
列表布局：list-style
光标：cursor

2.display的属性值有哪些？

none：元素不显示

block：块级元素

inline：行内元素

inline-block：行内块元素

table：表格

list-item：块类型元素

inherit：从父级继承display属性

🌰对list-item了解吗？

3.display 的block、inline、inline-block有什么区别？

block：块级元素，独占一行，多个元素另起一行。

inline：行内元素，宽高，水平方向的margin、padding都无效。

inline-block：对象设置为inline对象，对象内容作为为block呈现。

4.隐藏元素的方法有哪些？

display:none

visibility:hidden

opacity:0

position:absolute

clip-path:

transform:scale(0,0)

z-index:负值

5.link和import的区别？

<1>.link 是XHTML标签，不仅能加载CSS，还能加载RSS；而import只能加载CSS.

<2>.引入CSS，页面载入时同时加载；import需要等待页面载入之后才加载。

<3>.link 可以通过JS控制DOM来改变样式，而import不行。

🌰什么是RSS? 怎么实现通过JS控制DOM来改变样式？

6.display:none 和 visibility:hidden 的区别

display:none 隐藏的元素会从渲染树上完全消失，不会占用任何空间，它的子元素也会跟着一起消失；

visibility:hidden 隐藏的元素不会从渲染树上完全消失，会占用一定的空间，如果想让子元素显示，可以给子元素设置visible

7.对盒模型的理解？

普通标准盒模型一般由四部分组成，content、padding、border、margin

标准盒模型：宽高的范围只包含了 content;

IE盒模型：宽高的范围为content、padding、border；

可以通过修改 box-sizing: content-box/border-box改变盒模型。

8.CSS3中的新特性

圆角边框：border-radio

文字特效：text-shadow

文字渲染：text-decoration

阴影与反射：shadoweflect

多列布局：mult-column layout

线性渐变：gradient

旋转：transform

9.伪元素（::）和伪类（:）有什么区别？

伪元素（::）：以双冒号形式存在，在元素前后插入新的元素或样式，只存在于页面中，不存在于DOM 中;

伪类（:）：将特定的样式添加到特定的元素上。

🌰有哪些特定的样式可以使用伪类添加？

10.对BFC的理解

BFC是为了解决以下几个问题：

<1>.margin重叠

<2>.高度塌陷

<3>.创建自适应两栏布局

如果要实现两栏布局，左边设置float:left，右边overflow:hidden，这样右边就不会触发BFC，BFC区域不会与浮动元素发生重叠。

11.什么是margin重叠

垂直方向两个块级元素，上面元素的margin-bottom(下外边距)和下面元素的margin-top(上外边距)可能会合并为一个margin(外边框)，大小取决于外边距最大的那个，这就照成了margin重叠。

12.元素的层叠顺序

背景/边框 —> z-index:负值 —> 块级盒子 —> 浮动盒子 —> 行内盒子 —> z-index:0 —> z-index:正值

13.水平垂直居中的实现

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

calc动态计算 : 与上方距离[50%上层外框高度 - 50%当前div高度]

.div0{
    width:200px;
    height:150px;
    border:1px solid #000;
}
.redbox{
    position:relative;
    width:30px;
    height:30px;
    background:#c00;
    float:left;
    top:calc(50% - 15px);
    margin-left:calc(50% - 45px);
}
.greenbox{
    position:relative;
    width:30px;
    height:80px;
    background:#0c0;
    float:left;
    top:calc(50% - 40px);
}
.bluebox{
    position:relative;
    width:30px;
    height:40px;
    background:#00f;
    float:left;
    top:calc(50% - 20px);
}

设置行高（line-align）: 只适用于单行的行内元素，CSS范例：外层div0，内容redbox，让redbox水平垂直置中。

.div0{
    width:200px;
    height:150px;
    border:1px solid #000;
    line-height:150px;
    text-align:center;
}
.redbox{
    display:inline-block;
    width:30px;
    height:30px;
    background:#c00;
}

添加伪元素（::before、::after）：结合vertical-align:middle 垂直居中，

参考：https://segmentfault.com/a/1190000020089104

14.两栏布局的实现

flex弹性盒方案

左边固定固定宽度，右边设置flex:1，flex-grow(放大比例)、flex-shrink(缩小比例)、flex-basis(分配剩余空间之前，占据的主轴方向)
float+magin-left方案

父级元素设置overflow:hidden , 左边元素左浮动，右边设置margin-left:200px给左边留出空间
float + BFC方案

左边元素左浮动，固定宽度；右边元素色值overflow:hidden; 此时会触发BFC,BC区域的内容不会与浮动元素发生重叠。
双float方案

左边左浮动，右边右浮动；一般不推荐