• 【知识总结】金九银十offer拿到手软的前端面试题——CSS篇

    1、CSS选择器优先级

    !important > inline > id > class > tag > * > inherit > default

    • 1
    • !important：大于其他
    • 行内：1000
    • id选择器：100
    • 类、伪类和属性选择器：如.content:10
    • 类型选择器、伪元素选择器：1
    • 通配符、子选择器、相邻选择器：0

    同级别的后写的优先级高。

    相同class样式，css中后写的优先级高，和html中的class名字前后无关。

    2、水平垂直居中

    1）文本水平居：text-align:center
    2）文本垂直居中：

    line-height: 容器height;
display:flex;
align-items:center;

    • 1
    • 2
    • 3

    3）div水平居中：

    1. margin: 0 auto;
    2. 已知父元素宽度：margin-left:width/2; transform:tranlateX(-50%);
    3. 未知父元素宽度：position:abolute; top: 50%; transform:tranlateY(-50%)
    4. display:flex; justify-content:center;

    4）div垂直居中：

    1. 已知父元素高度：margin-top:height/2; transform:tranlateY(-50%)
    2. 未知父元素高度：position:absolute; top:50%; transform: tranlateY(-50%)
    3. display:flex; algin-items: center;

    3、移除inline-block间隙

    • 移除空格
    • 使用margin负值
    • 使用font-size:0
    • letter-spacing
    • word-spacing

    4、清除浮动

    浮动的影响：

    1）由于浮动元素脱离文档流，所以父元素无法被撑开，影响了与父元素同级的元素

    2）与浮动元素同级的非浮动元素会紧随其后，因为浮动元素脱离文档流不占据原来的位置

    3）如果浮动元素不是第一个浮动元素，则该元素之前的元素也应该浮动起来，否则容易影响页面的结构显示

    清除浮动的3个方法：

    1. 使用clear:both清除浮动。在浮动元素后面放一个空的div标签，div设置样式clear:both来清除浮动。优点是简单方便且兼容性好，但一般情况下不建议，因为会造成结构混乱，不利于后期维护。
    2. 利用伪元素after来清除浮动。给父元素添加:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。
    .div:after{
	content: "",
	display: block,
	visibility: hidden,
	clear: both
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 使用css的overflow属性。当给父元素设置overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。它的本质是构建了一个BFC，这样使得达到撑起父元素高度的效果。

    5、（外）边距重叠

    布局垂直方向上两个元素的间距不等于margin的和，而是取较大的一个。

    1）同级相邻元素现象：上方元素设置margin-bottom:20px; 下方元素设置margin-top:10px;实际的间隔是20px。

    • 避免方法：同级元素不要同时设置margin，设置其中一个即可

    2）父子元素现象：父元素设置margin-top: 20px;，下方元素设置margin-top: 10px;实际的间隔是20px

    • 避免方法：父元素用padding-top，或者border-top，或者触发BFC

    6、三栏布局

    要求：左边右边固定宽度，中间自适应

    1）float

    

    
    "left">左
    
    
    "right">右
    
    
    "center">中
      
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    2）position:absolute

    <style>
.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}
</style>
<body>
    <div class="left">左</div>
    <div class="center">中</div>  
    <div class="right">右</div>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    3）flex

    <style>
