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

css中BFC

news 2025/10/30 23:17:34
  • 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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/10/30 9:17:49

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/10/29 14:44:33

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/10/26 14:58:46

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/10/27 11:51:48

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/10/28 16:34:01

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/10/29 4:35:19

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41