前言

在面试之中，面试官出的考题往往都是是说说你对什么什么的看法，谈谈你对什么什么的理解，他不会很具体的到某个知识点，这时候我们往往会脑袋里知道这是个什么玩意，但是想表达出来就可能一两句就结束了，这时我们可以从三个方面对问题进行回答使我们的回答尽量丰满：1.是什么2.特点3.应用场景。今天我们就从这三方面对css的知识点进行梳理。

正文

1.说说你对css盒子模式的理解？

是什么

CSS 盒子模型是指浏览器在渲染页面时，将每个容器视为一个矩形盒子，该盒子由四个部分组成：content (内容区)、padding (内边距)、border (边框) 和 margin (外边距)。

特点

标准盒模型 (box-sizing: content-box)：元素的宽度和高度仅包括 content 部分。
IE 盒模型 (box-sizing: border-box)：元素的宽度和高度包括 content、padding 和 border。

切换方法及应用场景

可以通过 box-sizing 属性来控制盒模型的行为。使用 border-box 可以更方便地控制元素的实际大小，适用于需要精确布局的情况。

2. 说说css中的选择器有哪些？

CSS 提供了多种类型的选择器用于定位文档中的元素，包括但不限于：

ID 选择器
Class 选择器
标签选择器
后代选择器
子代选择器
相邻兄弟选择器
群组选择器
属性选择器
伪类选择器
伪元素选择器

优先级

选择器的优先级遵循以下顺序：inline style > ID > class > element selector，同时还有 !important 关键字可以提高样式的优先级。

3. 说说em,rem,vw,vh,px的区别?

是什么

CSS 中有多种长度单位，包括绝对单位（如 px）和相对单位（如 em, rem, vw, vh）。

区别

绝对单位 (px)：像素单位，与屏幕分辨率相关。
相对单位 (em, rem, vw, vh)：
- em: 相对于父元素的字体大小。
- rem: 相对于根元素的字体大小。
- vw 和 vh: 分别相对于视口宽度和高度的百分比。

4. 说说css中有哪些方式方式可以隐藏一个元素,区别？

方法及区别

display: none;：无文档流，不触发事件，会发生回流重绘。
opacity: 0;：有文档流，会触发事件，不会回流，会重绘
width: 0; height: 0;：无文档流，不触发事件，会发生回流重绘
visibility: hidden;：有文档流，不触发事件，不会回流，会重绘
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);：有文档流，不触发事件，不会回流，会重绘（裁剪，把图形围着0px 0px剪一圈，在浏览器上消失了，下面有用到clip-path的代码）

这些方法的dom结构都可以在浏览器上看到的。

5. 谈谈你对BFC的理解

是什么

BFC 是一种特殊的容器，具有自己的一套渲染规则。

规则

BFC 内部元素依然遵循块级元素的排布规则。
浮动元素的高度也会被计入 BFC 的高度。
BFC 的外边距不会与子元素的外边距发生重叠。

触发条件

overflow: hidden 或者其他非 visible 的值。
float: left 或 right。
display: inline-block、table-cell、flex 或 grid。
position: absolute 或 fixed。

应用场景

清除浮动。
避免外边距重叠。

6. 元素水平垂直居中的方法有哪些？

已知父子容器宽高 ：使用 margin: auto;。
未知父容器，已知子容器 ：使用 margin 结合 calc()、position 结合负 margin 或者 transform。
未知父容器，未知子容器 ：使用 position 结合 transform、display: flex、grid 布局、table-cell 结合 vertical-align 和 text-align。

7.说说flexbox

是什么

Flexbox（弹性布局）是一种简单而强大的布局方式，通过定义容器的主轴和交叉轴来控制子元素的排列方式。

属性

容器属性 ：flex-direction、flex-wrap、justify-content、align-items、align-content。
项目属性 ：flex、flex-grow、flex-shrink、flex-basis。

应用场景

三栏布局。
对齐和居中。

8. .如何实现三栏布局

使用 Flexbox。
使用浮动技术（圣杯布局、双飞翼布局）。
使用 Grid 布局。
使用表格布局。
使用绝对定位。

9.css3新增的属性有哪些？

border-radius
box-shadow
border-image
新的背景属性
动画相关的属性，如 transition、transform、animation。
渐变色
等等

animation 是 CSS3 中引入的一个属性，它允许开发者为元素定义复杂的动画效果。通过这个属性，你可以控制元素的样式随时间变化的方式，从而实现平滑的过渡效果或者循环播放的动画。

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        background-color: black;
        height: 100px;
    }
    .box:hover{
        animation:rota 2s linear infinite;
    }
    @keyframes rota {
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

这是做了一个简单的动画，鼠标放上面，正方形会匀速的转动

10. css画三角形，梯形？

三角形

1.可以使用 border 的技巧来绘制一个简单的三角形。例如：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 0px;
        height: 0px;
        border: 100px solid;
        border-color: transparent transparent transparent black;
    }  
</style>
<body>
    <div class="box"></div>
</body>
</html>

2.使用裁剪clip-path来实现绘制一个简单三角形：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width:100px;
        background-color: black;
        height:100px;
        clip-path: polygon(0px 0px, 200px 0px, 100px 100px);
    } 
</style>
<body>
    <div class="box"></div>
</body>
</html>

代码中的0px 0px是起点，分别是x轴，y轴坐标,最后会默认回到0px 0px

梯形

可以用矩形加三角形来实现，这里就不演示了。

11. 画一条宽为0.5px 的线

可以使用 border 或者 transform 属性来绘制一条0.5px细线，例如：

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .line{
        width: 200px;
        height: 1px;
        background-color: black;
    }
    .line1{
        width: 200px;
        margin-top: 10px;;
        height: 1px;
        background-color: black;
        transform: scale(0.5);
    }
    .box{
        width: 100px;
        height: 100px;
        border: 0.5px solid black;
        margin-bottom: 10px;
    }

</style>
<body>
    <div class="box"></div>
    <div class="line"></div>
    <div class="line1"></div>
</body>
</html>

浏览器默认是画不了宽为0.5px的线，屏幕最小分辨率就是1px，你可以理解为1px就好比屏幕一个一个发光的小灯泡，0.5px相对于亮半个灯泡这怎么可以呢，但是我们可以通过 transform: scale(0.5)缩放0.5倍得到宽为0.5px的线，后来谷歌浏览器更新了，border可以设置为0.5px了，所有也可以通过这个来实现。

总结

以上就是关于 CSS 的一些基础知识和常用技巧的总结。希望对你有所帮助！，感谢你的阅读！

面试题： CSS 重点知识梳理

前言

正文

1.说说你对css盒子模式的理解？

2. 说说css中的选择器有哪些？

3. 说说em,rem,vw,vh,px的区别?

4. 说说css中有哪些方式方式可以隐藏一个元素,区别？

5. 谈谈你对BFC的理解

6. 元素水平垂直居中的方法有哪些？

7.说说flexbox

8. .如何实现三栏布局

9.css3新增的属性有哪些？

10. css画三角形，梯形？

11. 画一条 宽为0.5px 的线

总结

11. 画一条宽为0.5px 的线