茫茫人海中与你相遇

相信未来的你不会很差

作者：hh_phoebe

来源：https://juejin.im/post/5ee0cf335188254ec9505381

一. ?设置元素浮动后，该元素的 display 值会如何变化？

---

设置元素浮动后，该元素的display值自动变成block。

二. 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

---

• 行内元素：a、b、 span、img、 input、 strong、 select、 label、 em、 button、 textarea；

• 块级元素：div、 ul、 li、 dl、 dt、 dd、 p、 h1-h6、 blockquote；

• 空元素：即没有实际内容内容的html元素，如：br、 meta、 hr、 link、 input、 img；

三.  box-sizing属性？

---

用来控制元素的盒子模型的解析模式，默认为content-box。

• content-box: W3C的标准盒子模型，设置元素的height/width属性指的是content部分的宽/高；

• border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽；

四. CSS3动画比基于脚本的动画有哪些优势？

---

跟脚本动画相比，使用CSS3动画具有以下优势：

• 易于使用，任何人都可以在不了解javascript的情况下创建它们；

• 即使在合理的系统负载下也能很好的执行。

• 由于简单的动画在javascript中的效果比较差，因此渲染引擎使用跳帧技术来使动画流畅进行；

• 允许浏览器控制动画序列，通过建撒谎哦在当前不可见的选项卡中执行的动画的更新频率来优化性能和效率；

五. 如何优化网页的打印样式？

---

?注意，在打印样式表也应该注意以下几点：

• 打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景图。如果坚持要显示图片，可以使用html插入到页面中；
• 最好不要使用像素作为单位，因为打印样式表要打印出来的是实物，建议使用pt/cm;
• 隐藏掉不必要的内容。(如@print content{display: none});
• 打印样式表中不建议使用浮动属性(建议少用)，因为它们会消失。

六. React Native中的样式与css的区别？

---

• React Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在考虑兼容 React Native 端之前，可以先简要了解一下 React Native 的样式。

• 这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法。

• RN使用 JavaScript 来写样式，所有核心组件都接受名为style的属性，相当于css的行内样式。

• 在 React Native 中使用 Flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。因此，如果你要考虑 React Native 端，那你的样式布局就得采用 Flex 布局。

七. style标签写在body后与body前有什么区别？

---

一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象(页面闪烁)。

八. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

---

• 参数是scroll的时候，一定会出滚动条；

• 参数是auto的时候，子元素内容大于父元素时出现滚动条；

• 参数是visible的时候，溢出的内容出现在父元素之外；

• 参数是hidden的时候，溢出隐藏；

九. BFC、IFC、GFC、FFC是什么？

---

• Block formatting context(BFC)--块级格式化上下文；

• Inline formatting context(IFC)--内联格式化上下文；

• Grid formatting context(GFC)--网格布局格式化上下文；

• Flex formatting context(FFC)--自适应格式化上下文；

十. 对于使用图片，需要注意什么？

---

• 优化图片；

• 尽量避免在html中使用压缩图片；

• 使用恰当的图片格式；

• 使用css sprites技巧对图片优化；

我们在虚拟的空间与你相遇，期待可以碰撞出不一样的火花

公众号ID：前端大联盟扫码关注最新动态