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

css中BFC

news 2025/7/8 3:01:15
  • 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

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/7/7 7:23:14

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/23 15:05:31

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/7/7 22:57:31

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/6 9:01:35

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/7/6 17:40:31

针对药品仓库的效期管理问题，如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

编程新知 2025/7/4 19:44:23

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/7/6 18:42:35

SpringCloud优势

目录 完善的微服务支持 高可用性和容错性 灵活的配置管理 强大的服务网关 分布式追踪能力 丰富的社区生态 易于与其他技术栈集成 完善的微服务支持 Spring Cloud 提供了一整套工具和组件来支持微服务架构的开发，包括服务注册与发现、负载均衡、断路器、配置管理等功能…...

编程新知 2025/7/7 8:37:51