前端基础及面试题总结CSS篇

3.1 CSS3

* 面试题
复制代码

• 什么是CSS预处理器

CSS预处理器就是为CSS增加编程特性，通过编译器将新语法的文件输出为普通的CSS文件 常见的预处理器：Less,Sass,Stylus

• CSS预处理器的优缺点：

  优点：

  变量存储多次引用的信息

  minxin能够重用一段样式代码

  内置丰富的函数

  可以嵌套选择器

  使用数学运算

  缺点：

  调试难度增加

  降低对CSS文件的控制能力

  学习成本

3.2 盒模型

• 1.W3C盒模型包含内容：margin,border,padding,content IE盒模型包含内容：content包含padding和border 代码：/public/3.2test.html(已知父元素宽高上下左右居中)

• 2.更改盒模型的属性： content-box:对应W3C盒模型 border-box对应IE盒模型

• 3.盒子的显示类型 block,inline-block,inline-block,table,flexbox

• 4.面试题：

  什么是外边距坍塌?

  • 也称为外边距合并，是指在两个正常流中相邻的块级元素的外边距组合变成单个边距 ，只有上下边距会坍塌，左右不会

  坍塌的情况：

  • 父元素没有边框和上内边距，和第一个子元素 代码：/public/3.2test2.html
  • 父元素没有下边框和下内边距 代码：/public/3.2test3.html
  • 两个相邻兄弟元素，分别定义了下边距和上边距 代码：/public/3.2test4.html
  • 一个空的元素，只定义了上下外边距 代码：/public/3.2test5.html

  当出现外边距坍塌计算方式？

  • 两正取大，两负取绝对值大，一正一负取相加和

3.3盒类型

• list-item 指定元素为列表，相当于变成了li 代码：/public/3.3test1.html

• table(不提倡)

• run-in根据周围元素决定盒子类型（兼容问题）

• inline-block

  • 让元素排列在一行
  • 会有间隙问题：解决办法
  • 三个子元素写在一行
  • 父元素letter-spacing为负，子元素letter-spaceing为0
  • 父元素font-size:0(没效果不知道为啥)
  • 代码：代码：/public/3.3test1.html

• flexbox

  • 不会有间隙问题

    父元素：display:flex

    子元素：flex:占几份

•   面试题：
    display:none和visibility:hidden都可以隐藏元素,两者有什么区别
    将CSS属性display定义为none后，相当于元素没有了后代元素，在正常流中不占用任何空间，元素真实的尺寸
    将会丢失，还会导致浏览器重排和重绘，visibility:hidden在正常流还会占据空间，仍具有真实尺寸
    ，只会导致重绘
  复制代码

3.4 BFC

*(BFC有隔离作用，内部元素不受外部影响，BFC内容不会与外面浮动元素重叠)

• 1.创建BFC

  • (1)根元素，也就是HTML元素
  • (2)float属性不为none的浮动元素
  • (3)position属性是absolute或fixed的定位元素
  • (4)display属性为inline-block,table-cell或伸缩盒模型
  • (5)overflow属性不为visible的块级元素

• 2.BFC的用途

•   (1)清除浮动
        当一个元素定义浮动，附近文字环绕，解决办法：浮动的父元素清浮动
        代码：/public/3.4test1.html
        一个父元素未定义高度，有浮动的子元素,高度坍塌，解决办法父元素清浮动
        代码：/public/3.4test2.html
  复制代码

•   (2)解决外边距坍塌
        代码：/public/3.4test3.html
  复制代码

•   (3)宽度自适应的两栏布局
        左边宽度固定，右边清除浮动后可以自适应两栏布局
        代码： 代码：/public/3.4test4.html
  复制代码

3.5 CSS选择器

    1.基本选择器
        通配选择器
        类型选择器
        类选择器
        ID选择器
        属性选择器
    2.关系选择器
        后代选择器
        子选择器（.bfc>ul）只会选择儿子，缩小范围
        相邻选择器和兄弟选择器
        .bfc+div{} //相邻选择器
        .bfc~div{}//兄弟选择器 
        案例代码：/public/3.5test1.html           
    3.伪选择器
        (1)伪类选择器：用于描述元素的动态特征，再根据元素的特殊状态选择元素
            *链接元素
            未访问(:link)已访问(:visited)激活(:active)悬停(:hover)
            *元素的位置
            第一个(:first-child)
            *表单元素
            选中(:checked)启用(:enabled)禁用(:disabled)
        (2)伪元素选择器
            用于处理文档内容或添加内容或过滤内容
            过滤内容：::first-letter(首字符)::selection(选中内容)
            添加内容：::before(元素之前插入内容) ::after(元素之后插入内容)
         注意:伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素
    4.面试题
    伪类：first-child与：first-of-type有什么区别
        伪类:first-child表示父元素中的第一个子元素，只要这个元素在第一位置就能够匹配
        伪类:first-of-type表示父元素中的第一个与父元素相同类型的子元素
         代码：/public/3.5test2.html
复制代码

3.6 内容生成

    content属性可以用来生成内容，创建计数器，引用属性值和图像
         (1)生成内容
             代码：/public/3.6test1.html     
         (2)属性值
            在content属性中应用attr()函数 
            代码：/public/3.6test2.html(不要在chrome中打开)
复制代码

3.7 层叠

    面试：
    链接的四种状态声明的顺序：
    推荐使用的顺序是：LVHA（:link,:visited,:hover,:active）love,hate记忆
复制代码

3.8 单位

    1.em：表示的是元素字体大小的倍数
    换算公式：1/元素的font-size*px
    2.rem:和em大小相关，参照的是根元素字体的大小
     换算公式：1/htmlfont-size*px
    面试题：用过calc()函数吗？是什么有什么作用？
    calc()是CSS的一个函数，用来处理数学运算并且混用单位，如果用百分比做自适应布局的时候会用到
    代码：/public/3.8test1.html
复制代码

3.9 百分数

    1）定位：
    fixed包含块是当前视口
    absolute包含块是离他最近祖先元素不为static的内容区域
    面试题：
    执行下面代码计算后p元素的行高是多少
    ```
    div{
        font-size:18px;
        line-height:14px;
    }
    div p{
        line-height:50%;
    }
    行高参照的是元素自身的字体大小，p元素自身并没有定义字体，需要从父元素继承来，继承过来的
    值是18px再乘以50%，最终行高是9px
    代码：/public/3.9test1.html
复制代码

3.10 颜色

* 
面试题：
    在CSS使用background:transparent与opacity:0区别
    在CSS中，transparent关键字相当于rgba(0,0,0,0),作为background的属性值
    仅仅是将元素的背景设为透明，元素中的内容还能显示，而opacity:0是把元素和内容当成一个整体，两者都会
    透明
代码：/public/3.10test1.html
复制代码

代码在github仓库：github.com/EmilyHOC/in…

转载于:https://juejin.im/post/5c2b8047f265da61506490e4