css拾遗（一）

作者：倒颠0 | 来源：互联网 | 2023-09-02 19:28

想到达的效果：由于其中嵌套不正确：解决方案：使得悬浮的标签进行脱离文本流，则不会影响原来的布局：注意同级内联标签中任意一个改变都会影响到其他标签的布局：例如其中一个margin-t

一：inline-block中不要嵌套其他block标签，不然会破坏布局



        class="hl-menu left">
            "" class-="item">菜单一
            "" class-="item">菜单二
            "" class-="item">菜单三
            class="item-div">
                "" class="item">菜单四
                class="item-set hide">
                    "">菜单四-1
                    "">菜单四-2
                    "">菜单四-3
                    "">菜单四-4

想到达的效果：

技术分享图片

由于其中嵌套不正确：

技术分享图片

解决方案：

使得悬浮的标签进行脱离文本流，则不会影响原来的布局：

        .item-div:hover .item-set{
            display: block;
            position: absolute;　　　　//相对自己（body）进行页面排布，脱离文本流
        }

        .item-div .item-set a{
            display: block;
            background-color: #4cae4c;
        }

注意同级内联标签中任意一个改变都会影响到其他标签的布局：

例如其中一个margin-top:10px;会将其他的也挤下来。解决办法是将该标签float设置，就不在影响同级标签

二：absolute实现后台页面布局：

技术分享图片

使用position是元素脱离文本流，然后进行页面布局：

    class="pg-body">
        class="menus">

        
        class="content">
            "height: 2000px;">

左侧布局：

        .pg-body .menus{
            width: 200px;
            background-color: #4cae4c;
            position: absolute;
            bottom: 0px;
            top: 48px;
        }

右侧布局：

        .pg-body .content{
            position: absolute;
            top: 48px;
            bottom: 0px;
            right: 0px;
            left: 200px;
            background-color: #1b6d85;
            overflow-y: scroll;
            overflow-x: hidden;
        }

css拾遗（一）

推荐阅读

python
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
python
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
python
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
import
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
import
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
import
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
import
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
import
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
match
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
match
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
match
CentOS 7部署KVM虚拟化环境之一架构介绍

本文介绍了CentOS 7部署KVM虚拟化环境的架构，详细解释了虚拟化技术的概念和原理，包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]

蜡笔小新 2023-12-12 21:38:57
blob
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
blob
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
input
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
input
解析GRE报文长度的方法及实现步骤

本文介绍了一种解析GRE报文长度的方法，通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]

蜡笔小新 2023-12-12 20:55:05

倒颠0

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章