2025年前端面试准备css篇
分类
|
函数
|
属性函数
|
attr()
|
背景图片函数
|
linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element();
|
颜色函数
|
rgb()、rgba()、hsl()、hsla()、hwb()、color-mod();
|
图形函数
|
circle()、ellipse()、inset()、polygon()、path()
|
滤镜函数
|
blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia();
|
转换函数
|
matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d();
|
数学函数
|
calc()、min()、max()、mixmax()、repeat()
|
缓动函数
|
cubic-bezier()、steps();
|
其他函数
|
counter()、counters()、toggle()、var()、 symbols()
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
let viewport = document.querySelector("meta[name=viewport]");
//根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute("content", "width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,
user-scalable=no" );
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute("content", "width=device-width,initial-scale=0.5, maximum-scale=0.5,
minimum-scale=0.5, user-scalable=no" );
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute("content", "width=device-width,initial-scale=0.3333333333333333,
maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no" );
}
var docEl = document.documentElement;
var fontsize = 32 * (docEl.clientWidth / 750) + "px";
docEl.style.fontSize = fontsize;
利用伪元素
// 1条border
div {
position: relative;
&::after {
position: absolute;
content: "";
background-color: red;
top: 0;
left: 0;
width: 100%;
height: 1px;
transform: scale(1, 0.5);
}
}
直接写0.5px
div {
border-top: 0.5px solid red;
}
2025年前端面试准备css篇的更多相关文章
- 2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...
- 前端面试之CSS权重问题!
前端面试之CSS权重问题! 下面的权重按照从小到大来排列! 1.通用选择器(*) 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内 ...
- 前端面试之CSS常用的选择器!
前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...
- 前端深入之css篇丨2020年前,彻底掌握css动画【animation】
写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
- 前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
- 前端深入之css篇丨2020年前,彻底掌握css动画
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端面试(原生js篇) - DOM
根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...
- 前端深入之css篇|link和@import到底有什么区别?
写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...
随机推荐
- 图文教程:从0到1将项目发布到 Maven 中央仓库
前言 本文基于官方文档 https://central.sonatype.org/publish/publish-guide/ 编写. 发布步骤: 创建账号 创建用户 Token 创建命名空间 配置 ...
- cesium中添加建筑白模
1.在cesium中添加模型依赖于Cesium ion帐户的资产id,在这里创建账户. 2.上传模型(模型文件类型在Cesium ion中有说明,模型的提取办法可在这里查看)到账户中并平铺为3D Ti ...
- Heart Rate Variability - HRV
一次心跳波形 心率变异性 通常希望HRV 越高越好 HRV 公式: 需要指出的是,心率变异性会有多种计算公式. HRV数值相对越小=当天压力越大/身体越疲劳:HRV数值相对越大=当天压力越小/身体状态 ...
- 爬虫案例1-爬取图片的三种方式之一:DrissionPage篇(3)
@ 目录 前言 DrissionPage介绍 实战 共勉 博客 前言 继requests篇和selenium篇,本文是爬取图片的最后一个案例,利用了python第三方库DrissionPage来自动化 ...
- 原生JavaScript实现一个简单的Promise构造函数示例
下面demo示例,只支持实例的then和catch,代码如下: function PromiseDiffer(fn){ var self = this; this.status = 'pendding ...
- Angular 18+ 高级教程 – Getting Started
前言 这篇主要是教大家如何快速搭建一个 Angular 项目,纯用于学习. Before Starting 开始前,我们需要知道几个小知识. 1. Angular Compilation 游览器支持的 ...
- Blazor开发框架Known-V2.0.11
Known今天发布了V2.0.11版本,本次版本添加了系统WebApi在线测试,系统菜单样式配置,表格支持用户设置栏位显隐和顺序,系统上下文支持静态组件与后端交互,以及对PgSQL进行了详细的测试,修 ...
- [OI] throw
throw 主要是用来抛出异常. throw 可以直接向主程序 throw 一个东西,可以是各种数据类型,显示在界面上就是抛出的数据类型. int main(){ throw 1; } termina ...
- Dockerfile相关(推送镜像?私有仓库?)(九)
上面我们讲到了 Dockerfile 的基本写法以及构建镜像的时候一些注意事项,那么镜像构建完成后,如何把我们的镜像给到别人使用呢?第一种方法就是利用 Docker 官方提供的公共的 Docker H ...
- cobalt strike安装教程
将本地IP和密码填入:./teamserver 192.168.xx.xx 密码 启动成功