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

css中BFC

news 文章来源：https://blog.csdn.net/BradenHan/article/details/135007148 2024/11/20 7:11:37
  • 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

数据库故障Waiting for table metadata lock

场景&#xff1a;早上来发现一个程序&#xff0c;链接mysql数据库有点问题&#xff0c;随后排查&#xff0c;因为容器在k8s里面。所以尝试重启了pod没有效果 一、重启pod: 这里是几种在Kubernetes中重启Pod的方法: 删除Pod,利用Deployment重建 kubectl delete pod mypodDepl…...

编程日记 2023/12/21 5:54:03

Springboot数据校验与异常篇

一、异常处理 1.1Http状态码 HTTP状态码是指在HTTP通信过程中&#xff0c;服务器向客户端返回的响应状态。它通过3位数字构成&#xff0c;第一个数字定义了响应的类别&#xff0c;后两位数字没有具体分类作用。以下是常见的HTTP状态码及其含义&#xff1a; - 1xx&#xff08;信…...

编程日记 2023/12/21 5:48:57

第三十六章 XML 模式的高级选项 - 创建子类型的替换组

文章目录 第三十六章 XML 模式的高级选项 - 创建子类型的替换组创建子类型的替换组将子类限制在替换组中 第三十六章 XML 模式的高级选项 - 创建子类型的替换组 创建子类型的替换组 XML 模式规范还允许定义替换组&#xff0c;这可以是创建选择的替代方法。语法有些不同。无需…...

编程日记 2023/12/21 5:46:55

堆与二叉树（上）

本篇主要讲的是一些概念&#xff0c;推论和堆的实现&#xff08;核心在堆的实现这一块&#xff09; 涉及到的一些结论&#xff0c;证明放到最后&#xff0c;可以选择跳过&#xff0c;知识点过多&#xff0c;当复习一用差不多&#xff0c;如果是刚学这一块的&#xff0c;建议打…...

编程日记 2023/12/21 5:44:54

HBase查询的一些限制与解决方案

Apache HBase 是一个开源的、非关系型、分布式数据库&#xff0c;它是 Hadoop 生态系统的一部分&#xff0c;用于存储和处理大量的稀疏数据。HBase 在设计上是为了提供快速的随机读写能力&#xff0c;但与此同时&#xff0c;它也带来了一些查询上的限制&#xff1a; 没有SQL支持…...

编程日记 2023/12/21 5:43:52

软件开发 VS Web开发

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 目录 介绍&#xff1a; 角色和职责&#xff1a; 软件开发人员&#xff1a; Web开发人员&#xff1a; 技能&#xff1a; 软件开发人员&#xff1a; Web开发人…...

编程日记 2023/12/21 5:42:51

基于Springboot的旅游网站设计与实现（论文+调试+源码）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…...

编程日记 2023/12/21 5:38:47

【从零开始学习--设计模式--策略模式】

返回首页 前言 感谢各位同学的关注与支持&#xff0c;我会一直更新此专题&#xff0c;竭尽所能整理出更为详细的内容分享给大家&#xff0c;但碍于时间及精力有限&#xff0c;代码分享较少&#xff0c;后续会把所有代码示例整理到github&#xff0c;敬请期待。 此章节介绍策…...

编程日记 2023/12/21 5:36:45

条款6：若不想使用编译器自动生成的函数，就该明确拒绝

有些场景我们不需要编译器默认实现的构造函数&#xff0c;拷贝构造函数&#xff0c;赋值函数&#xff0c;这时候我们应该明确的告诉编译器&#xff0c;我们不需要&#xff0c;一个可行的方法是将拷贝构造函数和赋值函数声明为private。 class HomeForSale { ... }; HomeForSal…...

编程日记 2023/12/21 5:31:41

零基础也能制作家装预约咨询小程序

近年来&#xff0c;随着互联网的快速发展&#xff0c;越来越多的消费者倾向于使用手机进行购物和咨询。然而&#xff0c;许多家装实体店却发现自己的客流量越来越少&#xff0c;急需一种新的方式来吸引顾客。而开发家装预约咨询小程序则成为了一种利用互联网技术来解决这一问题…...

编程日记 2023/12/21 5:30:39

12306网站为什么做不好/做网上营销怎样推广

面对win10系统的使用&#xff0c;我们总有不顺利的时候&#xff0c;特别是刚从Win7/Win8.1升级到Windows10后&#xff0c;偶尔也会遇到Win10应用商店打不开的问题发生&#xff0c;怎么来解决这一个问题呢&#xff1f;电脑小白表示束手无策&#xff0c;为此&#xff0c;小编特地…...

编程日记 2024/11/20 6:25:35

wordpress base64/北京seo课程培训

linux 系统版本信息命令查询大全查看命令1.uname -a # 查看内核/操作系统/CPU信息2.cat /proc/cpuinfo # 查看CPU信息3.hostname # 查看计算机名4.du -sh <目录名> # 查看指定目录的大小5.查看逻辑CPU的个数&#xff1a;cat /proc/cpuinfo | grep "**processor**&qu…...

编程日记 2024/11/20 3:22:23

烟台建站模板源码/高清免费观看电视网站

1、卡方检验概述 卡方检验被誉为二十世纪科学技术所有分支中的20大发明之一，它的发明者卡尔皮尔逊是一位历史上罕见的百科全书式的学者，研究领域涵盖了生物、历史、宗教、哲学、法律。是英国著名的统计学家、生物统计学家、应用数学家，又是名副其实的历史学家、科学哲学家、…...

编程日记 2024/11/20 2:48:46

免费做任务赚钱的网站有哪些/网络推广外包公司排名

1、左下角应用程序 2、找这个Ubuntu软件 3、找添加附件 4、编解码器 5、按照我的第二行第一个点开&#xff08;自己按照名字或简介找自己的&#xff09; 6、点安装&#xff0c;可能要等好一会&#xff0c;才1.6M............. 7、然后在去试试能不能播放&#xff0c;不行的&…...

编程日记 2024/11/20 1:58:17

个人网站有什么外国广告做/免费b站在线观看人数在哪

在原有的五套主题色调上增加&#xff1a; 一、后台设置&#xff1a; 路径&#xff1a;crmeb1.5\src\pages\setting\themeStyle 例如&#xff1a;添加一个青色主题色调的 <Radio :label"6" border class"box orange">青色<i class"iconfont…...

编程日记 2024/11/20 1:52:06

重庆网站建设在哪里/网络市场调研的方法

讲师&#xff1a;庞雨秾讲师简介&#xff1a;法狗狗法律人工智能技术总监&#xff0c;伦敦大学玛丽女皇学院认知科学硕士。专注于自然语言处理方面的研究与应用&#xff0c;负责研发了包括处理垂直于法律领域的智能咨询系统、分布式非结构化文本挖掘系统等一系列基于自然语言分…...

编程日记 2024/11/20 0:35:08