前端面试(个人收藏总结)CSS篇

1,103 阅读2分钟

前端面试(个人收藏总结)html篇

前端面试(个人收藏总结)javascript篇(一)

前端面试(个人收藏总结)javascript篇(二)

文本不换行

    /*单行文本*/
    .single-line{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /*多行文本(注:目前仅webkit内核支持)*/
    .multi-row{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        /* 英文情况换行 */
        word-wrap:break-word;
        word-break:break-all;
    }
    

CSS样式优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  • 权重计算
  • 后写优先

雪碧图的作用

  • 减少HTTP请求数,提高加载性能
  • 减少图片大小

display:inline-block的间距问题

由于空白字符的原因

解决:font-size: 0

如何清除浮动

  • overflow:hidden(原理:BFC)
  • ::after{clear:both}
  • .clear{clear:both}

如何适配移动端

viewportremmedia查询、 响应式设计:隐藏、折行、自适应

页面三栏布局实现方式

  • 浮动布局
  • 定位布局
  • flexbox布局
  • 表格布局
  • 网格布局

盒子垂直水平居中实现方式

  • 定位 + margin:
 position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度; 
  • 定位 + transform:
 position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);  
  • 表格布局:
父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto; 
  • flex 布局:
父级 display: flex;align-items: center;justify-content: center; 
  • 网格布局

参考:github.com/Sweet-KK/cs…

关于CSS盒模型

标准模型:宽高 = content

IE模型:宽高 = border+padding+content

边距重叠(塌陷)问题

上下2个div分别设置margin-bottom和margin-top,margin值合并取最大值。父div嵌套子div并设子div宽高margin-top,父div=子div宽高并会margin值合并取最大值。

解决原理:BFC

解决办法:overflow:hidden

什么是格式化上下文

格式化上下文,它指的是具有某种CSS格式化规则(布局规则)的上下文环境,在这个上下文环境内的所有子元素,都将根据其特定的CSS格式化规则来进行排列。

BFC

块级格式化上下文

规则:

  • BFC元素垂直方向的边距会重叠;

  • 占据文档流的BFC元素不会和浮动元素重叠;

  • BFC是个独立容器里外互不影响;

  • 计算BFC高度时浮动元素也会参与计算(如清除浮动)

如何创建:overflowfloatpostion(absolute 或 fixed)、 dispay(inline-box和table相关的以及flex和grid)

FFC

自适应格式化上下文

规则:参考flex布局

如何创建:flex或inline-flex