前端 HTML/CSS （十）

灰太狼 2023-01-01 08:59 84阅读 0赞

我们说float是半脱离文档流（块状元素重叠，行内元素不重叠）。

定位是指元素移动到哪里，允许元素相对于某个基准进行移动。

**普通文档流**、浮动（半脱离文档流）、定位（脱离文档流）

格式：`position: value`

*  `static`，默认值，正常的生成元素框，块级元素生成矩形框、行内元素生成一个或多个行框。
 *  `relative`，相对定位。相对于元素自身的本来的位置进行定位。
    
    可以使用top、bottom、left、right来移动元素。
    
    值如果是正数那么向它所在的反方向在走，负数是向它自己的方向在走。
    
     *  top，指定了定位元素上边界相对于正常位置的上边界的偏移量。（正数向下、负数向上）
     *  bottom，指定了定位元素下边界相对于正常位置的下边界的偏移量。（正数向上、负数向下）
     *  left，指定了定位元素左边界相对于正常位置的左边界的偏移量。（正数向右、负数向左）
     *  right，指定了定位元素右边界相对于正常位置的右边界的偏移量。（正数向左、负数向右）
    
    **注意：**
    
    1.  同时使用left、right，则left生效。
    2.  同时使用top、bottom，则top生效。
    3.  相对定位之后，该元素即使移动走，其本来的位置也不会被其他元素所占据。
    4.  relative的值如果是百分比那么是相对于包含的父元素进行计算的，而不是自身。
 *  `absolute`，绝对定位，绝对定位的元素从文档流中删除，其位置相对于**容纳块**来确定。
    
     *  容纳块：绝对定位的元素的容纳块是position的属性的值不是static的最近的祖辈的元素。
     *  我们写的时候用的最多的就是将祖辈元素的position的值写为relative。
     *  如果祖辈元素的position的值都为static，那么元素的容纳块将是`初始容纳块`
        
        **初始容纳块：** 初始容纳块是根元素（`html`）的容纳块，它由浏览器建立,是窗口大小的矩形，页面的第一屏。
     *  绝对定位后，元素变成了块状元素。
     *  如果绝对定位元素中的子元素浮动将不会造成绝对定位元素的高度的塌陷。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <style> #f1{ position:absolute; border:10px solid green; } #f2{ float:left; width:100px; height:100px; border:1px solid yellow; } </style>
    </head>
    
    <body>
        <div id="f1">
            <div id="f2"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

*  同时使用四个方向的偏移属性来定位元素，但是width和height为auto时，将会自动计算宽度和高度。也就是会被拉开（`top:0;bottom:0;left:0;right:0`）
 *  垂直、水平居中（absolute可以用来垂直居中）
    
    1.  父元素设置`position: relative;`
    2.  子元素设置`position: absolute;`
    3.  子元素设置`top: 50%、left: 50%`（这个时候的50%相对于父元素的宽度和高度）
    4.  子元素设置自身的`margin-top`和`margin-left`的值（这些值是自身的宽度和高度的一半）

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <style> #z { width:500px; height:500px; border:1px solid pink; position:relative; } #z1{ width:100px; height:100px; border:1px solid red; position: absolute; left:50%; margin-left:-50px; top:50%; margin-top:-50px; } </style>
    </head>
    
    <body>
       
    
        <div id="z">
            <div id="z1"></div>
        </div>
    </body>
    
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]

*  最小权限原则：  
    BBS（论坛）、CRM（客户管理系统）、ERP（资源管理计划系统）、SNS（社交）、blog（博客）、CMS（内容管理系统）
 *  块状元素的宽度默认是父元素的百分之百。

> 二级菜单的制作：
> 
> display: none; 给子元素。
> 
> display: block; 给父元素。

**遮罩层**

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]  
**遮罩层上面放内容：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .nav { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .3); } .nav .content { width: 400px; height: 400px; line-height: 400px; /* border: 1px solid red; */ background-color: #fff; margin: 200px auto; text-align: center; font-size: 0; } .nav .content img{ vertical-align: middle; } </style>
    </head>
    <body>
        <div class="nav">
            <div class="content">
                <img src="./img/qr-code.png" alt="">
            </div>
        </div>
        
    </body>
    </html>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/5e8a3fb000884fa9938fca738e1a3e54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210101211725397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210101211807131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210101211833899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70