CSS 之你不知道的包含块

最新推荐文章于 2024-04-07 01:00:50 发布
最新推荐文章于 2024-04-07 01:00:50 发布
阅读量162 收藏
点赞数
分类专栏： 前端那些事儿 文章标签： css 前端 布局 包含块 CSS世界
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wbookfrank/article/details/100860222
版权

前端圈太浮躁了。追逐各种新技术的过程中，发现自己总是一知半解，怎么才能摆脱魔咒、顿悟得道？在《CSS 世界》一书中，张老师说「广大前端开发人员有必要静下心来认识 CSS 2.1 的世界观」。

martinageradams
关注
专栏目录
前端面试笔记-CSS篇
qq_46354688的博客
03-04 805
目录选择器的权重和优先级盒模型标准盒模型和替代模型（IE）块级盒子与内联盒子隐藏一个元素Position文档流定位z-index浮动如何清除浮动包含块与控制框BFC外边距折叠（合并外边距与BFC、margin叠加）margin塌陷BFC 可以包含浮动的元素（清除浮动）BFC 解决文字环绕的问题层叠上下文层叠水平层叠上下文的特性DisplayFlex布局Grid布局各种居中块级元素水平居中（左右居中）块级元素垂直居中负外边距绝对居中容器内居中**视区内居中**变形（Transform）flex块中不定行的文字
CSS-包含块
wust_cyl的博客
05-20 3020
包含块:是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。可以把包含块理解成一个参考系。那么怎么确定包含块的所属关系了，简单的说谁是谁的包含块，谁是谁的参照系。1：根元素所在的包含块被成为初始包含块，在xhtml中根元素是html,对于连续媒体设备，初始包含块的大小等于视口...
前端学习笔记：深入解析包含块
最新发布
lzhlzhlzh_lzh的博客
04-07 468
前端学习笔记：深入解析包含块
包含块
xiaowei的博客
03-03 1950
前端技术研究一：包含块 给一个div设置它的宽度为100px，然后再设置它的padding-top为20%。问：现在这个div有多高？.inner{ position: absolute; width: 100px; padding-top: 20%; } .mid{ width: 200px; } .wrap{ position:
html怎么做包含块,字节前端都知道的CSS包含块规则
weixin_42315701的博客
06-16 212
你是否曾对CSS中的百分比单位非常疑惑?是否简单认为百分比的基准值就是所在元素的宽高?本文将从包含块角度帮助大家理解记忆百分比单位的计算规则，便于巧妙运用包含块规则解决实际开发中的布局问题!一、确立包含块包含块是一个非常重要的概念，通常包含块是当前元素的最近祖先元素的内容区，包含块的形成依赖于CSS position属性。在我们常用的场景中，position的值有relative、absolute...
你不知道的 CSS 之包含块
随风浅入画
02-06 202
你不知道的 CSS 之包含块
CSS 的包含块内容详解
07-24
CSS 的包含块内容详解
CSS3透明方块碎片登录框特效
06-24
2. **透明度（Opacity）和 RGBA 颜色**：CSS3允许我们设置元素的透明度，通过opacity属性或者使用RGBA颜色值（包括红、绿、蓝和透明度四个通道），可以创建出透明的方块效果。在这个登录框中，方块可能通过调整透明...
jQuery+css实现炫目的动态块漂移效果
10-22
在动态块漂移效果的实现中，CSS用于设置块的样式，包括背景颜色、尺寸、位置和阴影等。 3. DOM操作：文档对象模型（DOM）是HTML和XML文档的编程接口。通过jQuery，我们可以方便地进行DOM元素的创建、插入、删除等...
【CSS】基本重要概念：包含块
ColdCoder的博客
12-27 1799
什么是包含块？ 关于包含块的定义，引用MDN定义： 一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。 由根元素生成的包含块叫做 初始包含块（initial containing block）。 包含块的作用 包含块内包含的元素的尺寸（width\height\padding\margin）及位置绝对定位元素的偏移值（position: absolute\fixed时的top\bottom\right
关于包含块（containing block）的理解
web_xyk的专栏
04-22 1537
概念：元素的尺寸和位置的计算往往是由该元素所在的包含块决定的，包含块就是为它里面包含的元素定位提供一个初始位置，它是一片长方形的区域。一般元素用到position定位时，因需要确定定位的初始位置，就需要清楚什么是包含块。（为便与理解，个人做了简单的描述，不一定是标准解释）。包含块：1、在HTML中，html元素就是一个包含块（即初始包含块）。2、如果元素的定位（position）为：relativ...
css笔记：包含快的理解
weixin_45295262的博客
11-17 747
指出错误观念 许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！ 一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。 下面我们看看盒模型： 当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域： 内容区 内边距区 边框区 外边距区 什么是包含块？ 包含块有分为根元素包含块和其他元素的包含块。 根元素包含块 根元素html的包含块是一个矩形,叫做初始化包含块(ini
你不知道的 CSS 之 包含块 ! 最细讲解，一听就懂！
柑橘乌云_
01-03 1525
没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。
@supports
weixin_33698043的博客
11-27 361
CSS3条件判断——@supports CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分，其一是“@media”规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；其二是“@supports”规则，主要用来代替前面常用的...
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
snn1410的专栏
03-08 2189
1. removeClass() - 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元
什么是CSS包含块（Containing Block）
bin1813的博客
04-29 819
包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。 包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。  
上手一个 Vue 的入门项目 Markdown 在线简历 ( 一 )
前端老王
06-05 3054
项目详细描述 见首发帖 https://learnku.com/vuejs/t/44056 项目名称 1024 RESUME 项目地址 网站 https://resume.1024.cool GitHub https://github.com/1024-cool/markdown-resume 项目背景 Jack 要开始新的求职生涯哟。求职大概几件事情得做。 简历 面试 合同 看了很多模板都不喜欢。市面上符合程序员的简历模板真的太少了。 功夫不负有心人。最终找到了一个——冷熊简历 http://cv
Vue Cli 4 引入 Cesium 配置
前端老王
08-22 1522
一个简单的 Vue Cli 4 引入 Cesium 的架子，可以直接拉取项目，自己扩展。欢迎试用，可以 Star 哟！
前端 npm 之淘宝镜像配置，为你的开发加速！
前端老王
10-31 632
淘宝 npm 地址： http://npm.taobao.org 1.临时使用(当前项目配置) npm --registry https://registry.npm.taobao.org 2.持久使用(全局配置) npm config set registry https://registry.npm.taobao.org 配置后可通过下面方式来验证是否成功 npm config get re...
CSS包含块解析：定位与百分比计算的关键
"前端 CSS 之包含块，用于确认定位以及百分比" 在前端 CSS 开发中，理解包含块（Containing Block）的概念至关重要，因为它直接影响到元素的尺寸、位置以及使用百分比值时的计算方式。包含块是CSS布局中的一个核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值