BFC、IFC、FFC、GFC是什么，主要解决的什么问题，哪些元素会生成BFC？在解释之前，需要先介绍 Box、Formatting Context的概念。...BFC（Block Formatting Context，块级格式化上下文）定义：BFC 是一个独立的渲染区域，在这个区域内，块级元素按照一定的规则进行布局，并且这个区域内的布局不会影响到外面的元素，外面的元素也不会干扰到它内部的布局...在 IFC 中，内联元素按照水平方向依次排列，当一行排不下时会进行换行处理，并且在垂直方向上，它们的对齐方式遵循一定的规则，比如基线对齐、顶部对齐、中部对齐等。... 在这个 段落中，几个 span 元素作为内联元素，在水平方向依次排列，并且通过 vertical-align: middle 设置了垂直方向的中部对齐方式...内联块元素的排列处理：当内联块元素（display 属性值为 inline-block 的元素）参与到内联布局中时，也遵循 IFC 的规则，比如多个内联块元素组成的导航栏，它们在水平方向排列以及垂直对齐方面都受
本篇和大家一起巩固html中的块元素和内联元素以及DIV容器。 块元素 块元素的特点是啥？块级元素在浏览器显示时，通常会以新行来开始（和结束），块级元素只能出现在body元素内。...html中的div元素就是块元素，我们看看下面的例子： DIV容器 div容器到底是什么鬼？...它还可以和CSS一同使用，所以，div元素还可用于对大的内容块设置样式属性。 div容器还有啥用途？ 布局！对！...span是什么鬼？
使元素的基线对齐到父元素的基线之上的给定长度，数值正值是基线往上偏移，负值是往下偏移，借此可以实现元素垂直方向精确对齐。）...百分比：20% （使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。）...div的实际高度比设定的行高大了，为什么呢？ 内联元素的默认对齐方式是baseline，所以此时此时span元素的基线是和父元素的基线相对齐的，而此时父元素的基线在拿呢？...由于内联元素默认基线对齐，所以字母x和span元素发生了位移以使基线对齐，导致div高度变大。而此时字母x的半行距比span元素的半行距大，大出的部分就是div的高度增加的部分。...，那为什么底部和div下边缘之间会有空隙呢？
很难理解的是，baseline有时会在字体高度的下方，见W3C规范的详细定义 内联-块元素 c c 从左到右依次是：含有流内（in-flow）内容（那个“c”）的内联-块元素，含有流内内容和...overflow: hidden的内联-块元素和不含流内内容（但内容区具有高度）的内联-块元素。...margin的边界用红线表示出来，border为黄色，padding为绿色，内容区为蓝色，每个内联-块元素的baseline用蓝线表示 内联-块元素的outer edge是其margin-box的顶边和底边...当然，正式的定义在W3C规范里都能找到 为什么vertical-align的行为是这样 我们可以更近一步看看某些场景下的竖直对齐，尤其是我们将那些可能出错的场景 居中小图标 有个烦扰着我的问题：我有一个小图标...baseline到满足它们对齐方式的位置，然后行盒的高度也会调整（左图）。
对齐方式 : left 、right、center、justify（两端点对齐） line-height : 定义行高 什么是行高，一行文字的高度，上边距和下边距的等价关系。...内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。...left、top、right、bottom是相对于当前元素自身进行偏移的 absolute： 使元素完全脱离文档流（类似于浮动） 使内联元素支持宽高 （让内联具备块特性） 使块元素默认宽根据内容决定（...让块具备内联的特性）。...） 使块元素默认宽根据内容决定（让块具备内联的特性） 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响 BFC规范 BFC即Block Formatting Contexts(块级格式化上下文
前言 不知道大家有没有注意到，我们在浏览器中，设置了一个16px的span标签，但实际却占用了21px的高度，比如下图： 1.png 浏览器默认样式 上述这个情况是由浏览器默认样式造成的，浏览器对于行级元素有默认的...4.png 果然，成为内联元素生效了。 但是在内联盒中，有一个渲染规则，就是没个内联元素后面都会由一个空白节点，而且此空白节点拥有该元素的line-height和font-size属性。...class="box">div> 效果如下： 为什么图片下面会有缝隙呢？...所以图片对齐了文字的基线，导致了下面的缝隙。 解决方法 1：设置vertical-align属性即可，把对齐方式改为top，bottom，middle都可以。...2：直接让img变为块级元素，也就没有空白节点了，但是img标签就要独占一行了。 3：直接将父元素font-size：0，字体都为0了，line-height自然也没作用了。
仅供学习，转载请注明出处 块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。...那么下面有一个想法，就是div这个块元素能不能设置为同一行呢？ 方法当然是有的，就是转化为 行内块元素，如下： ?...好了，使用display: inline-block 将div转为行内块元素之后的确可以将两个div放到一行了。...） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 ---- 下面代码演示如下： ?...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
选择器 什么是选择器：指定出想要要调整的标签 id选择器:定位到指定id的标签(#+id选择)id不能重复 <!...margin外边距与padding内边距 块元素与内联元素 块元素：会独占一行，默认宽度是填充父元素的宽度，高度是内容的高度。...可再自定义宽高 常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div 内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。...常见的内联元素有：a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span 块和内联的转换： display:block 内转块...display:inline 块转内 display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动：通过设置浮动可以到达同行的效果不用去转内联块
水平居中 margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素，而是否作用于其他内联元素因浏览器不同而不同，此处可能为内联元素，所以避免使用。...text-align:center; 可以让绝大多数的对象居中对齐，并且这个属性也获得了几乎全部浏览器的支持。...实际上，这个属性定义的是块级对象内部文字的对齐方式，内部的文字或者图像一般是内联对象。 2....在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 3....div> div> div>
块级元素负责结构，内联元素负责内容！ 块级元素 一个水平流上只能单独显示一个元素，因此理论上都可以配合clear属性来清除浮动带来的影响。...利用inline-block的包裹特性即可实现（内容过多会自动沾满整行，且分行展示（ 水平对齐：内联元素使用text-align；块级元素使用margin。...如果内部没有块级元素或者块级元素没有设置宽度，则“最大宽度”实际上是最大的连续内联盒子的宽度。 连续内联盒子：全部都是内联级别的一个或一堆元素，中间没有任何的换行标签或其他的块级元素。...margin 为块级元素左中右对齐而设计的！text-align 为内联元素左中右对齐而设计的！！！...margin 的初始值大小是0，下述可实现块级元素右对齐！
而不是把市面上针对样式居中的所有「奇技淫巧」都囊括到一起。...;内在盒子:块级容器盒子 inline-block:外在盒子：内联盒子;内在盒子:块级容器盒子 inline:外在盒子：内联盒子;内在盒子：内联盒子 既然有了前面的针对元素内/外盒子的描述，我们很自然的就联想到...margin属性的auto计算就是为「块级元素左中右对齐」而设计的。...// xx 会被后续的特定的类名替换 div> 块1 div> div> 块2 div> div>...以到达将文本信息，放置到中间位置的效果。
块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。...上下、padding上下） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式...解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height...属性值设置子元素垂直对齐方式 这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素
，和sup标签一样的效果 top对象的顶端与所在容器的顶端对齐 text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐 text-bottom...让元素的内容将元素撑高 鼠标样式cursor 定义鼠标的样式cursor:pointer default默认，pointer小手形状，move移动形状 透明度opacity opacity:0.3 透明度的值可以使0到1...，内联壮元素 元素分类转换display block,将元素转换为块级元素 inline,将元素转换为行级元素 inline-block,将元素转换为内联块元素 none将元素隐藏 描边border 线条的样式...浮动会产生块级框，而不管该元素本身是什么 清除浮动带来的影响 clear清除浮动 none不清除,left不允许左边有浮动对象，right,both 利用伪类实现清除浮动 .clearFix{...如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口 position:absolute div{ width: 200px; height: 200px; border
2.分类明细:(照搬来的） 块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块... 正确 （内联嵌套内联） div>div> 错误 （内联嵌套块级） 块元素可以嵌套块元素（不是所有块级都可以嵌套块级...），或者是内联元素 div>div>div>div> 正确 （块级嵌套块级） div>div> 正确 （块级嵌套内联）...，块元素和块元素并列一级，内联元素和内联元素并列一级 div>div> 正确（块级和块级并列一级） div>...div> 正确（内联与内联并列一级） div>div> 错误（块级和内联并列一级了）
在实际应用中我们经常会遇到下图这种情况，你可能会容易的解决这种无法对齐的问题，但是你知道是什么原因导致他们这个样子吗？...top 与 bottom 对于内联元素，指的是元素的顶部（底部）和当前行框盒子的顶部（底部）对齐；即与 line-box 的顶部（底部）对齐。...对于内联元素指的是元素的垂直中心点与行框盒子基线往上 1/2x-height 处对齐，简单点说就是字母 X 的中心位置对齐；对于 table-cell 元素，指的是单元格填充盒子相对于外面的表格行居中对齐...Demo 1：任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高 div class="box"> 块一块的虚线框中部分组合而成的。
这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...，它们可以对齐到这个点。...image.png 假设我们在滚动容器上有一块磁铁，这将有助于我们控制捕捉点。 如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。...image.png 滚动容器的 end 子项将对齐到其滚动容器的末尾。...在向元素添加边距时，滚动将根据边距对齐。 参见下图： ? .item-2具有scroll-margin-left: 20px。 结果，滚动容器将在该项目之前对齐到20px。
这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...Scroll Snapping Alignment 滚动容器的子项目需要一个对齐点，它们可以对齐到这个点。我们可以用start, center或end。 为了更容易理解，下面是它的工作原理。...假设我们在滚动容器上有一块磁铁，这将有助于我们控制捕捉点。 如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。...在向元素添加边距时，滚动将根据边距对齐。 参见下图： .item-2具有scroll-margin-left: 20px。 结果，滚动容器将在该项目之前对齐到20px。...-webkit-overflow-scrolling: touch; } .section { height: 100vh; scroll-snap-align: start; } 块和内联
3.text-align 定义元素内容的水平对齐方式。 left：内容左对齐。 center：内容居中对齐。 right：内容右对齐。...指定单词之间的额外间隙 p{word-spacing:20px;} 5.letter-spacing 指定字符之间的额外间隙 p{letter-spacing:10px;} 6.text-indent 定义块内文本内容的缩进...文本装饰 text-decoration:none | underline | overline | line-through | blink 10.text-overflow clip 当内联内容溢出块容器时...ellipsis 当内联内容溢出块容器时，将溢出部分替换为（...）。...class="text"> div>字体abc abcdiv> div>aabbdiv> div> div class
块级元素: 会单独占一行, 例如~ 内联元素: 又称行内元素, 多个内联元素占一行, 例如标签 行内块级元素: 行内块级元素显示会与其他相邻元素出现在同一行, 并且两个相邻元素之间存在空白空间...例如标签 css 的display 属性 block 块级元素 inline 内联元素 inline-block 块级内联元素 背景图片 background-image: url(.../ repeat-y 初始位置 background-position: center background-size: 像素值/ 100% 表示充满 案例: 社交账号注册按钮效果 展示效果 行内块级元素对齐方式的一个做法是外层套一个...DOCTYPE html> 行内块级元素对齐方式 div id="code">div> div> div> 底部的黑条用的是
块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。...常见的块元素有~、、div>、、、等， 其中div>标签是最典型的块元素。...块级元素的特点： （1）总是从新行开始 （2）高度，行高、外边距以及内边距都可以控制。 （3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。...行内元素(inline-level) 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...（3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。 行内元素的特点： （1）和相邻行内元素在一行上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
