• CSS面试题整理

    文章目录

    css面试题整理

    position定位

    面试题

    • position 有哪几个值，说一下他们对应的基点是什么?
    • absolute和relative同时设置top值效果一样吗?
    • relative定位中 top和 margin-top区别
    • position干什么，属性值，left是负数是什么意思
    • position:relative 是相对于谁定位的
    • sticky定位作用
    • fixed定位的元素设置left:0; top:0;一定会在左上角吗？

    文档流 了解

    HTML的布局机制基于文档流模型

    • 块元素（block）独占一行，设置宽高生效
    • 内联元素（inline）不独占一行,设置宽高不生效
    • 行内块(inline-block) 不独占一行，设置宽高生效

    只有**float定位和绝对定位(固定定位)**会脱离文档流。

    position属性

    当元素开启了定位以后，可以通过偏移量(top bottom left right 仅对开启定位的元素有用)来设置元素的位置。

    属性值定位基点是否会脱离文档流描述
    static默认值,出现在正常文档流中×
    relative相对于该元素在文档中的初始位置进行定位×相对定位会提升元素的层次,会盖在别人上面
    absolute相对于距该元素最近的已定位的祖先元素√绝对定位的元素会提升层级
    脱离文档流，元素性质发生变化，可以设置宽高，不独占一行，默认会被内容撑开(行内块元素性质)
    fixed相对于浏览器窗口(可视窗口)进行定位√
    相对定位的一种    		存在固定定位偏移问题
    sticky相对于最近的滚动元素进行定位的，如果没有可滚动元素，则表示浏览器视窗×当粘性约束矩形在可视范围内为relative，反之为fixed

    z-index只对有定位属性的元素有效，用于改变元素的层级

    绝对定位absolute

    水平布局等式margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容的宽度

    当开启了绝对定位之后的水平布局等式增加了left+right变成了
    left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的宽度

    1. 如果发生过渡约束(等式不满足)，等式会自动调整，宽度优先，right/left其次(优先调整right)，左右外边距平分。
    2. 当我们开启绝对定位后，垂直方向也需要满足垂直方向的等式也需要满足（正常的不会）,其规则类似水平布局。

    可以利用这个特性进行垂直据中布局。

    //垂直居中的元素
width:xxx;
height:xxx;
position:absolute; //父相子绝,在谁中间就给谁相对定位
margin:auto
left:0;
right:0;
top:0;
bottom:0;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    固定定位fixed

    固定定位类似于相对定位，只是永远相对于浏览器的可视区域进行定位

    固定定位偏移问题
    当父级元素设置transform后，fixed元素变成了相对父元素进行定位。

    问题产生的原因
    对于布局受 CSS 盒模型控制的元素，拥有 transform 属性的元素，其值除 none 以外的任何值为其所有后代建立一个包含块（containing block）,用于 absolute 定位后代、fixed 定位后代的包含块。

    如果祖先元素拥有下列属性，会被作为 absolute 和 fixed 的包含块。

    • transform/perspective 属性值不为 none
    • will-change 属性值为 transform/perspective
    • filter 属性值不为 none

    absolute和fixed 本质都是相对于包含块定位，只不过默认情况absolute的包含块为最近的已定位的祖先元素，fixed为窗口可视区域（viewport）定位

    粘滞定位sticky

    两个概念

    • 流盒: 粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。
    • 粘性约束矩形: 粘性布局元素的父级元素矩形

    特点

    1. 当粘性约束矩形在可视范围内为relative，反之，则为fixed
    2. 如果父元素的overflow属性设置了scroll，auto,hidden值，粘性定位将会失效
    3. 必需添加边偏移（top、bottom、left、right）才会起效

    案例
    红色部分为流盒，蓝色部分粘性约束矩阵，黄色部分为粘性定位元素
    在这里插入图片描述

    <style type="text/css">
body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 400px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 30px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}
style>

<body>
        <div>
            <nav>导航nav>
        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
    • 26
    • 27
  • 相关阅读:
    jni场景下c++代码种，编写jstring转char*
    《C和指针》(1)快速上手
    电石双向无人值守称重系统功能详解
    kube-prometheus 监控系统使用与总结
    Web前端：为移动应用选择Angular框架的3个商业优势!
    Android掌控WiFi不完全指南
    Mysql删除重复数据只保留一条
    可持续发展：制造铝制饮料罐要消耗多少资源？
    什么是单向数据流
    【N年测试总结】论提升测试效率和质量的思路
  • 原文地址：https://blog.csdn.net/qq_41370833/article/details/126241984