css前端面试题（三）

已于 2022-05-06 09:06:20 修改
阅读量267 收藏
点赞数
分类专栏： 前端面试题 文章标签： 前端 css css3
于 2022-03-10 20:13:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61195495/article/details/123400659
版权

目录

一、对BFC规范（块级格式化上下文：block formatting context）的理解？

二、css新增伪类有哪些?

三、 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）

方法一：

 方法二：

方法三：

四、移动端css面试题

4.1居中

利用css库实现

 绝对定位实现

 绝对定位+负边距

 绝对定位+平移

 网格Grid实现

 Flex弹性盒子

表格布局

五、常见浏览器兼容性问题

5.1什么是浏览器兼容

5.2问题及解决方案

双倍浮动的bug

表单元素行高不一致

在IE6中，不能识别较小高度的容器（一般为20px）

a标签里嵌套img时，有些浏览器（例如IE浏览器）下会出现有颜色的边框

在IE6中不能识别min-height属性

图片默认有空隙

IE8及一下浏览器不能识别opacity属性

鼠标指针bug

百分比bug

一、对BFC规范（块级格式化上下文：block formatting context）的理解？

W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

BFC 规定了内部的 Block Box 如何布局。

定位方案：

内部的 Box 会在垂直方向上一个接一个放置。
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
BFC 的区域不会与 float box 重叠。
BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发 BFC

根元素，即 html
float 的值不为none（默认）
overflow 的值不为 visible（默认）
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed

二、css新增伪类有哪些?

  • ：first-of-type选择属于其父元素的首个元素的每个元素
  • ：last-of-type选择属于其父元素的最后元素的每个元素
  • ：only-of-type选择属于其父元素唯一的元素的每个元素
  • ：only-child选择属于其父元素的唯一子元素的每个元素
  • ：nth-child（2）选择属于其父元素的第二个子元素的每个元素
  • ：disabled控制表单控件的禁用状态
  • ：checked单选框或复选框被选中
  • ：before在元素之前添加内容，也可以用来清除浮动
  • ：after在元素之后添加内容

三、 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）

方法一：

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%

<div class="box">
 <p>我是浮动的</p>
 <p>我也是居中的</p>
</div>

