阅读 995

前端一面基础知识 ①——CSS面试题

前言

    根据慕课网的《快速搞定前端技术一面 匹配大厂面试要求》课程所整理的题目，陆续更新

常考面试题

1.如何理解语义化

  • ①让人更容易读懂（增加代码可读性）
  • ②让搜索引擎更容易读懂（SEO问题，让搜索排名靠前“钱”）
  • ③正确的标签做正确的事情
  • ④页面内容结构化

2.哪些标签是块级元素？哪些标签是内联（行内）元素？

  • 块级（display：block/table）：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table等
  • 内联（display：inline/inline-block）：span、img、button、input、b、q、i、a、em、label等

3.盒子模型的宽度（offsetWidth）如何计算？

#div1{
 width: 100px
    padding: 10px
    border: 1px solid #ccc
    margin: 10px
  }
复制代码

    首先要知道offsetWidth的概念是什么？

    其实 offsetWidth = （ 内容宽度 + 内边距 + 边框 ）如下图     所以这道题的答案也就是100px + 20px + 2px = 122px

    那如果要让这里的offsetWidth = 100px要怎么做呢？

    我们可以设置box-sizing ： border-box，这样设置之后，offsetWidth就会变成100px了，这里之后的内容宽度就会被减小，而内边距和边框的宽度是不变的，也就是此时的offsetWidth = 78px + 20px + 2px

4.CSS3新增了哪些属性？

    只罗列部分常见、常用的属性

  • 动画属性
    • @keyframes
    • animation
  • 边框属性
    • border-image
    • border-radius
    • box-shadow
  • 颜色属性
    • opacity
  • 「弹性盒子模型（Flexible Box）」
    • flex
    • align-content
    • align-items
    • align-self
    • justify-content
    • order
  • 网格（Grid） 属性
    • grid-columns
    • grid-rows
  • 超链接(Hyperlink) 属性
    • target
  • 2D/3D 转换属性
    • transform
    • translate，可以控制元素的水平或垂直移动
    • scale，可以控制元素的放大缩小，以1为界限界定放大还是缩小
    • rotate，可以控制元素的旋转，按角度旋转
    • 设置translate3d，可以控制Z轴
    • skew，对元素进行倾斜
  • 过渡（Transition） 属性
    • transition

5.margin上下左右分别设置负值，有何效果？

  • top、left：设置负值，该元素会向上向左移动
  • right：设置负值，右侧元素左移，自身不动
  • bottom：设置负值，下方元素上移，自身不受影响

6.BFC理解和应用

是什么？

  • Block format content，块级格式化上下文
  • 是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

应用

  • 清除浮动
  • 作用：解决父元素高度塌陷问题；解决外边距重叠问题；清除内部元素浮动

BFC如何产生？

    1. 根元素
    1. float属性【不为】none;
    1. display属性【为】:line-block,table-cell,line-flex,flex
    1. position属性【不为】:static,relative;
    1. overflow属性【不为】:visible;

7.float布局问题，手写clearfix

圣杯布局、双飞翼布局

  • 需求：三栏布局，左中右，中间一栏最先加载和渲染，两侧内容固定，中间内容随着宽度自适应，一般用于pc网页
  • 大体关键步骤：
    • ①使用float布局
    • ②两侧使用margin负值，以便和中间内容横向重叠
    • ③防止中间内容被两侧覆盖，一个用padding、一个用margin

详情建议参考文章 css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

手写clearfix

clearfix:after{
 content: ' '
    display: table
    clear: both
}
复制代码

8.flex画色子

    主要考察对flex的应用，直接上代码了

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
            /* 两端对齐 */
        }

        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }

        .item:nth-child(2) {
            align-self: center;
            /* 上下左右居中对齐 */
        }

        .item:nth-child(3) {
            align-self: flex-end;
            /* 尾对齐 */
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

复制代码

9.absolute和relative分别依据什么定位？

  • absolute：相对于父级定位设置为relative的元素偏移，会一层层往上寻找，直至找到根元素，相当于浏览器页面定位。它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离
  • relative：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离

10.居中对齐有哪些实现方式？

水平居中：

  • inline元素：text-align：center
  • block元素：margin：0 auto
  • 直接absolute：（ left：50% + margin-left：负值）
  • translateX
  • flex：（ display: flex;     justify-content: center;）

垂直居中：

  • inline元素：height = line-height
  • absolute：（ top：50% + margin-top：负值 ）
  • translateY
  • flex：（display: flex;     flex-direction: column;     justify-content: center;）

11.line-height的继承问题

  • ①具体数值、直接继承
  • ②比例，继承该比例
  • ③百分比，如200%，先计算出来，再继承该值

12.rem是什么？响应式的常见方案有哪些？

    rem：相对于根元素，是相对长度单位，常用于响应式布局

    响应式的常见方案有哪些？

  • 媒体查询
  • flex 布局
  • grid 布局（兼容性较差）
  • 百分比布局

13.网页视图尺寸是什么？

  • vh、vw，网页视口高度、宽度的1%

写在文末

    如果你觉得我写得还不错的话，可以给我点个赞哦^^，如果哪里写错了、写得不好的地方，也请大家评论指出，以供我纠正。

其它文章

本文使用 mdnice 排版