前端面试基础题——CSS

CSS 选择器的优先级是如何计算的？

css选择器有哪些？优先级？哪些属性可以继承？

请阐述Float定位的工作原理

请阐述z-index属性，并说明如何形成层叠上下文（stacking context）

媒体查询是什么？@media 除了screen还有@import的用法

什么是重排和重绘，更改哪些属性会触发重排和重绘，如何避免？

css预处理器是什么？

CSS 外边距(margin)重叠及防止方法

浏览器渲染大致流程

什么时候需要清除浮动？clear

你有没有使用过视网膜分辨率的图形？当中使用什么技术？

css3 min-device-pixel-ratio属性 解决高清的图片适配

设备像素比devicePixelRatio

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

justify-items水平方向，align-litems垂直方向

flex:1所代表的含义

如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

---

伪类与伪元素？

伪元素本质上是创建了一个虚拟容器(元素)

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息

---

css预处理器的优缺点？

优点：

提高 CSS 可维护性。

易于编写嵌套选择器。

引入变量，增添主题功能。可以在不同的项目中共享主题文件。

通过混合（Mixins）生成重复的 CSS。

Less 用 JavaScript 实现，与 NodeJS 高度结合。

缺点：

通过node-sass使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，必须经常重新编译。

Less 中，变量名称以@作为前缀，容易与 CSS 关键字混淆，如@media、@import和@font-face。

---

使用非标准字体的网页设计，如何实现？
网页安全字体这个概念前端们应该都清楚，那遇到非网页安全字体为了保证网页在用户电脑中显示不破坏页面整体的设计，通常少量的文字可以用图片来代替，也可以用Javascript的Cufon来画出这个字体。那实际上这些字体都是付费使用的，这两种做法都有可能引发一些侵权的问题，也会在一定程度上拖慢网页的浏览速度。所以现在推荐使用@font-face，通过将字体文件上传到服务器端来保证客户端的显示一致。

@font-face使用方法

购买Web版权字体，可以从商家手上获取到.eot和.woff两种扩展名的字体文件。将之放到服务器的网站文件夹中任一位置。

在CSS中加入@font-face申明（以下路径可以使用相对路径）：

@font-face {

font-family: 'MyFont';

src: url('WebFont.eot');

src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff');

}

在需要使用该字体的地方，直接添加CSS属性font-family：

P  {

font-family:'MyFont',Arial;

}

---

css绘制三角形

在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单

效果如下图所示：

将border设置50px，效果图如下所示：

白色区域则为width、height，这时候只需要你将白色区域部分宽高逐渐变小，最终变为0，则变成如下图所示：

这时候就已经能够看到4个不同颜色的三角形，如果需要下方三角形，只需要将上、左、右边框设置为0就可以得到下方的红色三角形

但这种方式，虽然视觉上是实现了三角形，但实际上，隐藏的部分任然占据部分高度，需要将上方的宽度去掉

最终实现代码如下：

.border{width:0;height:0;border-style:solid;border-width:0 50px 50px;border-color:transparent transparent #d9534f;}

【先确定border-color中transparent的方向，再确认boder-width的值即可】

如果想要实现一个只有边框是空心的三角形，由于这里不能再使用border属性，所以最直接的方法是利用伪类新建一个小一点的三角形定位上去

.border{width:0;height:0;border-style:solid;border-width:0 50px 50px;border-color:transparent transparent #d9534f;position:relative;}.border:after{content:'';border-style:solid;border-width:0 40px 40px;border-color:transparent transparent #96ceb4;position:absolute;top:0;left:0;}

效果图如下所示：

伪类元素定位参照对象的内容区域宽高都为0，则内容区域即可以理解成中心一点，所以伪元素相对中心这点定位

将元素定位进行微调以及改变颜色，就能够完成下方效果图：

最终代码如下：

.border:after{content:'';border-style:solid;border-width:0 40px 40px;border-color:transparent transparent #96ceb4;position:absolute;top:6px;left:-40px;}

---

重绘重排与合并？

当DOM的样式或内容会被修改时，将触发重新渲染。除了属性值计算、单位换算外，渲染主要分为三个步骤：

布局：计算盒模型的位置，大小

绘制：填充盒模型的文字、颜色、图像、边框和阴影等可视效果

合并：所有图层绘制后，按层叠顺序合并为一个图层

重新渲染一般有三种执行路径：

重排：布局 → 绘制 → 合并

重绘：绘制 → 合并

合并

出处链接：https://juejin.cn/post/6983190159646801927

---

BFC？

就像是一个具有物理属性的盒子。

一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：

float的值不是none.

position的值不是static或relative.

display的值是table-cell、table-caption、inline-block、flex、或inline-flex。

overflow的值不是visible。

在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。

两个相邻的块级盒在垂直方向上的边距会发生合并（collapse）

---

overflow:hidden立大功

//一行展示省略号

white-space: nowrap;//翻译：“空格：不换行”

text-overflow: ellipsis;//省略号

overflow: hidden;

word-break: break-all; //非必需

// 两行以上展示省略号

text-overflow: ellipsis;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

---

伪类实现小圆点

.todo-title {

color: #6190e8;

font-size: 36px;

display: inline-flex;

justify-content: space-between;

width: 200px;

align-items: center;

&::before {

content: ''; display: block; width: 30px; height: 30px; background:#6190e8; border-radius: 50%; margin-right: 6px; }

}

---

本文主要用于个人前端学习，部分问题节选自链接文章，侵权即删。