1.css 盒子模型
  css包含了内容(content) ,内边距(padding),边框(border),外边距(margin) 等因素。
  css 标准盒子模型宽包括:margin+border+padding+width
  IE盒子模型的宽包括:border+padding+width
 
2.css 选择器优先级
  id 选择器: #main{} class选择器:.main{} 元素选择器:div 子选择器ul>li{} 后代选择器:div p{}
  伪类选择器::hover,::selection,.action,:first-child,:last-child,:first-of-type,:last-of-type,:nth-of-type(n),:nth-of-last-type(n)
  伪元素选择器: after,:before,属性选择器:input[tupe="text"]
  选择器的优先级:!important->style属性写在元素标签上的内联系样式->id选择器->类选择器->伪类选择器->
  属性选择器->通配符选择器(*)->浏览器选择器。
 
3.css 几种定位的的规则
  static定位普通流定位(默认定位)。

  float浮动定位脱离文档流,父元素的高度不能有它撑开。
  relative相对定位,相对元素的左上上角进行定位,位置可能会移动,但是没有脱离文档流。
  absolute绝对定位,相对于父元素中有relative并且离本元素层级最近的元素的左上角进行定位,如果父带元素中没有relative定位就默认相对body进行定位。
  fixed固定定位:相对于浏览器窗口进行定位,无论滚动条滚动到哪里,都会固定到屏幕的指定位置。
  sticky粘性定位:根据用户的滚动位置在相对和固定定位之间切换。
 
4.水平垂直居中的方案
  行内元素水平居中:需要判断父元素是否是块级元素,如果是块级元素需要将父元素设置为text-align:center.
  块级元素水平居中(指定宽度):给当前元素设置为margin:0 auto;或者父元素为相对地位 子元素设置为绝对定位 设置子元素的
  margin-left:为元素宽度的一半或者设置 transform:translateX(-50%)。
  块级元素水平居中(不指定宽度):需要设置子元素为display:inline-block,给父元素元素设置 text-align:center;
  flexbox布局:给父元素设置添加属性 display:flex;justify-content:center;
  grid布局:给父元素设置 display:grid;place-items:center;
 
5.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()
 
6.1px 问题的解决
  设置 viewport 的 scale 值
<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;
}
7.css 常见单位
  px: 物理像素,是相对于显示器分辨率的
  em,rem:em 是相对于父元素的,rem 相对于根元素html
  vw,vh: 和浏览器大小有关的单位,他们的参照对象都是浏览器窗口。
  vw 浏览器窗口宽度的百分比:假设浏览器宽度1000px则 1vw=浏览器宽度的1%=10px
  %:是相对于父元素的,当浏览器的宽度和高改变时,当全元素也会跟着发生变化。
 
8.link 和@import 的区别
  link 引入css 的时候,在页面加入的时候同时加载,@import需要页面完全加载完成后加载。
  link 是xhtml 标签,无兼容性问题,@import 低版本浏览器不支持。
 
9.隐藏元素的方法有哪些
  display:none; visibility:hidden;元素在页面中仍占位置,但是不影响绑定的监听事件。
  opacity:0; 将元素的透明度设置为0,元素在页面中仍占位置,会影响绑定的坚挺事件。
  position:absolute; 通过绝对定位将元素移除可视区域内。z-index:负值、
  transform:scale(0,0) 将元素缩为0来实现元素的隐藏,元素在页面中仍占位置。

  

  
 
 

2025年前端面试准备css篇的更多相关文章

  1. 2019前端面试系列——CSS面试题

    盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...

  2. 前端面试之CSS权重问题!

    前端面试之CSS权重问题! 下面的权重按照从小到大来排列! 1.通用选择器(*) 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内 ...

  3. 前端面试之CSS常用的选择器!

    前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...

  4. 前端深入之css篇丨2020年前,彻底掌握css动画【animation】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  5. 前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  6. 前端深入之css篇丨2020年前,彻底掌握css动画

    马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...

  7. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...

  8. 前端开发之css篇

    一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...

  9. 前端面试(原生js篇) - DOM

    根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...

  10. 前端深入之css篇|link和@import到底有什么区别?

    写在前面 在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式. 而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式 ...

随机推荐

  1. 图文教程:从0到1将项目发布到 Maven 中央仓库

    前言 本文基于官方文档 https://central.sonatype.org/publish/publish-guide/ 编写. 发布步骤: 创建账号 创建用户 Token 创建命名空间 配置 ...

  2. cesium中添加建筑白模

    1.在cesium中添加模型依赖于Cesium ion帐户的资产id,在这里创建账户. 2.上传模型(模型文件类型在Cesium ion中有说明,模型的提取办法可在这里查看)到账户中并平铺为3D Ti ...

  3. Heart Rate Variability - HRV

    一次心跳波形 心率变异性 通常希望HRV 越高越好 HRV 公式: 需要指出的是,心率变异性会有多种计算公式. HRV数值相对越小=当天压力越大/身体越疲劳:HRV数值相对越大=当天压力越小/身体状态 ...

  4. 爬虫案例1-爬取图片的三种方式之一:DrissionPage篇(3)

    @ 目录 前言 DrissionPage介绍 实战 共勉 博客 前言 继requests篇和selenium篇,本文是爬取图片的最后一个案例,利用了python第三方库DrissionPage来自动化 ...

  5. 原生JavaScript实现一个简单的Promise构造函数示例

    下面demo示例,只支持实例的then和catch,代码如下: function PromiseDiffer(fn){ var self = this; this.status = 'pendding ...

  6. Angular 18+ 高级教程 – Getting Started

    前言 这篇主要是教大家如何快速搭建一个 Angular 项目,纯用于学习. Before Starting 开始前,我们需要知道几个小知识. 1. Angular Compilation 游览器支持的 ...

  7. Blazor开发框架Known-V2.0.11

    Known今天发布了V2.0.11版本,本次版本添加了系统WebApi在线测试,系统菜单样式配置,表格支持用户设置栏位显隐和顺序,系统上下文支持静态组件与后端交互,以及对PgSQL进行了详细的测试,修 ...

  8. [OI] throw

    throw 主要是用来抛出异常. throw 可以直接向主程序 throw 一个东西,可以是各种数据类型,显示在界面上就是抛出的数据类型. int main(){ throw 1; } termina ...

  9. Dockerfile相关(推送镜像?私有仓库?)(九)

    上面我们讲到了 Dockerfile 的基本写法以及构建镜像的时候一些注意事项,那么镜像构建完成后,如何把我们的镜像给到别人使用呢?第一种方法就是利用 Docker 官方提供的公共的 Docker H ...

  10. cobalt strike安装教程

    将本地IP和密码填入:./teamserver 192.168.xx.xx 密码 启动成功