前端面试题总结之（二）：CSS篇（陆续更新）

前言

你好，我是Dr.叶子，用心写最优美的博客，弹最好听的钢琴！

最近更新：

• 2021年6月6日

---

 

1. 盒子模型

• 标准盒子模型：

width 、 height 指的是内容区域（content）的宽度和高度；

• IE盒子模型：

width 、 height 指的是内容区域（content）+ 边框（border ）+ 内边距（padding ）的宽度和高度；

---

2. sass 和 less 是什么

• CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等；
• 结构清晰，便与拓展；
• 可轻松实现多重继承；

---

3. rgba和opacity的透明效果

• rgba 透明，子元素不会继承透明度；
• opacity 透明，子元素会继承透明度；

---

4. Flex布局

       首先设置父容器 display: flex;，然后再设置父容器的其它属性。

 

• flex-direction 属性： 主轴排列方向
  row （默认，横向） | row-reverse （横向倒序） | column（纵向） | column-reverse （纵向倒序）

 

• flex-wrap 属性： 是否换行
  nowrap（默认，不换行） | wrap（换行，第一行在上） | wrap-reverse（换行，第一行在下）

 

• flex-flow 属性： flex-direction 和 flex-wrap 的简写（可不用）
  <flex-direction> || <flex-wrap>

 

• justify-content 属性： 主轴的对齐方式
  flex-start（默认，主轴开始方向） | flex-end | center | space-between（等间距） | space-around（两端留空，等间距）

 

• align-items 属性： 交叉轴上的对齐方式
  flex-start | flex-end | center | baseline | stretch（默认）

 

• align-content 属性： 当有多根轴线时-对齐方式，如果只有一根轴，则该属性无效
  flex-start | flex-end | center | baseline | stretch（默认）

具体应用示例：请看文末“推荐阅读”。

---

5. CSS优先级

• !important > id > class > 标签

---

6. 纯CSS实现三角形

思路： 1.内容区域为0；2.控制边框的透明度、宽度；

.box {
	width: 0px;
	height: 0px;
	border-top: 50px solid rgba(0,0,0,0);
	border-right: 50px solid rgba(0,0,0,0);
	border-bottom: 50px solid blue;
	border-left: 50px solid rgba(0,0,0,0);
}

---

 

推荐阅读

【1】W3Cschool：CSS3 学习参考.
【2】知乎：30 分钟学会 Flex 布局.

---

 

系列文章

前端面试题总结之（一）：HTML篇.

前端面试题总结之（二）：CSS篇.

前端面试题总结之（三）：JavaScript篇.

前端面试题总结之（四）：Vue开发相关.

前端面试题总结之（五）：综合知识点.

---

 

后语

1. 原创内容，转载说明出处哦！
2. 以上内容本人整理，亲测可行，如有任何问题，敬请指正，谢谢~~
3. 点赞、收藏、也欢迎打赏，我弹钢琴你听呀~~哈哈！