css面试题
1、css盒模型
a、标准盒模型---在标准盒模型中，width的宽度指的是content的宽度
b、怪异盒模型---在怪异盒模型中，width的宽度等于content+border+padding
切换盒子模型的话，使用box-sizing。
2、link和import的区别
a、link是html标签，import是css提供的一种方式
b、link在页面加载时同时载入，import是在页面加载完成后载入
c、link可以在文档中任意位置定义，import只能在样式表中定义
d、link可以同时加载多个，import只能一条条执行
e、linke支持动态添加，而import不支持
3、元素垂直居中的方式
a、使用flex布局，align-items: center；
b、使用translate和transform；
c、图片和文字居中可选择使用vertical-align: middle；
d、使用表格布局
e、使用grid布局，align-self: center；
4、文本垂直居中的方式
a、line-height
b、使用grid布局
c、使用flex布局
d、使用绝对定位，top和bottom为0，margin为auto
5、css的优先级顺序
a、!important
b、标签内样式
c、id选择器
d、类选择器、属性选择器和伪类选择器
e、元素选择器和伪元素选择器
6、css的继承属性
a、文本和字体类属性，font-size、color等
b、列表类属性
c、表格布局类属性
d、direction、cursor等属性
7、清除浮动的办法
a、clear:both
b、父元素overflow
c、使用伪元素::after
d、使用flex布局
e、使用grid布局
8、响应式布局有哪些
a、百分比布局
b、flex布局
c、grid布局
d、移动端适配rem、vw、vh等
e、媒体查询@media
9、三栏布局的实现方法
a、flex布局---左右为固定值，中间使用flex-grow自动撑开
b、双飞翼布局---使用浮动和负边距实现的三栏布局，左右使用margin负值撑开中间栏的宽度
<style type="text/css">body {min-width: 550px;}.col {/* 1.设置浮动 */float: left;}#main {width: 100%;height: 200px;background-color: #FFC0CB;}#main-wrap {/* 2.将 main 左右内边距留出 left 和 right 的宽度 */margin: 0 200px 0 150px;}#left {width: 150px;height: 200px;background-color: #FFFF00;/* 3.left 向左偏移 main 的宽度 */margin-left: -100%;}#right {width: 200px;height: 200px;background-color: #cccccc;/* 4.right 向左偏移自身宽度 */margin-left: -200px;}
</style>
<body><div id="main" class="col"><div id="main-wrap">main</div></div><div id="left" class="col">left</div><div id="right" class="col">right</div>
</body>c、圣杯布局---使用浮动和负边距实现的三栏布局，中间栏先放在html结构中，使用负边距将左右栏移动到中间栏的两侧，再使用相对定位将左右栏拉回原来的位置
<style type="text/css">body {min-width: 550px;}#header {background-color: #999999;}#middle{/* 2.把中间部分留出左右元素的宽度 */padding-left: 200px;padding-right: 150px;}#middle .column{float: left;height: 200px;}#left{width: 200px;background-color: #FFFF00;/* 4. 向左移动center的宽度 */margin-left: -100%;/* 5. 再向左移动自身宽度，露出被覆盖的center块 */position: relative;right: 200px;}#center{width: 100%;background-color: pink;}#right{/* 3.margin-right让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */margin-right: -150px;width: 150px;background-color: #CCCCCC;}#footer {background-color: #999999;}.clearfix:after{display: table;content: '';clear: both;}
</style>
<body><div id="header">header</div><div id="middle" class="clearfix"><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body>10、解决css样式再不同浏览器中的兼容问题
使用css reset，避免使用css hack和浏览器前缀，使用标准的组件库，尽量使用标准css属性和属性值等。
11、margin塌陷和合并问题的解决方案
a、使用内边距替代外边距来调整距离
b、添加边框或内边距来阻止margin合并
c、使用BFC
d、使用伪元素，在相邻的兄弟元素中添加一个透明的伪元素，并添加display：inline-block;
e、使用flex或grid布局替代margin布局
12、绘制一条0.5px的线
利用css的伪类元素（::after或::before），再对其进行缩放。
.half-pixel-line {position: relative;display: inline-block;width: 100%;height: 1px;
}.half-pixel-line::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 1px;background-color: black;transform-origin: left top;transform: scaleY(0.5);
}13、视差滚动效果
视差滚动效果（Parallax Scrolling）是一种视觉设计技巧，通过在页面滚动时以不同速度移动前景和背景元素，从而产生深度感和动态效果。视差滚动效果的原理在于，当用户滚动页面时，页面上的不同元素（例如前景、背景、文字等）以不同的速度移动。这些速度差使得靠近观察者的元素（前景）看起来移动得更快，而远离观察者的元素（背景）看起来移动得更慢。这种相对运动产生了一种错觉，使用户感觉到页面的不同部分之间有深度关系，从而增强了视觉体验。
a、css实现：利用 CSS3 的 background-attachment 属性设置为 fixed。这种方法简单易实现，但仅适用于背景图像，并且在某些浏览器或设备上可能存在兼容性问题。
b、js实现：通过监听页面滚动事件，根据滚动位置动态调整元素的位置。这种方法更灵活，可以应用于任何元素，并且可以实现更复杂的视差效果。通常使用 JavaScript 库（如 Rellax.js、Parallax.js 等）来简化开发过程。