当前位置： 首页 > news >正文

css中BFC

news 2025/7/11 16:18:02
  • css BFC
    • BFC具有以下特性
    • 创建BFC的方式有多种
    • BFC的应用场景和作用
  • 扩展：
    • CSS动画
      • transition: 过渡动画
      • animation / keyframes
      • transform都有哪些属性
        • 举例

css BFC

BFC，即块级格式化上下文（Block Formatting Context），是CSS中的一种渲染机制。

它是指一个独立的渲染区域，拥有一套自己的渲染规则，内部元素的布局不会影响到外部元素。

IE下为 Layout ， 可通过 zoom:1 触发

BFC具有以下特性

  1. 内部的Box在垂直方向上一个接一个地放置。
  2. Box在垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box之间的外边距会发生重叠。
  3. 每个盒子（Box）的左外边缘（margin-left）与包含块（Containing Block）的左边界相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个独立容器，内部元素的布局不会影响到外部元素。

创建BFC的方式有多种

  1. 根元素<html>本身就是一个BFC。
  2. 使用float属性为元素设置浮动。
  3. 使用position: absolute或position: fixed将元素的位置脱离正常文档流。
  4. 使用display: inline-block、display: table-cell等让元素变成块级盒子。
  5. 使用overflow属性设置为非visible值，如overflow: auto、overflow: hidden。

BFC的应用场景和作用

  1. 解决内外边距重叠问题：当两个垂直相邻的块级元素存在margin时，它们的垂直外边距会发生重叠。将其中一个元素包裹在一个新的BFC中，可以避免外边距重叠的问题。
  2. 清除浮动：当父元素包含浮动的子元素时，父元素的高度会塌陷，导致样式布局混乱。将父元素设为BFC，可以触发父元素的自身高度计算，从而清除浮动带来的影响。
  3. 阻止文本环绕：当有浮动元素存在时，其他内容会围绕着浮动元素排列，可能破坏布局。创建一个父元素并设置为BFC，可以阻止文本环绕浮动元素。

通过使用BFC，我们可以更好地控制元素的布局和渲染效果，避免一些常见的布局问题和样式冲突。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

扩展：

CSS动画

transition: 过渡动画
  • transition-property : 属性
  • transition-duration : 间隔
  • transition-timing-function : 曲线
  • transition-delay : 延迟

常用钩子: transitionend

animation / keyframes
  • animation-name : 动画名称，对应 @keyframes
  • animation-duration : 间隔
  • animation-timing-function : 曲线
  • animation-delay : 延迟
  • animation-iteration-count : 次数
    • infinite : 循环动画
  • animation-direction : 方向
    • alternate : 反向播放
  • animation-fill-mode : 静止模式
    • forwards : 停止时，保留最后⼀帧
    • backwards : 停止时， 回到第⼀帧
    • both : 同时运用 forwards / backwards

常用钩子: animationend

transform都有哪些属性

CSS中的transform属性用于应用2D或3D转换效果，它可以改变元素的位置、旋转、缩放和倾斜等。

以下是一些常见的transform属性：

  1. translate()：平移元素，即移动元素在水平和垂直方向上的位置。
  2. rotate()：旋转元素，按指定角度顺时针旋转元素。
  3. scale()：缩放元素的大小，可以分别指定水平和垂直方向上的缩放比例。
  4. skew()：倾斜元素，可分别指定水平和垂直方向的倾斜角度。
  5. matrix()：使用矩阵变换来自定义元素的转换，可以实现多种不同的变换效果。
  6. perspective()：设置透视观察点，用于创建3D效果。
  7. rotateX()、rotateY()、rotateZ()：分别围绕X轴、Y轴和Z轴旋转元素。
  8. scaleX()、scaleY()、scaleZ()：分别在X轴、Y轴和Z轴方向上缩放元素。
  9. skewX()、skewY()：分别在X轴和Y轴方向上倾斜元素。
  10. translateX()、translateY()、translateZ()：分别在X轴、Y轴和Z轴方向上平移元素。

这些属性可以单独使用，也可以组合使用来实现复杂的转换效果。

同时，它们还可以与过渡（transition）或动画（animation）等CSS特性结合使用，创建平滑的过渡和动画效果。

需要注意的是，transform属性只会影响元素的视觉渲染，而不会影响元素的布局和文档流。这意味着通过transform属性应用的转换效果不会改变元素的占据空间和相互之间的位置关系。

举例

