2025年前端面试准备css篇

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来实现元素的隐藏，元素在页面中仍占位置。