程序员经验分享-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详解 的相关文章

  • rvest 和 NHL 统计数据的 CSS 选择器问题

    我想从 hockey reference com 中抓取数据 特别是从以下链接中抓取数据 https www hockey reference com leagues NHL 1991 html https www hockey refer

  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单

  • 使用 CSS Grid，从任何地方滚动 div（不使用 jQuery 插件）

    div 怎样才能 scroll content https jsfiddle net blehmanade x1k3rhj7 33 可以从页面上的任何位置滚动吗 现在 scroll content仅当鼠标位于其上方时才可滚动 但是 当鼠标位

  • 如何在非 CSS3 浏览器上制作圆角？

    我知道在这种情况下我必须使用图像 每个角一个 例如 如果我需要给定元素周围有一个 4px 的纯蓝色边框 边框半径为 8px 我相应地设计了四幅图像 左上角 png 右上角 png 左下角 png 右下角 png 如果可能的话 我应该如何实现

  • jQuery 位置 DIV 固定在滚动顶部

    我有一个相当长的页面 在布局的菜单中 有一个弹出菜单 我希望菜单的弹出部分显示在页面顶部 即使用户已将菜单栏滚动到视图之外 这是菜单的 HTML div div Compare up to 3 cards side by side Clic

  • grid-auto-columns 在 Firefox 中不能完全工作

    我不明白为什么 DIV 3 的大小与 DIV 1 DIV 2 的大小不同 https codepen io anon pen vaVqPW https codepen io anon pen vaVqPW grid display grid

  • 自动调整Google网站嵌入代码的高度（html）

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协

  • Twitter bootstrap：居中缩略图

    我有一个缩略图列表 它们有固定的尺寸 我希望连续缩略图的数量随着窗口的宽度而变化 使用 Twitter Bootstrap 这很容易 http jsfiddle net charlesbourasseau 5WvAL http jsfidd

  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然？

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m

  • jQuery 或 Javascript - 如何禁用窗口滚动而不溢出：隐藏；

    您好 是否可以在不使用的情况下禁用窗口滚动overflow hidden 当我悬停一个元素时 我试过 chat content on mouseenter function document scroll function e if e h

  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d

  • * 到底有多慢？

    大家都表示 选择器非常慢 但它到底有多慢呢 我总是试图避免它 但有时它非常有用 例如 h1 margin top 1em 简单来说 通用选择器 速度只与页面上的元素一样慢 Since 从右到左匹配浏览器获取每个元素并将其与所有候选规则进行匹

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这

  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作

  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用

  • CSS 网格框架中的间距有什么作用？

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种

  • 如何使用 CSS 媒体查询检测设备方向？

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅

  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会

  • 适用于移动设备的响应式订单确认电子邮件？

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

随机推荐

  • 按照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即可实现 或者三栏布局 两边固定

热门标签