CSS中的transform属性可以用于应用2D或3D转换效果。以下是常见的transform属性及其示例：

  1. translate()：平移元素，即移动元素在水平和垂直方向上的位置。

    示例：transform: translate(100px, 50px);

  2. rotate()：旋转元素，按指定角度顺时针旋转元素。

    示例：transform: rotate(45deg);

  3. scale()：缩放元素的大小，可以分别指定水平和垂直方向上的缩放比例。

    示例：transform: scale(2, 1.5);

  4. skew()：倾斜元素，可分别指定水平和垂直方向的倾斜角度。

    示例：transform: skew(30deg, -10deg);

  5. matrix()：使用矩阵变换来自定义元素的转换，可以实现多种不同的变换效果。

    示例：transform: matrix(1, 0.5, -0.5, 1, 0, 0);

  6. perspective()：设置透视观察点，用于创建3D效果。

    示例：transform: perspective(500px);

  7. rotateX()、rotateY()、rotateZ()：分别围绕X轴、Y轴和Z轴旋转元素。

    示例：transform: rotateX(45deg);

  8. scaleX()、scaleY()、scaleZ()：分别在X轴、Y轴和Z轴方向上缩放元素。

    示例：transform: scaleX(1.5);

  9. skewX()、skewY()：分别在X轴和Y轴方向上倾斜元素。

    示例：transform: skewX(30deg);

  10. translateX()、translateY()、translateZ()：分别在X轴、Y轴和Z轴方向上平移元素。

    示例：transform: translateX(100px);

这些属性可以单独使用，也可以组合使用来实现复杂的转换效果。同时，它们还可以与过渡（transition）或动画（animation）等CSS特性结合使用，创建平滑的过渡和动画效果。

相关文章：

css中BFC

css BFC BFC具有以下特性创建BFC的方式有多种BFC的应用场景和作用 扩展&#xff1a; CSS动画 transition: 过渡动画animation / keyframestransform都有哪些属性 举例 css BFC BFC&#xff0c;即块级格式化上下文&#xff08;Block Formatting Context&#xff09;&#xf…...

编程日记 2023/12/21 6:34:41

华为OD机试 - 小朋友来自多少小区（Java JS Python C）

题目描述 幼儿园组织活动，老师布置了一个任务： 每个小朋友去了解与自己同一个小区的小朋友还有几个。 我们将这些数量汇总到数组 garden 中。 请根据这些小朋友给出的信息，计算班级小朋友至少来自几个小区？ 输入描述 输入：garden[] = {2, 2, 3} 输出描述 输出：7 备…...

编程日记 2023/12/21 6:33:40

前端：NPM的介绍和使用

一、NPM的介绍 NPM是Node.js的包管理器&#xff0c;用于管理Node.js的包NPM提供了方便的方式来安装、管理和分享Node.js的包 二、NPM的使用 1. 安装NPM 要使用NPM&#xff0c;首先需要安装Node.js。安装完成后&#xff0c;可以在命令行中运行以下命令来检查Node.js和NPM是否…...

编程日记 2023/12/21 6:32:38

力扣57. 插入区间

双指针法 思路&#xff1a; 用待插入区间左右边界初始化双指针 left 和 right&#xff1b;遍历待归并区间&#xff1a; 如果元素整体边界在 [left, right] 左侧&#xff08;item[1] < left&#xff09;&#xff0c;则将给元素插入结果数组中&#xff1b;如果元素整体边界在…...

编程日记 2023/12/21 6:30:37

Linux c++开发-11-Socket TCP编程简单案例

服务端&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <netinet/in.h> #include <sys/types.h>#include <errno.h>int main(void) {//1.socketint server_sock socket(A…...

编程日记 2023/12/21 6:29:35

ros2机器人常规控制流程

The joint_state_publisher reads the robot_description parameter from the parameter server, finds all of the non-fixed joints and publishes a JointState message with all those joints defined.也就是说如果我们不需要控制机器人运动&#xff0c;只需要一个节点就可…...

编程日记 2023/12/21 6:28:34

分布式全局ID之雪花算法

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 雪花算法 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、什么是雪花算法&#xff1f…...

编程日记 2023/12/21 6:27:33

拿到服务器该做的事和升级docker engine

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-pluginsudo -i # 切换到 root 用户apt update -y # 升级 packagesapt install wget curl sudo vim git -y # Debian 系统比较干净&#xff0c;安装常用的软件 安装docker …...

编程日记 2023/12/21 6:24:31

【VScode和Leecode的爱恨情仇】command ‘leetcode.signin‘ not found

文章目录 一、关于command ‘leetcode.signin‘ not found的问题二、解决方案第一&#xff0c;没有下载Nodejs&#xff1b;第二&#xff0c;有没有在VScode中配置Nodejs第三&#xff0c;力扣的默认在VScode请求地址中请求头错误首先搞定配置其次搞定登入登入方法一&#xff1a;…...

编程日记 2023/12/21 6:21:28

mangokit：golang web项目管理工具，使用proto定义http路由和错误

文章目录 前言1、mangokit介绍1.1 根据proto文件生成http路由1.2 根据proto文件生成响应码1.3 使用wire来管理依赖注入 2、mangokit实现2.1 protobuf插件开发2.2 mangokit工具 3、使用示例3.1 创建新项目3.2 添加新的proto文件3.3 代码生成 前言 在使用gin框架开发web应用时&a…...

