css-从笔试题中看知识

tainzhi 发布于2019-08-30 15:55 / 895人阅读

摘要：常见子元素居中方式原理是绝对定位是根据左上角，然后让子元素回移就居中了水平居中，条件是当前元素指定宽和高水平垂直居中描述图形的语言中的每个元素都是可用的。您可以为某个元素附加事件处理器每个被绘制的图形均被视为对象。

常见子元素居中方式

(1) "position: absolute": "position: absolute;" + "transform: translate(-50%, -50%)" // 原理是绝对定位是根据左上角，然后让子元素回移50%就居中了
(2) "display: flex": "display: flex;" + "justify-content: center;" + "align-items: center;"
(3) "margin: 0px auto": // 水平居中，条件是当前元素指定宽和高
(4) "margin: auto; position: absolute; top/left/bottom/right: 0px": // 水平垂直居中
(5)

svg vs canvas

svg：XML 描述 2D 图形的语言；SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器；每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
canvas ：JavaScript 来绘制 2D 图形;逐像素进行渲染的；旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

面试题：

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒模型：整体宽度 = 内容宽度（content） + padding + border + margin
非标准（IE5以下）：整体宽度 = 内容宽度（content + padding + border） + margin
扩展：

1、两种盒模型分别对应css的那个属性？box-sizing: content-box(标准)，border-box（非标准）

2、margin的特性（块级元素）：垂直叠加，发生于兄弟元素、自身元素、父子元素之间，发生条件是子元素处于标准文档流

(1) 兄弟元素，垂直方向上交界都有margin那么取大值舍小值，可以理解两军交战，实力强的把实力弱的团灭了

(2) 父子元素，垂直方向上边界的上边界取同样是取大值舍小值，发生条件是子元素在标准文档流中并且父元素没有border属性

(3) 自身元素，如果一个元素没有内容或者高度并且margin-top和margin-bottom均有值，那么取两者之间大的值小的会被舍弃，如果相邻元素中有多个这样de空元素则以自身叠加后大的为这些元素的外边距其余的外边距

2、CSS选择器有哪些？哪些属性可以继承？
id选择器、class选择器、标签选择器、相邻选择器往后(+)、子元素器(>)、后代选择器（div p）、通配符选择器（ * ）、伪类选择器（:hover）、属性选择器([attribute=value]); 可继承属性font-family、font-size、color
3、css 样式优先级？
!important > 行内 > id > class > 标签,继承的样式优先级最低
4、display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

4、position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

5、CSS3有哪些新特性？

1 RGBA和透明度(opacity)
2 background-image background-origin(content-box/padding-box/      border-box) background-size background-repeat
3 word-wrap（对长的不可分割单词换行）word-wrap：break-word
4 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5 盒阴影：box-shadow: 10px 10px 5px #888888
6 font-face属性：定义自己的字体
7 圆角（边框半径）：border-radius 属性用于创建圆角
8 边框图片：border-image: url(border.png) 30 30 round
9 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

6、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

7、css多列等高如何实现？（例如左边菜单想要和右侧内容保持高度一致）
可以通过css盒子模型来解决，每列元素都设置一个比较大的padding-bottom，然后margin-bottom设置一个可以相反的值，这样保持在父元素内的每列高度和之前一样，然后父元素设置超过隐藏，就巧妙地形成了多列高度一样
8、li与li之间有看不见的空白间隔是什么原因引起的(display:inline || inline-block)？有什么解决办法？
如果是每行一个li元素那么行之间有个换行符，这是导致有空隙的原因，解决方法是将所有li元素写在一行去掉换行符或者在ul折
9、css定义的权重
标签的权重是1， class的权重是10， id的权重是100，权重越大优先级越高

div {} // 权重1
  .name {} // 权重10
  #id {} // 权重100
  .name div {} // 权重 10 + 1
  #id div {} // 权重 100 + 1
  .name.name div {} // 10 + 10 + 1

10、移动端的布局用过媒体查询吗？
@media (min-width: 700px) and (orientation:landscape){ .sidebar { display: none; } } // 屏幕大于700px时该样式生效
11、::before 和 :after中双冒号和单冒号有什么区别？

::伪元素，:伪类

12、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

每秒60帧，animation

13、什么是CSS 预处理器 / 后处理器？

预处理器例如：less、sass、stylus，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将css作为目标生成文件。
后处理器：autoprefixer，对css进行兼容和优化

14、css3 display新添加的属性display: box, box后可以添加的属性

(1) box-orient: 父容器里子容器的排列方式
(2) box-direction: 父容器里子容器的排列顺序 horizontal | vertical
子元素可以设置box-flex: 比例，进行等比分隔 normal | reverse | inherit
(3) box-align: 父容器里子元素的垂直对齐方式 start | end | center | baseline | strech
(4) box-pack: 父容器里子元素的水平对齐方式 start | end | center | justify
(5) line-clamp: 最多几行，超出溢出

私有云专线服务网络包中看cdn js中看字符串笔试题 cdn试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117445.html

如何招聘一名优秀的前端

摘要：如何考察一个人是不是经验丰富我们需要在问答式的面试中，对其项目经验进行挖掘。如何设置笔试题现在网上有大量的面经的存在，对于我们面试是一个巨大的挑战。尊重应聘者我们要尊重每一个来应聘的人，不要轻视别人，或者故意刁难别人。时光荏苒，2个月前，我才刚总结了如何应对面试官，现在的我开始总结如何面试别人了。笑哭.png 1.我们需要什么样的人招聘肯定要有标准，这样我们才能更快的找到我们需要的...

aervon 2019-08-05 17:45 评论0 收藏0
如何招聘一名优秀的前端

摘要：如何考察一个人是不是经验丰富我们需要在问答式的面试中，对其项目经验进行挖掘。如何设置笔试题现在网上有大量的面经的存在，对于我们面试是一个巨大的挑战。尊重应聘者我们要尊重每一个来应聘的人，不要轻视别人，或者故意刁难别人。时光荏苒，2个月前，我才刚总结了如何应对面试官，现在的我开始总结如何面试别人了。笑哭.png 1.我们需要什么样的人招聘肯定要有标准，这样我们才能更快的找到我们需要的...

Mr_houzi 2019-08-26 10:32 评论0 收藏0
js css 基础知识点和面试题复习

摘要：两种元素必须拥有相同的父元素，但是不必直接紧随。临时移动重定向未修改访问缓存数据客户端错误，请求包含语法错误或无法完成请求身份为认证服务器错误，服务器在处理请求的过程中发生了错误服务器内部错误持续更新对平常的小知识点，会持续更新 == 对比特殊原则 undefined == null / null == undefined number 和 string/boolean 对比将...

yeooo 2019-08-23 18:28 评论0 收藏0
一道CSS笔试题

摘要：分析这道题主要考察的居中和宽高等比例。如果元素的高度和宽度都以某一个值作为参照系，那么理论上元素的乘以可自定义。根据规范，的值为百分比时，是相对于父元素的宽度而言。 showImg(https://segmentfault.com/img/remote/1460000011668870?w=942&h=552);如上图所示，屏幕正中间有个元素A，随着屏幕宽度的增加，始终需要满足以下条件...

aikin 2019-08-30 13:47 评论0 收藏0
CSS 基本测试题

摘要：下面提供了道有关的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。对于这种替换元素，和各方向均有作用。操作符表示仅在媒体查询匹配成功的情况下应用指定样式。下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。大家可以在评论区进行讨论。 1.css区分大小写吗？ ul { MaRgIn: 1...

ASCH 2019-08-21 11:29 评论0 收藏0