前端面试常考知识点---js

1.CSS3的新特性有哪些

点我查看

  1. CSS3选择器 .
  2. CSS3边框与圆角

    CSS3圆角border-radius:
    属性值由两个参数值构成: value1 / value2,值之间用/分隔,value1代表圆角的水平半径,value2代表圆角的垂直半径
    盒阴影box-shadow:
    语法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

  3. CSS3背景与渐变

    重要的几个:
    background-image


    1. 语法:backgroundimage:url('1.jpg),url('2.jpg')

    background-origin


    1. 定义:设置背景图像的原始起始位置
    2. 语法:background-originborder-box / padding-box / content-box(背景图片坐标原点与这三个有关系)

    background-repeat


    1. 定义:设置是否及如何重复背景图像,默认地,背景图像在水平和垂直方向上重复。

    background-size


    1. 定义:指定背景图像的大小
    2. 语法:background-sizenumber / % / cover / contain

    太多了,本宝宝休息一下再写

  4. CSS3过渡
  5. CSS3变换
  6. CSS3动画

2.flex

这篇讲的很全
简单易懂
一方面是在父容器的几个属性,另一些就是子元素的属性


  1. 父:
  2. * flex-direction 子元素排列方向
  3. * flex-wrap 如果一条轴线排不下,如何换行
  4. * flex-flow flex-direction属性和flex-wrap属性的简写形式
  5. * justify-content 在主轴上的对齐方式
  6. * align-items 在交叉轴上如何对齐
  7. * align-content 多根轴线的对齐方式
  8. 子:
  9. * order
  10. * flex-grow
  11. * flex-shrink
  12. * flex-basis
  13. * flex
  14. * align-self

3.BFC

盒模型和BFC

  1. 内部的box会在垂直方向,一个接一个的放置
  2. 每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
  3. box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
  4. bfc的区域不会与浮动区域的box重叠
  5. bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
  6. 计算bfc高度的时候,浮动元素也会参与计算

怎么创建bfc

  1. float属性不为none(脱离文档流)
  2. position为absolute或fixed
  3. display为inline-block,table-cell,table-caption,flex,inine-flex
  4. overflow不为visible
  5. 根元素

应用场景

  1. 自适应两栏布局
  2. 清除内部浮动
  3. 防止垂直margin重叠

    为什么overflow:hidden可以消除margin合并?

    我们首先要搞清楚为什么会发生margin合并。这些元素(包括兄弟、父子元素等)之间之所以会发生margin合并,是因为它们属于同一个BFC。所以,我们就知道怎么办了,只要让它们不属于同一个BFC不就可以了?通过overflow:hidden创建了一个BFC

    为什么overflow:hidden可以清除浮动的影响?

    当给.parent设置"overflow:hidden"时,实际上创建了一个超级属性BFC,此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到:计算BFC的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,“顺便”达成了清除浮动的目标,所以父元素就包裹住了子元素。

    为什么overflow:hidden...

  4. link、import、require的区别
    import和require

    require是运行时调用,所以require理论上可以运用在代码的任何地方
    import是编译时调用,所以必须放在文件开头

    link和import

    当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。

原文地址:https://segmentfault.com/a/1190000017257916

前端面试常考知识点---CSS的更多相关文章

  1. STL标准库面试常考知识点

    C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作.vecto ...

  2. Java面试常考知识点

    1.  什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Jav ...

  3. 面试常考知识点——Java(JVM,JDK,JRE)

    1. 什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? 答:(1)Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. ...

  4. 史上前端面试最全知识点(附答案)---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  5. 找工作笔试面试那些事儿(13)---操作系统常考知识点总结 ZZ 【操作系统】

    http://blog.csdn.net/han_xiaoyang/article/details/11285485 上一节对数据库的知识做了一个小总结,实际找工作过程中,因为公司或单位侧重点不一样, ...

  6. PHP面试常考内容之Memcache和Redis(1)

    你好,是我琉忆.继上周(2019.2-11至2-15)发布的"PHP面试常考内容之面向对象"专题后,发布的第二个专题,感谢你的阅读.本周(2019.2-18至2-22)的文章内容点 ...

  7. PHP面试常考内容之面向对象(1)

    PHP中面向对象常考的知识点有以下几点,我将会从以下几点进行详细介绍说明,帮助你更好的应对PHP面试常考的面向对象相关的知识点和考题. 整个面向对象文章的结构涉及的内容模块有: 一.面向对象与面向过程 ...

  8. PHP面试常考之会话控制

    你好,是我琉忆,欢迎您来到PHP面试专栏.本周(2019.2-25至3-1)的一三五更新的文章如下: 周一:PHP面试常考之会话控制周三:PHP面试常考之网络协议周五:PHP面试常考题之会话控制和网络 ...

  9. PHP面试常考内容之Memcache和Redis(2)

    你好,是我琉忆.继周一(2019.2-18)发布的"PHP面试常考内容之Memcache和Redis(1)"后,这是第二篇,感谢你的支持和阅读.本周(2019.2-18至2-22) ...

随机推荐

  1. Java原来如此-反射机制

    在Java运行时环境中,对于任意一个类,能知道这个类有哪些属性和方法.对于任意一个对象,能调用它的任意一个方法.这种动态获取类的信息以及动态调用对象的方法的功能来自于Java语言的反射(Reflect ...

  2. jQuery实现tab选项卡效果小demo

    html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...

  3. Java学到什么程度可以找到第一份工作

    作者:黄小斜 文章来源:程序员江湖 很多Java初学都关心这么一个问题,Java学到什么程度以后可以找到第一份工作.大家的目标都很明确,也很实在,学习Java无非就是为了找工作,那到底我要学多少Jav ...

  4. Linux环境下编译JDK

    环境准备 操作系统,ubuntu-14.04.6-desktop-amd64.iso,下载地址:http://59.80.44.100/releases.ubuntu.com/14.04/ubuntu ...

  5. Java中泛型的Class<Object>与Class<?>的区别(转)

    Object是一个具体的类名,而?是一个占位符号,表示任何类型,只要是SomeClass类或者子类就可以. List<Object>可以放任何类对象. List<? extends ...

  6. 一道简单DP题

    问题: 给定一个整数的数组,相邻的数不能同时选,求从该数组选取若干整数,使得他们的和最大,要求只能使用o(1)的空间复杂度.要求给出伪码. 解答: int maxSum(vector<int&g ...

  7. cygwin搭建ssh服务器

    下载cygwin的setup.exe安装包

  8. 【Python】输出程序运行的百分比

    对于一些大型的Python程序.我们须要在命令行输出其百分比,显得更加友好,以免被人误会程序陷入死循环.假死的窗口. 关键是利用到不换行的输出符\r,\r的输出.将直接覆盖掉此行的内容. 比方例如以下 ...

  9. WinDbg加载不同版本CLR

    WinDbg调试.net2.0和.net4.0程序有所不同,因为.net4.0使用新版本的CLR.例如: mscoree.dll 变为 mscoree.dll 和 mscoreei.dll, msco ...

  10. FPGA机器学习之机器学习的n中算法总结1

    机器学习是AI领域的重要一门学科.前面我描写叙述过.我计划从事的方向是视觉相关的机器学习分类识别,所以可能在每一个算法的分析中,仅仅增加在视频.视觉领域的作用. 我毛华望QQ849886241.技术博 ...