编程日记 2023/12/21 6:20:28

微信小程序实现一个简单的登录功能

微信小程序实现一个简单的登录功能 功能介绍login.wxmllogin.jsuserInfo.wxmluserInfo.js解析 功能介绍 微信小程序实现一个简单的登录功能。包括一个登录页面和一个用户信息展示页面。在登录页面中输入用户名和密码&#xff0c;点击登录按钮进行验证&#xff0c;如果验证成功&…...

编程日记 2023/12/21 6:18:26

whisper深入-语者分离

文章目录 学习目标&#xff1a;如何使用whisper学习内容一&#xff1a;whisper 转文字1.1 使用whisper.load_model()方法下载&#xff0c;加载1.2 使用实例对文件进行转录1.3 实战 学习内容二&#xff1a;语者分离&#xff08;pyannote.audio&#xff09;pyannote.audio是huggi…...

编程日记 2023/12/21 6:17:25

LuaJava操作Java的方法

最近在学习lua&#xff0c;然后顺便看了下luaj&#xff0c;可能用的人比较少&#xff0c;网上关于luaj的文章较少&#xff0c;其中在网上找到这个博主的相关文章&#xff0c;很详细&#xff0c;对于要学习luaj的小伙伴可以两篇一起查看&#xff0c;本文在此基础上进行扩展。 …...

编程日记 2023/12/21 6:16:24

oracle怎样才算开启了内存大页？

oracle怎样才算开启了内存大页&#xff1f; 关键核查下面三点&#xff1a; 1./etc/sysctl.conf vm.nr_hugepages16384这是给了32G&#xff0c;计划sga给30G&#xff0c;一般需多分配2-4G sysctl -p生效 看cat /proc/meminfo|grep Huge啥结果&#xff1f; 这种明显是配了…...

编程日记 2023/12/21 6:15:23

【halcon深度学习之那些封装好的库函数】determine_dl_model_detection_param

determine_dl_model_detection_param 目标检测的数据准备过程中的有一个库函数determine_dl_model_detection_param “determine_dl_model_detection_param” 直译为 “确定深度学习模型检测参数”。 这个过程会自动针对给定数据集估算模型的某些高级参数&#xff0c;强烈建议…...

编程日记 2023/12/21 6:14:22

跟着我学Python进阶篇：01.试用Python完成一些简单问题

往期文章 跟着我学Python基础篇&#xff1a;01.初露端倪 跟着我学Python基础篇&#xff1a;02.数字与字符串编程 跟着我学Python基础篇&#xff1a;03.选择结构 跟着我学Python基础篇&#xff1a;04.循环 跟着我学Python基础篇&#xff1a;05.函数 跟着我学Python基础篇&#…...

编程日记 2023/12/21 6:13:21

neo4j-Py2neo使用

neo4j-Py2neo(一)&#xff1a;基本库介绍使用 py2neo的文档地址&#xff1a;https://neo4j-contrib.github.io/py2neo/ py2neo的本质是可以采用两种方式进行操作&#xff0c;一种是利用cypher语句&#xff0c;一种是使用库提供的DataTypes&#xff0c;Data类的实例需要和远程…...

编程日记 2023/12/21 6:07:16

uint29传输格式

前言 不知道谁想出来的。 反正我是想不到。 我看网上也没人讲这个。 写篇博客帮一下素未谋面的网友。 uint29 本质上是网络传输的时候&#xff0c;借用至多4字节Bytes&#xff0c;表达29位的无符号整数。 读8位数字&#xff0c;判断小于128? 是的话&#xff0c;返回末7位…...

编程日记 2023/12/21 6:04:14

Linux：终端定时自动注销

这样防止了&#xff0c;当我们临时离开电脑这个空隙&#xff0c;被坏蛋给趁虚而入 定几十秒或者分钟&#xff0c;如果这个时间段没有输入东西那么就会自动退出 全局生效 这个系统中的所有用户生效 vim /etc/profile在末尾加入TMOUT10 TMOUT10 这个就是10 秒&#xff0c;按…...

编程日记 2023/12/21 6:03:12

STM32F103RCT6开发板M3单片机教程06--定时器中断

前言 除非特别说明&#xff0c;本章节描述的模块应用于整个STM32F103xx微控制器系列&#xff0c;因为我们使用是STM32F103RCT6开发板是mini最小系统板。本教程使用是&#xff08;光明谷SUN_STM32mini开发板&#xff09; STM32F10X定时器(Timer)基础 首先了解一下是STM32F10X…...

编程日记 2023/12/21 5:56:05

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/9 12:59:42

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/11 11:33:30

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/7/6 2:44:56

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/7/6 15:59:45

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/7/7 15:35:41

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/7/10 22:09:10

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/7/7 18:25:34

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/7/6 21:51:19