前端女娲补天 CSS（十一） 什么是BFC

最新推荐文章于 2024-09-26 17:57:52 发布
最新推荐文章于 2024-09-26 17:57:52 发布
阅读量96 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixenon/article/details/125036682
版权

什么是BFC

BFC（Block Formatting Context），块级格式化上下文。
BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
可以用以下方式开启BFC：
overflow: hidden
display: inline-block
position: absolute
position: fixed

BFC可以解决的问题

margin外边距重叠问题
父元素塌陷

LiXenon
关注
专栏目录
女娲补天故事flash动画
07-24
女娲补天故事flash动画是一款新人教版三年级下册语文动画课件下载。
2女娲补天——学生学习课件
11-23
- **女娲补天**：这是一个流传于中国古代的著名神话故事。女娲是中国古代神话中的创世女神之一，被视为人类的母亲。 ### 二、故事情节概述 #### 1. 故事起源 - 在遥远的古代，水神共工与火神祝融发生了一场激烈的...
前端女娲补天 CSS（一） 什么是CSS盒模型
LiXenon的博客
05-28 136
什么是CSS盒模型 css的元素都可以被看成是一个盒子，这就叫盒模型。 一般情况下盒模型由margin border padding content组成。 盒模型的两种类型 盒模型分为标准盒模型和IE盒模型两种。 标准盒模型（默认）的width和height是content的宽高 而IE盒模型的width和height是content + padding + border的宽高 box-sizing box-sizing是指盒模型的类型 标准盒模型box-sizing:content-box IE盒模型b
前端女娲补天 CSS（五） 什么是雪碧图
LiXenon的博客
05-28 224
什么是雪碧图 雪碧图（sprites）将网页中能够用到的一些图片整合到一张图片中，再使用背景图片属性定位需要的图片内容。 这个是虚假的雪碧图 雪碧图用到的属性 width，height（容器宽度） background-image background-repeat（设置为no-repeat） background-position（left，top的像素或百分比定位）进行背景定位 background-size（x，y像素或比例大小）一般是长宽等比例缩放 进行设置 雪碧图的优点 减少图片http请求，只
前端女娲补天 CSS（七） 什么是DOM树，什么是CSS树，什么是渲染树
LiXenon的博客
05-29 783
什么是BOM树 DOM是什么？DOM是文档对象模型，是一个树形结构，根节点是Document, 用于存储文档中的节点对象。可以通过DOM访问HTML元素的内容与联系，也可对其进行修改。 什么是CSS树 CSS树，又称CSSOM（CSS Object Model）是一个树形的文档结构，以树存储了各个选择器的映射以及相关样式属性，根节点是html。 什么是渲染树 构造DOM树，CSSOM树的时候也在同步构造渲染树（Render Tree），渲染树由DOM和CSSOM结合而成，通过DOM中的可视节点构造，并同时包
前端女娲补天 CSS（六） 什么是重排，什么是重绘，怎么减少重排重绘
LiXenon的博客
05-29 201
什么是重排 在影响了元素的几何信息后(元素的位置和大小)，可能会同时影响其他元素的几何信息，浏览器需要重新计算各元素在的几何属性，相关的渲染树会被废弃并重构，这个过程叫做重排。 什么是重绘 在渲染树重构或某一元素样式改变时发生。将渲染树的各个节点渲染为屏幕上的实际像素。 重排一定触发重绘，重绘不一定触发重排。 怎么减少重排重绘 样式集中改变，使用class统一改变style或者使用cssText。 什么是cssText？ cssText可以在JS的DOM操作中修改元素的style样式，写法是： doc
前端女娲补天 CSS（十） position有哪些属性
LiXenon的博客
05-29 95
position有哪些属性 static（默认）：元素出现在正常的文档流中 没有left top等 没有z-index absolute：完全脱离文档流 相对最近一个有定位的父元素偏移，直到document块元素 在未设置宽度时撑开宽度 relative：不脱离文档流（保留原来位置，不会占用新位置） fixed：基于浏览器窗口固定定位 可用来做一些导航栏 也可以做回到页面开头的按钮 sticky：在视口内relative，视口外fixed 可以做一些头部或者搜索框导航栏之类的（父元素overflow:hi
前端女娲补天 CSS（九） 隐藏元素的方式
LiXenon的博客
05-29 87
隐藏元素的方式 display：none（不会渲染，不会响应） visibility：hidden（占据空间，不会响应绑定事件） opacity：0（占据空间，会响应绑定事件） position：absolute（移到可视区外，野路子哈哈哈） z-index：负值 transform：scale(0,0)（占据空间，不会响应绑定事件） ...
前端女娲补天 CSS（三） 有哪些flex属性
LiXenon的博客
05-28 86
有哪些flex属性 父元素 flex-direction：flex排列方向与顺序，值有row（横向 默认）| row-reverse | column（纵向） | column-reverse flex-wrap: 项目是否换行，值有nowrap（不换行 默认）| wrap | wrap-reverse（第一排紧贴底部） flex-flow: flex-direction和flex-wrap的集合，默认值row nowrap justify-content（横轴排列）: flex-start
前端女娲补天 CSS（八） css过渡，变换和动画有哪些属性
LiXenon的博客
05-29 97
过渡 transition（复合属性），参数有： property：参与过渡的属性，none | all | property（元素名） duration：过渡时间 timing-function：过渡动画类型, ease（默认 0-慢-快-慢） | linear（匀速） | ease-in（慢-快） | ease-out（快-慢） | ease-in-out（慢-快-慢） delay：延迟时间 变换 transform（复合属性） 2d rotate（2d旋转）：单位度数deg，正顺时针，负逆时针 tra
前端女娲补天 CSS（四）伪类有哪些，伪元素有哪些
LiXenon的博客
05-28 121
伪类有哪些 伪类定义状态。 a标签的伪类： :link :hover :active :focus :visited UI元素伪类（用于form元素）： :enabled（可选中状态） :disabled（不可选中状态） :checked（选中状态） 结构伪类： :nth-child(n) :nth-last-child(n) 倒数第n个 :first-child :last-child 伪元素有哪些 伪元素是不存在于DOM中的虚拟元素。 有::after ::before ::first-letter
女娲补天说课 (3).ppt
10-27
《女娲补天》是北师大版二年级下册语文第十四单元的一篇课文，主要讲述了中国古代神话故事中的女娲如何用智慧和勇气拯救人类的故事。这篇课文旨在通过生动的神话情节，培养学生的语言能力、思维能力和想象力，激发...
1女娲补天——学习ppt课件
11-23
### 女娲补天——学习PPT课件知识点总结 #### 一、课程背景及目标 本课程通过介绍中国古代神话故事《女娲补天》，旨在帮助学生了解中国古代文化的精髓，同时培养学生的语言能力和想象力。具体目标包括： 1. **识字...
css实现四角边框
freedms的博客
09-24 270
【代码】css实现四角边框。
css-functions伪类选择器系列一
Jinuss的博客
09-23 541
CSS伪类选择器：:is()、:not()、:where()、:has()等等介绍
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
最新发布
jjw_zyfx的博客
09-26 321
css 下拉框展示：当hover的时候展示下拉框
【H2O2|全栈】关于CSS（7）CSS基础（六）
过期的H2O2的博客
09-26 917
本系列博客将分享层叠样式表（CSS）有关的知识点。本期主要分享元素显示隐藏、透明度、溢出属性、滚动条、居中布局以及网页的部分结构的编写方法。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
【CSS】变换
千里之行，始于足下
09-23 952
变换：空间概念，平移，旋转，缩放，倾斜，案例（六面骰子，旋转照片）
"中国古代神话故事学习PPT
中国古代神话故事中，后羿射日、女娲补天、牛郎织女、夸父逐日、精卫填海、嫦娥奔月等传说故事都是人们熟知的经典故事。其中，后羿射日是一个被人们传颂的英雄故事，而女娲补天则是一个关于创世女神的传说。夸父逐日...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值