2024前端面试题-css篇

1.p和div区别

p自带有一定margin-top和margin-bottom属性值，而div两个属性值为0，也便是两个p之间有不一定间距，而div没有。

2.对css盒模型的理解

标准盒模型：content不包括padding、border、margin
ie盒模型：content包括padding、border、margin
在不设置的情况下，默认为W3C盒模型（标准盒模型）。
标准盒模型：box-sizing: content-box;
IE模型：box-sizing: border-box;

3.清除浮动有哪些方式

1.clear:both;
2.父元素添加overflow:hidden;
3.使用伪元素清除浮动；

4.重绘和回流的区别

重绘：只改变样式，大小、宽高、位置不变
回流：元素的大小或者位置发生改变
回流一定会触发重绘，而重绘不一定会回流

5.渐进增强和优雅降级

渐进增强：一开始对低版本浏览器进行构建页面，再针对高级浏览器提升展示效果
优雅降级：一开始就构建完整功能，然后针对低版本浏览器进行兼容

6.BFC

BFC是属于普通流的
特性：1.每一个BFC区域只包含其子元素，不包含其子元素的子元素。2.每一个BFC区域相互独立，互不影响。
作用：避免外边距重叠
案例：https://blog.csdn.net/weixin_57677300/article/details/129046793
触发BFC:
‌1.使用overflow属性‌：将元素的overflow属性设置为auto、hidden、scroll或overlay可以触发BFC。这是最常见的触发BFC的方式。‌
‌2.使用float属性‌：将元素的float属性设置为left或right也可以触发BFC，但这种方法通常不是解决margin塌陷的最佳选择，因为它可能导致其他布局问题。
‌3.使用display属性‌：将元素的display属性设置为inline-block、table-cell、table-caption、flex或grid等也可以触发BFC。
‌4.使用position属性‌：将元素的position属性设置为absolute或fixed也可以触发BFC。

7.如何画一条0.5px的线

CSS transform 缩放法：
创造一个1px的线条然后通过CSS的transform: scale(0.5)将其宽度缩小一半。

.half-pixel-line {
  height: 1px; /* 或者你需要的长度 */
  background-color: black; /* 或你想要的颜色 */
  transform: scaleY(0.5); /* 对高度进行垂直方向的缩放 */
}
如果需要水平方向的0.5px线条，则使用 transform: scaleX(0.5)。

伪元素叠加法：
使用两个相邻的1px线条，并利用负margin让它们重叠起来，形成视觉上的0.5px效果。

.line::before,
.line::after {
  content: "";
  display: block;
  height: 1px;
  background-color: black;
  width: 100%; /* 或者指定宽度 */
}

.line::after {
  margin-top: -0.5px; /* 调整此值使得两条线刚好重合 */
}

box-shadow 方法：
使用 box-shadow 属性模拟线条效果，特别适用于边框样式复杂的场景。

.line {
  height: 1px;
  box-shadow: 0 0 0 0.5px black; /* 下偏移量为0，颜色为你想要的线条颜色 */
}

背景渐变法：
通过background-image设置一个极窄的渐变色带。

.line {
  height: 1px;
  background-image: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 100% 1px;
}

8.px、em、rem的区别及使用场景

• px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em是相对长度单位，其值并不固定，继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。一般用到段落的首行缩进 2em 
• 和em不同的是，rem不用时时去关注父级的情况。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。常被用来做移动适配，pc端页面不推荐使用rem。

9.水平垂直居中的设置

display: flex;
justify-content:center;
align-items:center;

.parent {   
    position: relative;
}

.child {    
    position: absolute;  
    left: 50%;   
    top: 50%; 
    transform: translate(-50%,-50%);
}

10.实现一个三角形

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

11.设置小于12px的字体

• 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
• 使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；
• 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。