程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

本文主要是介绍程序员学了一年去面试,却失败在一道css题上,基础不容忽视!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

早两天群里有个伙伴,学了一年多的前端,也做过一些小项目,去面试的时候谈的还蛮不错的。但是后来他告诉我,面试失败了,就因为一道css题目

关注后私信“IT先锋”头条号,回复“学习”自助领取全套系统学习资料!

请详细解释在css中单位长是px、em、rem,三者之间的区别

虽然他能写特效,但是对于一些基础性的东西,认知学习的不多,所以这道题没写出来,被技术总监判定为基础不扎实,成长空间不大,直接淘汰了!

在这里我们详细来解释下css中rem与em的区别,希望群里以后的伙伴可以多注意基础问题,很多你忽视的东西,往往其实会成为你致命的缺陷!

如果有想从事前端这行不知道怎么学习的,或者对于前端学习效率很慢的可以来我的群570946165,群文件里有全套系统学习资料,也问题可以随时问!

在css中单位长度用的最多的是px、em、rem,这三个的区别是:

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

rem中的r意思是root(根源),这也就不难理解了。

em

  • 子元素字体大小的em是相对于父元素字体大小

  • 元素的width/height/padding/margin用em的话是相对于该元素的font-size

程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

结果如下:

程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

巩固测验:你能说出孙元素span的font-size和width吗?

答案:我猜你会说10px、100px,哈哈,其实逻辑上是正确的,但是如果你是chrome浏览器我不得不告诉你应该是12px、120px。因为chrome设置的最小

字体大小为12px,意思就是说低于12px的字体大小会被默认为12px,当然这一尬境可以由css3解决,这里就不多说了。

chrome默认的字体大小是12px,也就是1em默认为12px,如果最外层的父元素直接把font-size设为1.5em,那么该元素的字体大小为18px(12*1.5)。

rem

rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。

上代码:(html代码如上,只是把css代码的元素长度单位变了)

程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

程序员学了一年去面试,却失败在一道css题上,基础不容忽视!

所以你可以说出span的font-size具体值吗?

当用rem做响应式时,直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变,很方便。

看到这里我想我们都更深刻的体会了em和rem的区别(参照物不同)。

总结

在做项目的时候用什么单位长度取决于你的需求,我一般是这样的:

像素(px):用于元素的边框或定位。

em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。

这篇关于程序员学了一年去面试,却失败在一道css题上,基础不容忽视!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/301476

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

数据库面试必备之MySQL中的乐观锁与悲观锁

《数据库面试必备之MySQL中的乐观锁与悲观锁》:本文主要介绍数据库面试必备之MySQL中乐观锁与悲观锁的相关资料,乐观锁适用于读多写少的场景,通过版本号检查避免冲突,而悲观锁适用于写多读少且对数... 目录一、引言二、乐观锁(一)原理(二)应用场景(三)示例代码三、悲观锁(一)原理(二)应用场景(三)示例

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript