浮动 消除浮动 堆叠顺序

最新推荐文章于 2024-08-17 21:04:51 发布
最新推荐文章于 2024-08-17 21:04:51 发布
阅读量27 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61886370/article/details/133953389
版权

高度塌陷：
  父元素高度由子元素撑起，给子元素设置浮动，父元素发生高度塌陷
  解决方案：
    1.给父元素设置高度
    2.给父元素清除浮动  使用伪元素清除浮动
      ::after{
        display:block;
        content:"";
        clear:both;
      }
    3.在父元素最后设置一个空的一个标签 给空标签清浮动
外边距合并：
  1.兄弟元素外边距合并
    原因：一个兄弟设置上外边距，另一个兄弟设置了下外边距
    解决：1.只给其中一个兄弟元素设置外边距
    2.给下方兄弟元素开启BFC 设置一个display:inline-block
    3.给其中一个兄弟元素设置父元素 给父元素开启BFC
  3.父子元素外边距合并
    原因：父子元素同时设置了同一方向外边距
    解决：1.给父元素设置内边距，不给子元素设置外边距
    2.给父元素设置一个border属性
    3.给父元素开启BFC overflow:hidden
BFC(Block Formatting Context)块级格式化上下文 ************
相当于是元素的一种属性，有了这种属性，容器就成为独立的渲染区域，
容器内的元素不会影响容器外的元素
1.触发BFC 
  1.html
  2.float不为none
  3.position为absolute和fixed
  4.display:inline-block 
  5.overflow不为visible auto hidden
2.作用：
  1.避免外边距重叠
  2.清除浮动(给父元素清除浮动、给兄弟元素清(会改变兄弟元素位置))
  4.两列布局(左侧定宽右侧自适应)
  5.三列布局（左右定宽 中间自适应）
CSS布局机制 定位position 1.脱不脱离文档流 2.参照点定位
  1.静态定位 默认所有元素在浏览器都是静态定位 
    position:static 
  2.相对定位 position:relative 
    特点：1.不脱离文档流 2.参照自身在浏览器位置定位
  3.绝对定位 position:absolute 
    特点:1.脱离文档流 原先位置不保留 飘在文档流上方 
    2.无论有没有父元素或者祖先元素 参照浏览器视口区域定位
    3.给父元素或者祖先元素设置定位 参照父元素或者祖先元素定位
  4.固定定位 position:fixed 
    特点：1.脱离文档流 原先位置不保留 飘在文档流上方 
    2.参照浏览器视口区域定位
  5.粘滞定位 position:sticky 
    特点：1.不脱离文档流 
    2.没有达到指定阈值之前是相对定位 达到阈值后是固定定位
z-index 更改元素堆叠顺序
    兄弟元素同时开启定位流 谁的z-index较大 谁的优先级高
    父子元素同时开启定位流：
      1.如果两个同时设置 无论父元素z-index值多大 子元素优先级高
      2.只给父元素设置 无论z-index值多大 子元素优先级高
      3.只给子元素设置 同时z-index<0 父元素优先级高
      
CSS水平垂直居中方案：
  1.通过margin挤压 给子元素设置margin 左右margin=父width-子width/2
    上下margin=父height-子height/2
  2.通过padding挤压 给父元素设置 给父元素设置border-box
  3.子绝父相 配合属性设置为0 top left bottom right 全部为0 margin:auto
  4.子绝父相 top:50% left:50% margin-left:-width/2 margin-top:-height/2
  
代码版本控制工具
  gitee 码云
个人使用：
  1.初始化本地git仓库 (首次)
    git init 
  2.新建远程仓库 (首次)
    全局配置用户名和邮箱
    git config --global user.name "willsonkang1"
    git config --global user.email "2681091754@qq.com"
  3.将本地git仓库和远程仓库进行绑定(首次)
    git remote add origin xxx.git
    查看绑定远程仓库 git remote -v
  4.git add ./git add * 跟踪文件有无修改
  5.git status 查看提交状态
  6.git commit -m '[xxxxxx]' 将暂存区文件提交到本地仓库
  7.git push origin master 将文件提交远程仓库