<style>
.box{
 float:left;
 position:relative;
 left:50%;
}
p{
 float:left;
 position:relative;
 right:50%;
}
</style>

 方法二：

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面浮动元素的水平居中</title>
    <style type="text/css">
        ul li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .clearfix:after {
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }
        
        .clearfix {
            zoom: 1;
        }
        
        .wrap {
            margin: 20px auto;
            padding: 10px 0;
            background: orange;
            overflow: hidden;
            position: relative;
        }
        
        .inwrap {
            float: left;
            position: relative;
            left: 50%;
        }
        
        .page {
            float: left;
            position: relative;
            left: -50%;
        }
        
        .page li {
            float: left;
            margin: 0 5px;
        }
        
        .page li a {
            display: block;
            padding: 2px 9px;
            background: white;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="wrap clearfix">
        <div class="inwrap">
            <ul class="page">
                <li> <a href="#">上一页</a> </li>
                <li> <a href="#">1</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">5</a> </li>
                <li> <a href="#">6</a> </li>
                <li> <a href="#">下一页</a> </li>
            </ul>
        </div>
    </div>
</body>

</html>

方法三：

可以多套一层的方式设置left:-50%

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面元素的水平居中</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 14px;
        }
        
        .clearfix:after {
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }
        
        .clearfix {
            zoom: 1;
        }
        
        a {
            text-decoration: none;
        }
        
        h1 {
            text-align: center;
            padding: 10px;
            font-size: 20px;
            margin: 30px 0;
        }
        
        .wrap {
            margin: 20px auto;
            padding: 10px 0;
            background: orange;
            overflow: hidden;
            position: relative;
        }
        
        .inwrap {
            float: left;
            position: relative;
            left: 50%;
        }
        
        .page {
            float: left;
            position: relative;
            left: -50%;
        }
        
        .page li {
            float: left;
            margin: 0 5px;
        }
        
        .page li a {
            display: block;
            padding: 2px 9px;
            background: white;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>

<body>
    <h1>页面元素的水平居中</h1>
    <h2>浮动方式：</h2>
    <div class="wrap clearfix">
        <div class="inwrap">
            <ul class="page">
                <li> <a href="#">上一页</a> </li>
                <li> <a href="#">1</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">2</a> </li>
                <li> <a href="#">3</a> </li>
                <li> <a href="#">4</a> </li>
                <li> <a href="#">5</a> </li>
                <li> <a href="#">6</a> </li>
                <li> <a href="#">下一页</a> </li>
            </ul>
        </div>
    </div>
</body>

</html>

四、移动端css面试题

4.1居中

利用css库实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在这里用link标签引入中文布局 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

    <!-- 在这里用link标签引入中文渐变色 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示 */
        
        html,
        body {
            height: 100%;
        }
        
        body {
            /* 先在父元素上设置grid布局 */
            display: grid;
            grid: var(--居中);
            /* 给个好看的渐变色 */
            background: var(--霾灰);
        }
        
        .center {
            /* 指定子元素在中心位置 */
            grid-area: 中;
            /* 给子元素设置宽高，不然宽高为0导致什么也看不见 */
            width: 150px;
            height: 150px;
            /* 给一个好看的背景色 */
            background: var(--胭脂粉);
        }
    </style>
</head>

<body>
    <div class="center"></div>
</body>

</html>

 绝对定位实现

  • 如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，意为紧贴着父元素的边。
  • 给了固定宽高，但没写 margin 的话盒子会固定在左上角，因为 top 和 left 的优先级更高。
  • 给了 margin: auto; 的话，浏览器会自动填充边距，令其居中。
  • 此种实现方式优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典属性。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示, 并有一个灰色背景 */
        
        html,
        body {
            height: 100%;
            background: gray;
        }
        /* 先在父元素上设置相对定位 */
        
        body {
            position: relative
        }
        
        .center {
            /* 绝对定位 */
            position: absolute;
            /* 上下左右全部为0 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /* 给定宽高 */
            width: 70%;
            height: 25%;
            /* 令外边距自动填充 */
            margin: auto;
            /* 白色背景 */
            background: white;
        }
    </style>
</head>

<body>
    <div class="center"></div>
</body>

</html>

 绝对定位+负边距

注意，"绝对定位+负边距"这种方法不适合那种宽百分之多少、高百分之多少这种相对单位，取而代之的是具体的数值。

因为边距的百分比和宽高的百分比相对的不是同一参考物，它是相对于父元素的宽来计算的，这点要注意。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示, 并有一个灰色背景 */
        
        html,
        body {
            height: 100%;
            background: gray;
        }
        /* 先在父元素上设置相对定位 */
        
        body {
            position: relative
        }
        
        .center {
            /* 绝对定位 */
            position: absolute;
            /* 上方和左方为50% */
            top: 50%;
            left: 50%;
            /* 给定宽高 */
            width: 300px;
            height: 200px;
            /* 上外边距为负的给定高度的一半 */
            margin-top: -100px;
            /* 左外边距为负的给定宽度的一半 */
            margin-left: -150px;
            /* 白色背景 */
            background: white;
        }
    </style>
</head>

<body>
    <div class="center"></div>
</body>

</html>

 绝对定位+平移

  • margin 的百分比是相对于父元素的宽；
  • 而 translate 函数的百分比是相对于自身；
  • 不仅适用于未知宽高，也同样适用于固定宽高的居中布局。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示, 并有一个灰色背景 */
        
        html,
        body {
            height: 100%;
            background: gray;
        }
        /* 先在父元素上设置相对定位 */
        
        body {
            position: relative
        }
        
        .center {
            /* 绝对定位 */
            position: absolute;
            /* 上方和左方为50% */
            top: 50%;
            left: 50%;
            /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
            padding: 10px;
            /* 这个50%是相对于自身宽高而言的 */
            transform: translate(-50%, -50%);
            /* 白色背景 */
            background: white;
        }
    </style>
</head>

<body>
    <div class="center">
        用内容撑开盒子
    </div>
</body>

</html>

 网格Grid实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示, 并有一个灰色背景 */
        
        html,
        body {
            height: 100%;
            background: gray;
        }
        /* 中央盒子的直接父元素 */
        
        body {
            /* 令其变成网格布局 */
            display: grid;
            /* 令其子元素居中 */
            place-items: center;
        }
        
        .center {
            /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
            padding: 10px;
            /* 白色背景 */
            background: white;
        }
    </style>
</head>

<body>
    <div class="center">用内容撑开盒子</div>
</body>

</html>

 Flex弹性盒子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 令html和body全屏显示, 并有一个灰色背景 */
        
        html,
        body {
            height: 100%;
            background: gray;
        }
        /* 找到中央盒子的直接父元素 */
        
        body {
            /* 令其变成弹性布局 */
            display: flex;
        }
        
        .center {
            /* 自动外边距 */
            margin: auto;
            /* 白色背景 */
            background: white;
            /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="center">用内容撑开盒子</div>
</body>

</html>

表格布局

此布局的关键点在于：

  • 父元素上 3 个样式设置：

  1. display: table-cell;
  2. text-align: center;
  3. vertical-align: center;

  • 子元素上设置：

  1. display: inline-block;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            /* 令body全屏显示 */
            width: 100vw;
            height: 100vh;
            /* 显示为表格的格子 */
            display: table-cell;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            vertical-align: middle;
            /* 灰色背景 */
            background: gray;
        }
        
        .center {
            /* 显示为行内块元素 */
            display: inline-block;
            /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
            padding: 10px;
            /* 白色背景 */
            background: white;
        }
    </style>
</head>

<body>
    <div class="center">用内容撑开盒子</div>
</body>

</html>

五、常见浏览器兼容性问题

5.1什么是浏览器兼容

不同的浏览器对同一段代码解析不同造成浏览器显示效果不同，我们把这样的问题叫做浏览器兼容性问题

5.2问题及解决方案

双倍浮动的bug

块元素float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是二倍关系

解决方案：给float的块元素添加display：inline

表单元素行高不一致

解决方案：

  • 给表单元素添加一致的vertical-align属性值
  • 给表单元素添加一致的float属性值

在IE6中，不能识别较小高度的容器（一般为20px）

解决方案：元素{height:1px;overflow:hidden;}

a标签里嵌套img时，有些浏览器（例如IE浏览器）下会出现有颜色的边框

解决方案：img{border:0}或img{border:none}

在IE6中不能识别min-height属性

解决方案：min-height:100px;_height:100px;

图片默认有空隙

解决方案：

  • img{display:block;}
  • img{float:left;}
  • img{vertical-align:bottom;}

IE8及一下浏览器不能识别opacity属性

解决方案：

元素{

        opacity:0.5;

        filter:alpha(opacity=50);

}

鼠标指针bug

cursor:hand；只有IE8及以下浏览器识别，其它浏览器不识别

解决方案：设置为cursor:pointer;所有浏览器都识别，将鼠标指针设置为手的形状

百分比bug

在IE6下，子元素百分之五十加百分之五十大于父元素设置的百分之百

解决方案：给右边左浮动的元素添加clear:right；

ʚ浅初.ɞ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 5582
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
html左右自动居中显示,css如何让浮动元素水平居中
weixin_39976960的博客
05-30 475
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。方法一：1、HTML 部分：我是浮动的我也是居中的2、CSS 部分：.box{float:left;position:relative;left:50%;}p{float:l...
2022前端面试题CSS(三)
qq_41629684的博客
05-28 496
一、用CSS这是div快速居中对齐 两行代码解决 body设置display:flex div设置:margin:auto. 二、padding和margin有什么不同? 他们是盒型模型中的内边距和外边距，padding是施加给自身的，margin是施加给外部的。 三、vm和百分比的区别? vm不管父元素的大小，百分比是根据父元素的大小计算的。百分比有继承关系，vm只和设备的宽度有关系。 四、行内和块级元素的区别? 行内元素的大小由内容决定，设置宽高没有用。块级元素宽度有继承关系。 五、
前端面试题（三）--CSS
qinqinzqq的博客
02-13 461
渐进式渲染，英文名称progressive rendering，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。但是这并不是某一项技术的特指，而是一系列技术的集合。例如：骨架屏、图片懒加载、图片占位符、资源拆分。CSS渲染性能的优化来自方方面面，这里列举一些常见的方式：1）使用id选择器非常高效，因为id是唯一的；2）避免深层次的选择器嵌套；3）尽量避免使用属性选择器，因为匹配速度慢；4）使用渐进增强的方案；5）遵守CSSLint规则；
BFC布局规则
JJY的博客
10-03 245
BFC布局规则如下： 内部的Box会在垂直方向上一个接一个的放置。 内部的Box垂直方向上的距离由margin决定，要注意的是BFC内的块级元素依然会有外边距折叠，但可以在元素外用BFC来包裹，解决相邻元素间外边距折叠问题。 BFC的区域不会与float的元素区域重叠。 计算BFC的高度时，浮动子元素也参与计算。意味着可以利用BFC解决浮动带来的高度塌陷的文通。 BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。意味着可以用给父元素设置BFC，解决margin-top塌陷的问题。 ..
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
H5前端面试题，内含答案
最新发布
04-15
H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5前端面试题，内含答案H5...
前端面试题
01-20
有关于CSS的面试题和练习 ，集合了多种前端面试题 可共学习 参考 祝你面试通过！
前端面试题汇总.rar
03-09
前端面试题：HTML、CSS、JS基础、Jquery、HTML5 CSS3、移动web开发、Ajax、JS高级、流行框架、移动app开发、NodeJs、前端概括性问题。
300道HTML、CSS习题及面试题（含答案）
09-18
最全面的300道HTML、CSS习题及面试题（含答案），希望对你用帮助
HTML（三）关于CSS-BFC深入理解
qq_38763173的博客
02-07 261
BFC是什么鬼？ BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 先稳住别懵逼，接着往下走。 关于BFC的定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与（在下面有解释）， 它规定了内部的Block-level Box如何布局，并且与...
CSS定位之BFC背后的神奇原理
办公研究所
07-24 147
BFC已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 什么是BFC 在解释 BFC 是什么之前，需要先介绍 Box Formatting Context的概念。BFC这个东西说常见的话你可能不觉得，但是你肯定会常用，也许你在用的时候也没想到BFC这东西。 css布局的基本单位 Box 是css布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 ...
display的值和作用
CM22222的博客
04-09 3917
1、display的值有： none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-fle
CSS Grid布局这样玩
程序猿开发日志【学习永无止境】
04-25 1万+
自从去年年半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。 就我个人而言，我也一直在不断的关注这个布局利器的相
HTML5 + CSS3面试题整理
热门推荐
计算机源码之家的博客
09-29 1万+
...
CSS中position属性面试题目超详细讲解
LinZHiMo的博客
05-12 426
写在前面 CSDN话题挑战赛第1期 活动详情地址：CSDN 参赛话题：前端面试宝典 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！ 总之我们大家一起将自己的面试经验以及.
CSS面试题
杨前露的博客
06-03 1400
1.有哪些方式（CSS）可以隐藏页面元素？ 1.opacity:0 本质是将元素的透明度降为0，看起来是隐藏了，但是依然占据空间 2.visibility:hidden 占据空间 3.display:none 彻底隐藏元素，元素从文档流中消失，不占据空间 4.z-index:-9999 原理是将层级放到底部，看起来是隐藏了 5.overflow：hidden 这个只是隐藏元素溢出的部分 6.transform：scale（0，0） 将元素缩放为0，但是依然占据空间 2.em\px\rem区别？ Px：绝对
前端面试题-CSS
weixin_42547360的博客
02-20 596
CSS面试题
2022前端html css js面试题
03-16
很抱歉，我是一名语言模型AI，无法提供具体的2022前端html css js面试题。但是，我可以告诉你一些常见的前端面试题类型，以供参考： 1. HTML基础知识：标签、属性、语义化、表单等 2. CSS基础知识：选择器、盒模型、布局、响应式设计等 3. JavaScript基础知识：数据类型、作用域、闭包、原型链、异步编程等 4. 框架和库：React、Vue、Angular等 5. 工具和技术：Webpack、Babel、ESLint、TypeScript等 6. 性能优化：页面加载速度、渲染性能、代码优化等 7. 浏览器和网络：HTTP协议、跨域、缓存、安全等 希望这些信息能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值