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

最新推荐文章于 2024-05-02 14:26:42 发布

EvenyYl丶

最新推荐文章于 2024-05-02 14:26:42 发布

阅读量384

点赞数 1

文章标签： css 面试 vue.js html html5

本文链接：https://blog.csdn.net/qq_40597589/article/details/108431145

版权

前言

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

常考面试题

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%

写在文末

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

其它文章

EvenyYl丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端一面基础知识 ①——CSS面试题

前言    根据慕课网的《快速搞定前端技术一面匹配大厂面试要求》课程所整理的题目，陆续更新常考面试题1.如何理解语义化①让人更容易读懂（增加代码可读性）②让搜索引擎更容易读懂（SEO问题，让搜索排名靠前“钱”）③正确的标签做正确的事情④页面内容结构化2.哪些标签是块级元素？哪些标签是内联（行内）元素？块级（display：block/table）：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、sect
复制链接

扫一扫