后续使用
  git add . 提交文件到暂存区 
  git commit -m '[xxx]' 将暂存区文件提交到本地仓库
  git push origin master 将文件提交到远程仓库
邀请大家加入远程仓库
  1.克隆我的远程仓库
    git clone xxxx.git 
  2.上传到远程仓库
    更新远程仓库笔记 git pull origin master

清除浮动
<!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>
        /* div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:first-child{
            float: left;
        }
        div:last-child{
            background-color: blue;
            clear: both;
        } */

        .parent{
            border: 10px solid red;
            /* 给父元素开启BFC */
            overflow: hidden;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        /* .clear{
             clear: both;
        } */
        /* 给父元素设置伪元素 */
        /* .parent::after{
            display: block;
            content: "";
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <!-- <p class="clear"></p> -->
    </div>
   
</body>
</html>



两列布局
<!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>
        .left{
            background-color: red;
            width: 300px;
            float: left;
        }
        .right{
            background-color: blue;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left">左侧定宽</div>
    <div class="right">
        自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应
    </div>
</body>
</html>



三列布局
<!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>
        .left,.right{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .center{
            background-color: blue;
            height: 600px;
            overflow: hidden;
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body>
    <div class="left "></div>
    <div class="right"></div>
    <div class="center"></div>
</body>
</html>



相对定位
<!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>
        div{
            width: 100px;
            height: 100px;
            /* 静态定位默认 */
            position: static;
        }
        div:first-child{
            background-color: red;
        }
        div:nth-child(2){
            background-color: blue;
            /* 
               相对定位  position：relative
               1.不脱离文档流
               2.参照自身在浏览器的位置
               注意：同一方向属性不可以同时设置
            */
            position: relative;
            top: 20px;
            left: 20px;
        }
        div:last-child{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>


绝对定位
<!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>
        div{
            width: 100px;
            height: 100px;
        }
        .parent:first-child{
            background-color: red;
        }
        /* div:nth-child(2){
            background-color: blue; */
            /* 
               绝对定位 position:absolute
               1.脱离文档流 原先位置不保留，飘在文档流上方 
               2.无论有没有父元素或者祖先元素，我们都是参照浏览器的视口区域定位
               3.如果我们的父元素或者祖先元素也设置定位，我们就参照父元素进行定位
            */
            /* position: absolute;
        } */
        .child{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .parent:nth-child(2){
            background-color: orange;
            position: relative;
        }
        .parent:last-child{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parent"></div>
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="parent"></div>
</body>
</html>


固定定位
<!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>
        .fixbox{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* 
               固定定位
               1.脱离文档流，原先位置不保留，飘在文档流方
               2.参考浏览器的视口区域定位 
            */
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div>段落标签</div>
    <div class="fixbox">
        <a href="#">回到顶部</a>
    </div>
    <div class="two"></div>
</body>
</html>


粘滞定位
<!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>
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        .container>div{
            width: 1200px;
            height: 700px;
        }
        .container>div:nth-child(odd){
            background-color: pink;
        }
        .container>div:nth-child(even){
            background-color: #fff;
        }
        aside.left,aside.right{
            width: 200px;
            height: 500px;
            background-color: red;
            /* 粘滞定位 不脱离文档流
               relative+fixed组合 没有达到阈值钱是相对定位，达到阈值之后是固定定位*/
            position: sticky;
            top: 50px;
        }
        aside.right{
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <aside class="right"></aside>
        <aside class="left"></aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>



水平垂直对齐方式
<!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>
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
            /* 1.通过margin挤压
            border: 1px solid red; */
            /* 2.通过padding挤压 要设置为边框盒子
            padding: 50px;
            box-sizing: border-box; */
            /*3. 给父元素设置相对定位
            position: relative; */
            /* 4.父元素相对定位 */
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* margin: 50px; */
            /* 子元素绝对定位  配合属性全部为0 margin为auto
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;    
            right: 0;
            margin: auto;     */
            /* 给子元素设置绝对定位
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px; */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>


兄弟元素堆叠shunxu
<!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>
        div:first-child{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            z-index: 5;
        }
        div:last-child{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-left: 50px;
            margin-top: -50px;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>


父子元素堆叠顺序
<!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>
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            /* z-index: 5; */
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            z-index: -2;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

靳jyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery图片堆叠左右切换插件
06-24
本篇文章将详细讲解基于jQuery实现的“图片堆叠左右切换插件”的相关知识点。 首先，我们需要理解这个插件的核心功能：它能够将多张图片并排堆叠在一起，用户可以通过点击左右导航按钮来切换展示的图片，从而达到一...
CSS3定位和浮动详解
09-24
z-index属性用于设置元素的堆叠顺序，它只对定位元素（非static）有效。值越大，元素在Z轴上的位置越靠前，即越在页面的上层。 二、浮动的概念和用法 浮动是一种特殊的定位方式，通过float属性实现。浮动元素会...
JS简单实现浮动窗口效果示例
10-21
`left`和`top`属性设置了元素在屏幕上的位置，`z-index`属性确定了元素的堆叠顺序，数值越大，元素越位于前面。此外，还使用了CSS表达式`_top:expression()`来兼容旧版IE浏览器。 接着是JavaScript部分。这部分定义...
js自动生成的元素与页面原有元素发生堆叠的解决方法
10-25
总之，面对动态生成元素与原有元素堆叠的问题，关键是要理解CSS的布局机制，合理利用浮动、清除浮动或者采用新的CSS布局技术，以及在JavaScript操作中注意DOM的更新顺序和方式。遇到问题时，应当冷静分析，从多个...
js 创建一个浮动div的代码
10-29
3. **z-index属性**: z-index属性决定了元素在页面上的堆叠顺序。在JavaScript中，可以通过style属性的setAttribut方法设置z-index值，使浮动div能够覆盖页面上的其他内容。 4. **CSS背景颜色**: JavaScript同样...
JAVA-WEB资源配置
caryeko的专栏
08-15 199
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 418
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 786
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 302
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
提升前端性能的JavaScript技巧
han2434的博客
08-14 802
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 324
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 958
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
vue-lic（三）
qq_64669006的博客
08-14 274
Vue 应用中的跨域问题通常是由于浏览器的同源策略引起的，它阻止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域问题。2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("事件名",要传递的数据)自定义监听事件。，这里因为本身就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
vue3 组合式 API：setup()
最新发布
咸鱼滚滚
08-17 832
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
微信小程序电话号码授权
qq_36022463的博客
08-16 330
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
尚品汇-前端面包屑平台属性、排序处理（三十三）
dengfengling999的博客
08-17 379
早期单一服务器，用户认证。缺点：单点性能压力，无法扩展分布式，SSO(single sign on)模式解决 ：用户身份信息独立管理，更好的分布式管理。可以自己扩展安全策略跨域不是问题缺点：认证服务器访问压力较大。业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}
总结常见报错信息
m0_68903702的博客
08-16 275
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
Web语义化及实际应用
沐爸的博客
08-13 1048
Web语义化是什么？有什么作用？实际开发中如何运用呢？一起了解下吧！
基于 Konva 实现Web PPT 编辑器（一）
~朴：shu的博客
08-15 922
Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva 提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能，本应用基于 konva 实现Web PPT 编辑器，以实现设计编辑、预览、切换、动画等核心功能。
CSS理解z-index：堆叠上下文与生效条件
在CSS中，`z-index`是一个非常关键的属性，用于控制具有定位（positioned）的元素在页面上的堆叠顺序。它定义了一个元素在其父元素内的堆叠上下文中的层级。简单来说，`z-index`高的元素会覆盖`z-index`低的元素，但...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值