，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中，并成为行业的默认规范。...inherit是指从父元素继承 display属性的值。 14、简要描述块级元素和行内元素的区别。 块级元素的前后都会自动换行。默认情况下，块级元素会独占一行。...例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。 因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。...BFC（ Block Formatting Context）指块级格式化上下文，即一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。
第 3 章仍是本书的基础章节。本章将会给大家介绍盒模型相关的概念、几种常见的可见格式化模型（包括定位、浮动、格式化上下文）以及新型布局模块，其中较新的布局方式将在后续章节详细介绍。...3.2.3 格式化上下文 CSS 中有一个很重要的概念，叫做格式化上下文(formatting context)。其中行级格式化上下文前面略有提及，如垂直外边距对于行内盒子无效。...不过如果利用块级格式化上下文，我们可以更简单地实现上面这一效果，将 CSS 进行如下修改。...对于外层的包裹元素，块级格式化上下文会使其自动包含内部的浮动元素，从而省去了清除浮动的相关代码。对于右侧元素，块级格式化上下文省去了宽度的指定，其会自动收缩大小，并紧挨浮动元素。...3.3 其他布局模块 除了上面介绍的定位、浮动等，CSS 还有一些比较新的更加灵活稳健的 CSS 布局模块。如弹性盒子布局、网格布局、多栏布局、Region 后续章节会进行详细介绍。
如果水平方向没有足够的空间容纳浮动，它将下移直至能够放下它或者没有其他浮动存在。 由于浮动不在标准流中，在浮动之前或之后创建的非定位块盒将垂直摆放，如同浮动不存在一样。...如果行盒被缩短到不能容纳任何内容，那么行盒将下移（其宽度会重新计算）直到可以容纳内容或不再有浮动。当前行中，任何在浮动盒之前的内容将重排到同一行中的浮动的另一侧。...表的border box、块级可替换元素或者在标准流中创建了新的BFC的元素（比如 overflow 值非 visibile 的元素），它们不能与其同属一个BFC中的浮动元素的margin box重叠。...其后的内容被格式化到浮动的右侧，从浮动所在的同一行开始布局。由于浮动的存在，浮动右侧的行盒缩短，但在浮动之后就恢复了它们“正常”宽度（即 p 元素创建的包含块的宽度）。该文档可能被格式化如下： ?...如果要实现行内元素清除浮动效果，不应当如上所讲的去设置空隙，而应当强制断行并有效插入一个或多个空行盒（或者如section 9.5所讲移动新行盒）来使要清除浮动的行内元素的行盒低于相应的浮动盒。
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。 ---- HTML 空元素 没有内容的 HTML 元素被称为空元素。...---- HTML 折行 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 标签： 实例 ? ? 元素是一个空的 HTML 元素。...标签 描述 定义一个段落 插入单个折行（换行） ---- HTML 文本格式化 ? ?...---- HTML 格式化标签 HTML 使用标签 ("bold") 与 ("italic") 对输出的文本进行格式, 如：粗体 or 斜体 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册...注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。 ---- HTML 链接语法 链接的 HTML 代码很简单。它类似这样： ? href 属性描述了链接的目标。.
不同的书写模式(writing mode)中，可以抽取出共性的抽象概念(如开始位置，或行)，这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。...盒子的生成 盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于 CSS display 属性。...匿名行内盒子 类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。...这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。 行盒子 行盒子由行内格式化上下文创建，用来显示一行文本。...在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
CSS盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型(visual formatting model)所生成的矩形盒子。...盒子的生成 盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于 CSS display 属性。...匿名行内盒子 类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。...行盒子 行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。...当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
今天小编就将以葡萄城公司的企业级低代码开发平台——活字格为例，为大家介绍一下如何在低代码平台中引用 CSS 和 JavaScript 。...环境准备 活字格低代码安装包 引入 CSS CSS (Cascading Style Sheets) 是一种样式表语言，主要用于定义和控制网页内容（比如 HTML 元素）的布局、视觉表现和格式化。...上图是在活字格中，可以上传自定义的 CSS 文件，活字格支持网络链接文件、本地文件，同时支持编辑 CSS 文件。...先新建一张数据表，然后将这个数据表绑定到页面上，并给表格的列设置好列名，最后给【添加记录】按钮设置 JavaScript 命令给数据表添加一行新数据。...JavaScript 命令为表格添加了一行新数据。
---- 标准文档流 标准文档流 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式 。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。...为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中 当一个元素设置了新的 BFC 后，就和这个元素外部的 BFC 没有关系了，这个元素只会去约束自己内部的子元素。...行框的宽度是由包含块和与其中的浮动来决定； IFC 中的行框一般左右边贴紧其包含块，但 float 元素会优先排列； IFC 中的行框高度由 CSS 行高计算规则来确定，同个 IFC 下的多个行框高度可能会不同...如果子元素未设置强制换行的情况下，行框将不可被分割，将会溢出父元素。...w3school CSS 浮动 BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型
CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。...定位方案(Positioning schemes) - 常规流(Normal flow) CSS2.1中，常规流包括块级盒的块格式化，行内盒的行内格式化，以及块级盒和行内级盒的相对定位。...每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。...能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。...IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）。
CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来： 为第一个字母、行或元素设置样式。...问题 20：如何在CSS中定义一个伪类?它们是用来干什么的 CSS伪类是用来添加一些选择器的特殊效果。...使用base64的优点是： （1）减少一个图片的HTTP请求 使用base64的缺点是： （1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体...BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也 不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。...IFC指的是行级格式化上下文，它有这样的一些布局规则： （1）行级上下文内部的盒子会在水平方向，一个接一个地放置。 （2）当一行不够的时候会自动切换到下一行。
CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型（相当一规定了这个元素如何显示）； 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上，也就是如何布局； 换句话说，盒子模型规定了怎么在页面上摆放盒子...（这也是为什么会产生BFC）； none，不生成框，不再格式化结构中，而另一个visibility：hidden则会产生一个不可见的框 总结： 如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化...，因为只要出现了块级元素，就会将里面的内容分成几块，每一块独占一行（出现行内可以用匿名块框解决）； 如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容时按照顺序成行的排列...，只有产生了对应的FC后才会应用对应的FC渲染规则 BFC渲染规则 在块格式化上下文中，每一个元素左外边与包含块的左边解除（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边...行框的宽度有它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定； 行框的规则： 如果几个行内框在水平方向上无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中（即行内框的分割）
div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。 其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。...3.BFC BFC（Block Formatting Context 块格式化上下文）：是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。...格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BF么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。...并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动。
block container box（块容器）：在 CSS2.2 中，除了 tabel box 或替换元素的主要盒子，一个块级盒子也是块容器，但不是所有的块容器都是块级盒子（如非替换内联块盒子）。...弹性格式化上下文（FFC，flex formatting context），在 CSS3 中定义。 栅格格式化上下文（GFC，grid formatting context），在 CSS3 中定义。...2.5 块级格式化上下文规范及解析 根据 W3C CSS2.1 视觉格式化模型一章的定义，BFC 相关规范描述如下： 浮动元素，绝对定位元素，不是块级盒子的块级容器（如 inline-block，table-cells...即使是存在浮动元素也是如此，除非该盒子建立了一个新的 BFC。 结合规范第三点与独立格式化上下文的知识，我们可以有以下推论： BFC 内外互不影响。...通过 BFC 可以实现灵活健壮的自适应布局，在一行中达到类似 flexbox 的效果，示例如下： 两栏自适应布局 1.gif 多列自适应布局 2.gif 参考资料 块级格式化上下文 包含块：MDN
一、什么是浮动，标准文档流又是个啥 所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。...以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。 显然标准流已经无法满足需求，这就要用到浮动。...因此，我们可以得出一个重要结论： 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；...这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。
DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。...CSS会等到页面被加载完再加载 import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题 常见的浏览器内核有哪些？...cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递...如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题 优点： 用来加载速度较慢的内容（如广告） 可以使脚本可以并行下载 可以实现跨子域通信...通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等; 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放 如何在页面上实现一个圆形的可点击区域？
以上 CSS 片段将生成如下数据结构，以便在后续的过程中方便使用： ?...在本节中，我们将讨论以下 CSS 布局概念: 格式化上下文（FC）：有许多类型的格式化上下文，其中大多数 Web 开发人员通过更改 display 元素的值来调用。...其他一些CSS也可以强制使用新的格式化上下文，例如 position: absolute，float 或使用 multi-colum。 包含块:这是用于解析样式的祖先块。...之所以将其称为“shrink-to-fit”，是因为如果尺寸是自动的，则该框将围绕其内容进行收缩。...这可能感觉就像我们在设计软件中使用图层一样，但是唯一存在的图层是在浏览器的合成器中。看起来好像我们在使用 z-index 创建新层，但实际上并不是这样，那么到底是怎么样呢?
/border margin负值 margin合并 盒模型是视觉格式化模型中的基础单元，是CSS布局模型中必不可少的一部分 CSS盒模型描述了一个为文档树中的元素生成的并根据视觉格式化模型进行布局的矩形框...而外边距合并是直接影响垂直格式化的因素之一，有必要深入理解 一.经典场景 下列例子中，假设UA没有默认样式表，未声明的样式属性都依照规范取其初始值 另外，假设UA都是遵守CSS规范的 1.列表项间的外边距合并...行框 包含来自同一行的盒的矩形区域叫做行框 一个行框总是足够高，能够容纳它包含的所有盒。 行框是CSS对行的抽象表示，每行元素都处于同一个行框里。...如果太长放不下出现自动换行，那么就会为下一行再创建一个行框。...’属性为0，既没有上下边框，也没有上下内边距，’height’为0或’auto’，且不含行框的话，那么其所有流内孩子的外边距（如果存在的话）都会合并 简化总结，不过4条： 非流内（绝对定位或浮动）不合并
问题 CSS中的选择器权重 Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。 解答 不用说，CSS权重肯定是面试中最常考的题之一。 我们直接上权重计算规则： 第零等：!...【伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。】...【伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。...important便具有最高优先级； 如果不存在 !...important，存在style，那么style便具有最高优先级； 剩下的 “ID” 、 “类，伪类和属性” 、 “元素类型和伪元素“ 分别对应 权重值（0-a-b-c）中的 a/b/c；计算方法 其余某个选择的权重
重要，深入了了解了CSS这门语言的核心，你的CSS才可能会有创造性，你才能发明出你自己的奇淫技巧，而不是遇到新的情境就去百度，google。...FC FC（Formating Context，格式化上下文） 是一个布局的环境，它里面的盒子需要遵循FC这套体系的规则， CSS2.1 中定义了 BFC（Block Formating Context...utm_source=website&utm_medium=embed&utm_campaign=7qoutta5 margin 一文中 margin合并规则 中写到了这么一句话，新建了块格式化上下文的元素不会与它的子元素的...在一个块格式化上下文中，每个盒的left外边挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。...IFC中的行盒的宽度是包含块的宽度减去 float 元素（如果有的话）的宽度，行盒高度是最高的盒的top与最低的盒的bottom之间的距离。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0（高度塌陷）。...表现出来的区别就是 block 独占一行，在浏览器中通常垂直布局，可以用 margin 来控制块级元素之间的间距（存在 margin 合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。...---- CSS3 有哪些新特性 ?...Collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用。 如果此值被用在其他的元素上，会呈现为 hidden。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
