程序员经验分享-hwhale

CSS中的BFC详解

2023-11-02

在这里插入图片描述
BFC的特性和作用
1、避免外边距重叠
2、清楚浮动
3、阻止元素被浮动元素覆盖
第三条提供了布局的一种思路：左边盒子宽度固定，右边盒子宽度占满剩余的宽度，左边设置浮动，右边设置overflow：hidden即可实现
或者三栏布局，两边固定中间占满宽度，也是同样方法左右设置浮动，中间设置overflow:hidden;
https://www.bilibili.com/video/BV1nZ4y147MW/?spm_id_from=333.788

关于两栏布局 的时候如果需要占满剩余宽度是input的时候好像不成功即使设置了display：block也不行
https://blog.csdn.net/weixin_47750287/article/details/124565230
不使用bfc也可以使用两栏布局（margin-left）的作用

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

前端

CSS3

CSS中的BFC详解 的相关文章

  • 在每个打印页上重复水印？ JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你

  • 如何使用 Cypress 定位没有 id 属性的嵌套输入？

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准

  • iPhone 上的 Chrome 溢出空白页面上的内容（仅在新选项卡上，而不是重新加载）

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码

  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比？

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr

  • 当鼠标悬停在链接上时，如何在链接旁边创建弹出框？

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba

  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签

  • javascript中怪异模式的元素宽度？

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将

  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背

  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静

  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div

  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我

  • IE8 忽略 td 宽度，适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7

  • 如何在表格的 tbody/thead 部分周围创建边框？

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元

  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用

  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后

  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本

  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • 按照lockattribute来划分MESH

    网格模型基础 网格模型 一 定义 二 子集和属性缓存 2 0 子集 2 1 属性 2 2 操作 三 邻接信息 四 属性表 五 优化 六 网格的创建与绘制 6 1 创建 6 2 绘制 一 定义 网格模型是一种将物体的顶点数据 纹理 材质等信息

  • Linux内核scripts/Makefile.build文件结构

    1 默认目标 build 2 初始化obj y obj m等变量 3 include include config auto conf 内含CONFIG RING BUFFER y等变量列表 4 include scripts Kbuild

  • vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

    今天闲来无事整理了一套后台管理系统的侧边栏菜单 实现了页面刷新路由保持不变和菜单也是当前点击的高亮状态 来一起看看吧 首先 菜单数据是动态的 注意的是 id 和 路由的 name保持一致 页面刷新要用到 一级菜单不用name 因为没用到路由

  • Android开机自启动添加

    1 添加需要自启动的可以执行文件 1 可执行C文件 system core init start needInitStartService c 例如 include

  • 基于大数据的python爬虫的菜谱美食食物推荐系统

    众所周知 现阶段我们正处于一个 大数据 时代 从互联网上大量的数据中找到自己想要的信息变得越来困难 搜索引擎的商业化给市场带来了百度和谷歌这样的商业公司 网络爬虫便是搜索引擎的重要组成部分 本课题是基于Python设计的面向下厨房网站的网络

  • edge浏览器打开多个网页卡顿解决办法

    edge有时候打开了十几个页面就大量占据内存了 卡的不行 上网汇总了解决方法 具体参考以下两篇文章 一个是通过edge浏览器自身的设置修改 一个是关闭gpu相关的图形加速插件 按照以下两篇文章的方法基本就不会卡了 1 解决win10系统ed

  • Redis 与 Lua 脚本

    这篇文章 主要是讲 Redis 和 Lua 是如何协同工作的以及 Redis 如何管理 Lua 脚本 Lua 简介 Lua 以可嵌入 轻量 高效 提升静态语言的灵活性 有了 Lua 方便对程序进行改动或拓展 减少编译的次数 在游戏开发中特别

  • 16行 python代码获取音效素材

    人生苦短 我用python 声音素材资源 源码资料电子书 点击此处跳转文末名片获取 所需环境 开发环境 Python 环境 Pycharm 编辑器 模块 requests re 流程讲解 首先我们打开网址后右键选择检查 选择network

  • Visual Studio 自动补全代码

    自动补全两种方式 1 写完下面代码 双击Tab 自动补全 2 写完下面代码 回车 单击Tab 自动补全 可以在vs中自行查看 ctor 自动补全构造函数 prop 自动实现属性 cw Console WriteLine switch 自动补

  • 【边喝caffee边Caffe 】(三) Check failed: registry.count(t ype) == 1 (0 vs. 1) Unknown layer type

    自己建立一个工程 希望调用libcaffe lib 各种配置好 也能成功编译 但是运行就会遇到报错 F0519 14 54 12 494139 14504 layer factory hpp 77 Check failed registry

  • OCSVM 学习笔记

    OCSVM 学习笔记 前言 OCSVM OneClass SVM 算法是一种经典的异常检测算法 基本原理与 SVM 类似 与 SVM 关注的二分类问题不同的是 就像它的名字 OneClass SVM 那样 OCSVM 只有一个分类 这也正是

  • Excel每页都打印表头

    前言 有时候表格打印时 需要每页都打印表头 但是表格默认是只打印第一页的表头 那该如何设置呢 步骤 切换到 页面布局 打印标题 在 顶端标题行 中右侧可以选择你要打印的标题行 点击确定就欧克了 多行标题就选中多行就行 如 第1行到第3行 所

  • 上岸了，不写代码了

    上岸了 目前不搞这些东西了 不出意外的话应该不会再回来更新和回复了 各位 江湖再见

  • BugKu-Web-矛盾

    BugKu Web 矛盾 题目链接 https ctf bugku com challenges detail id 72 html 考点 PHP弱类型比较漏洞 题目源码分析 num GET num 定义一个num变量用get方法接收 if

  • VUE-鼠标移入到目标区域变成小手模样

    这是测试提的一个需求 当鼠标移入点击更多时 鼠标指针变成小手模样 其实这个东西特别简单 只是用的不多平常 我们只需要给目标区域的style样式中加入 cursor pointer 这个鼠标就好了

  • vue文件无法正常build

    如图所示 run serve后控制台没有报错 但是运行到此处直接结束 解决办法 暴力解决 直接删除node module 再输入cnpm install重新安装依赖 重新安装完成后成功运行

  • CeiT：训练更快的多层特征抽取ViT

    GiantPandaCV导语 来自商汤和南洋理工的工作 也是使用卷积来增强模型提出low level特征的能力 增强模型获取局部性的能力 核心贡献是LCA模块 可以用于捕获多层特征表示 引言 针对先前Transformer架构需要大量额外数

  • vue3 - watchEffect

    watchEffect watch watchEffect 不同点 停止侦听 effect 副作用 watchEffect的执行时机 watchEffect computed 的不同 Vue 3 watch Vue 3 computed特点

  • python金融分析小知识(30)——比较常见的pd.set_option的使用

    Hello 大家好 我是一名新来的金融领域打工人 日常分享一些python知识 都是自己在学习生活中遇到的一些问题 分享给大家 希望对大家有一定的帮助 哈喽大家好 今天我要给大家讲讲在pandas的时候过程中我们会经常遇到的DataFram

  • CSS中的BFC详解

    BFC的特性和作用 1 避免外边距重叠 2 清楚浮动 3 阻止元素被浮动元素覆盖 第三条提供了布局的一种思路 左边盒子宽度固定 右边盒子宽度占满剩余的宽度 左边设置浮动 右边设置overflow hidden即可实现 或者三栏布局 两边固定

热门标签