• CSS定位

    文章目录

    定位

    定位：手动控制元素在包含块中的精准位置

    涉及CSS属性：position

    一、position属性

    -默认值：static，静态定位（不定位）
    -relative：相对定位
    -absolute：绝对定位
    -fixed：固定定位

    一个元素，只要position的取值不是static，认为该元素是一个定位元素

    定位元素会脱离文档流（相对定位除外）

    一个脱离了文档流的元素：

    1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
    2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

    二、相对定位

    不会导致元素脱离文档流，只是会让元素在原来的位置上进行偏移

    可以通过四个CSS属性设置其位置：

    • left
    • right
    • top
    • bottom
      盒子的偏移互惠对其他盒子产生影响

    三、绝对定位

    1. 宽高为auto，适应内容
    2. 包含块变化：找祖先元素中第一个定位元素,若找不到，则它的包含块是整个网页（初始化包含块）

    四、固定定位

    其他情况和绝对定位完全一样

    包含块不一样：固定为视口（浏览器的可视窗口）

    五、定位下的居中

    某个方向居中：

    1. 定宽（高）
    2. 将左右（上下）距离设置为0
    3. 将左右（上下）margin设置为auto
      绝对定位和固定定位中，margin为auto，会自动吸收剩余空间

    六、多个定位元素重叠时

    堆叠上下文

    设置z-index，通常情况下，该值越大，越靠近用户；只要定位元素设置z-index有效，z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

    补充

    • 绝对定位、固定定位元素一定是块盒
    • 绝对定位、固定定位元素一定不是浮动
    • 没有外边距合并

    练习–二级标题

    1、二级菜单.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/menu.css">

head>
<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">Lororibe.a>li>
            <li><a href="">Quibusdama>li>
            <li><a href="">Nullaunta>li>
            <li><a href="">客户服务a>
            <div class="submenu">
               <ul>
           <li>hhhli>
           <li>kkkli>
           <li>nnli>
           <li>iioli>
           <li>iaishli>
               ul>
            div>
            li>
            <li><a href="">Quama>li>
        ul>
    header>
body>
html>

    • 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
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    2、reset.css

    /*通用的  */
h1{
    font-size:1em;
    font-weight:normal;
}

ol,
ul{
    list-style:none;
}
blockquote,
q{
    quotes:none;
}
blockquote:before,
blockquote:after,
q::before,
q::after{
    content:'';
    content:none;
}

table{
    border-collapse: collapse;
    border-spacing: 0;

}
a{
    text-decoration:none ;
    color:inherit;
}

    • 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
    • 28
    • 29
    • 30
    • 31

    3、menu.css

    .clearfix::after{
content:"";
display: block;
clear:both;
}
.header{
   color:#999;
   background:#e3e4e5;
    height:40px;
    line-height: 40px;
  /*  position:fixed;
    width:100%;
    left:0;
    top:0;*/
}
/* 表示只是选中子元素 */
.header .topnav>li{
    float:left;
    /* 注意高度坍塌 */
    margin:0 20px;
    width:150px;
    text-align: center;
    /* background-color: lightblue; */
    height:40px;
    box-sizing:border-box;
    position: relative;
}
.header .topnav>li:hover{
    background: #fff;
    border:2px solid #ccc;
    border-bottom: none;
    line-height: 36px;
}
.header .topnav>li .submenu{
    text-align: left;
    line-height:1.5;
    width:300px;
    /* 不生成盒子 */
    display: none;
    border:2px solid #ccc;
    box-sizing:border-box;
    position:absolute;
    right:-2px;
    background-color: #fff;
}
.header .topnav>li:hover .submenu{
    display:block;
}
.header .topnav>li:hover::after{
    content:"";
    position:absolute;
    width:100%;
    height:5px;
    bottom:0;
    left:0;
    background: #fff;
}


    • 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
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    4、最终效果
    在这里插入图片描述

  • 相关阅读:
    axmol引擎支持构建WASM了，非常简单
    25.10 MySQL 约束
    MFC 多文档程序的基本编程
    java 基于微信小程序的饭店外卖点餐系统 uniapp小程序
    【牛客网-公司真题-前端入门篇】——小米秋招笔试-前端
    【GO语言编程】（三）
    mysql 中 varchar 和 text 的区别
    Cartesi 2022 年 11 月回顾
    在 C# CLR 中学习 C++ 之了解 namespace
    学习UI设计有哪些入门的小技巧
  • 原文地址：https://blog.csdn.net/qq_62217723/article/details/126441308