文章介绍了CSS中的Flex布局、BFC规范、如何处理12px以下字体大小、边框问题的解决方案，以及媒体查询和transform在实践中的应用。同时，针对前端开发者的面试准备，提供了全面的学习资源链接，包括体系化的学习资料和面试解析。
}
html,body{
width: 100%;
height: 100%;
}
.con{
width: 500px;
height: 500px;
background-color: orange;
}
元素
此时此刻，你脑海里肯定浮出了许多答案：
-
使用定位
-
计算内外边距
-
浮动 + 计算边距
-
…
这些答案是对的么？事实上，确实可以实现上面要求的效果，不过请注意审题：如何最快？
面试想要的是最快的，最佳的实现方式，那就必定要用到 flex布局，只需要添加两行代码即可，代码如下：
元素
- 直接上代码：
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
- 如果三角形是这样的：
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
- BFC规定了内部的Block Box如何布局
-
内部的Box会在垂直方向上一个接一个放置。
-
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
-
每个元素的margin box 的左边，与包含块border box的左边相接触。
-
BFC的区域不会与float box重叠。
-
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
-
计算BFC的高度时，浮动元素也会参与计算（这一点挑出来问的）
是不是感觉还是挺费脑子的，休息一分钟，继续往下看
-
我们都知道，谷歌浏览器最小文字是 12px的，那么如何让它更小一点呢？
-
这里就要用到 transform 中的缩放（scale）
p{
font-size: 12px;
transform: scale(0.8);
/* 兼容谷歌的写法 */
-webkit-transform: scale(0.8);
}
解析：
- 解此题，首先得知道浏览器解析过程
-
由上图我们可知：
-
DOM 和 CSSOM 通常是并行构建的,所以 CSS 加载不会阻塞 DOM 的解析
-
然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的,
所以他必须等待到 CSSOM Tree 构建完成。
也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后,才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染
- 如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行），样式表会在后面的 js 执行前先加载执行完毕，所以css 会阻塞后面 js 的执行
这个问题有多种解决方案，例举几种：
- 媒体查询利用设备像素比缩放，设置小数像素
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
缺点： 小数像素目前兼容性较差
- box-shadow 方案
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
缺点： 颜色不好控制，也容易存在兼容问题
- transform: scale(0.5) 推荐使用，此为最佳方案
div {
height:1px;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看
111995)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-6TJsLQFj-1712321111995)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端校招精编面试解析大全点击这里免费获取完整版pdf查看
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