.main {
    display: flex;
}
.left{
    width: 300px;
}
.center{
    flex-grow: 1;
    flex-shrink: 1;
}
.right{
    width: 300px;
}
</style>
<body class="main">
    <div class="left">左</div>
    <div class="center">中</div>  
    <div class="right">右</div>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    7、BFC

    BFC是Block Formatting Context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

    文档流分为：普通流、定位流、浮动流，普通流其实就是指BFC中的FC，也即格式化上下文。

    普通流：元素按照其在 HTML 中的先后位置从上到下、从左到右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。

    格式化上下文：页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

    BFC规则：

    • BFC区域内的元素外边距会发生重叠
    • BFC区域内的元素不会与浮动元素重叠
    • 计算BFC区域的高度时，浮动元素也参与计算
    • BFC区域相当于一个容器，内部的元素不会影响到外部，同样外部元素也不会影响内部

    BFC的应用：

    • 清除浮动：父元素设置overflow:hidden;触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等
    • 清除相邻元素垂直方向的边距重叠：第二个元素套一层，并设置overflow:hidden;构建BFC使其不影响外部元素
    • 清除父子元素边距重叠：父元素设置overflow:hidden;

    8、flex布局

    容器属性：

    • display: flex
    • lex-direction：主轴的方向（即项目的排列方向），row | row-reverse | column | column-reverse;
    • flex-wrap：是否换行，nowrap | wrap | wrap-reverse;
    • flex-flow：direction 和 wrap简写
    • justify-content：主轴对齐方式，flex-start | flex-end | center | space-between | space-around;
    • align-items：交叉轴对齐方式，flex-start | flex-end | center | baseline | stretch;
    • align-content: 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start |flex-end | center | space-between | space-around | stretch;

    项目的属性:

    • order：项目的排列顺序，数值越小，排列越靠前，默认为0。
    • flex-grow：放大比例，默认为0，指定元素分到的剩余空间的比例。
    • lex-shrink：缩小比例，默认为1，指定元素分到的缩减空间的比例。
    • flex-basis：分配多余空间之前，项目占据的主轴空间，默认值为auto
    • flex：grow, shrink 和 basis的简写，默认值为0 1 auto
    • align-self：单个项目不一样的对齐方式，默认值为auto，auto | flex-start | flex-end | center | baseline | stretch;

    9、css动画

    1）transition过渡：将变化按照设置的时间长度缓慢执行完毕，而不是立即执行

    delay的真正意义在于，它指定了动画的发生顺序，使得多个不同transition可以连在一起，形成复杂的效果。

    • transition-property：过渡属性
    • transition-duration：过渡时间长度
    • transition-delay：延迟几秒执行
    • transition-timing-function
      • linear：匀速
      • ease-in：加速
      • ease-out：减速
      • cubic-bezier函数：自定义速度模式，最后那个cubic-bezier，可以使用工具网站来定制。
    /* 变化在1s过渡 */
transition: 1s;
/* 指定过渡属性 */
transition: 1s height;
/* 指定多个属性同时发生过渡 */
transition: 1s height, 1s width;
/* 指定delay延时时间 */
transition: 1s height, 1s 1s width;
/* 指定状态变化速度 */
transition: 1s height ease;
/* 指定自定义移状态变化速度 */
transition: 1s height cubic-bezier(.83,.97,.05,1.44);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    transition优点：简单易用

    transition局限：

    • 需要事件触发，没法在网页上自动加载
    • transition是一次性的，不能重复，除非再触发一次
    • transition只能定义开头、结束的状态，不能定义中间状态，也就是只有两个状态
    • 一天transition规则，只能定义一个属性的变化，不涉及多个属性

    2）animation动画

    .element:hover {
  animation: 1s rainbow;
  /*
  animation: 1s rainbow infinite; 关键字infinite让动画无限次播放
  animation: 1s rainbow 3; 指定动画播放次数
  */
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义。
    • animation-duration: 整个动画需要的时长。
    • animation-timing-function: 动画进行中的时速控制，比如 ease 或 linear.
    • animation-delay: 动画延迟时间。
    • animation-direction: 动画重复执行时运动的方向。
    • animation-iteration-count: 动画循环执行的次数。
    • animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态。
    • animation-play-state: 暂停/启动动画

    10、CSS优化、提高性能的方法有哪些？

    • 多个css合并，减少http请求
    • 将css文件放在页面最上放
    • 移除空的css规则
    • 避免使用css表达式
    • 选择器优化嵌套，尽量避免层级过深
    • 充分利用css继承属性，减少代码量
    • 抽取提出公共样式，减少代码量
    • 属性值为0时，不加单位
    • 属性值为小于1的小数时，省略小数点前面的0
    • css雪碧图
  • 相关阅读:
    pywinauto：Windows桌面应用自动化测试（三）
    RxJS 实战: 基于 BehaviorSubject 实现状态管理 & 结合 React
    AdaBoost算法解密：从基础到应用的全面解析
    websocket请求通过IteratorAggregate实现流式输出
    加油站智能视频监控系统方案
    计算机毕业设计Python+Django的银行取号排队系统(源码+系统+mysql数据库+Lw文档）
    【开题报告】基于django+vue基于web的办公用品网上销售管理系统的设计与实现(论文+源码) 计算机毕业设计
    VMware安装Android-x86示例
    ctrlz删除的文件怎么恢复?
    minio文件服务器-docker docker-compose 搭建部署以及使用大全
  • 原文地址：https://blog.csdn.net/weixin_42224055/article/details/126178183