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() |
<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来实现元素的隐藏，元素在页面中仍占位置。
标签：定位,scale,面试,元素,2025,width,选择器,css From： https://www.cnblogs.com/nmxs/p/18549614