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