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

前端面试常考知识点—js

1.CSS3的新特性有哪些

点我查看

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

    CSS3圆角border-radius:

    属性值由两个参数值构成: value1 / value2,值之间用/分隔,value1代表圆角的水平半径,value2代表圆角的垂直半径

    盒阴影box-shadow:

    语法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

  3. CSS3背景与渐变

    重要的几个:
    background-image

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

    background-origin

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

    background-repeat

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

    background-size

    定义:指定背景图像的大小 
    语法:background-size:number / % / cover / contain

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

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

2.flex

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

父:                                                                                  
    * flex-direction                                 子元素排列方向
    * flex-wrap                                        如果一条轴线排不下,如何换行
    * flex-flow                                         flex-direction属性和flex-wrap属性的简写形式
    * justify-content                               在主轴上的对齐方式
    * align-items                                     在交叉轴上如何对齐
    * align-content                                 多根轴线的对齐方式
子:
    * order
    * flex-grow
    * flex-shrink
    * flex-basis
    * flex
    * 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