常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。...例如：下图例3 box1向右侧浮动，box2不设置clear属性时的示意图；例4中box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行。 ?...但是为了计算方便：一般都会增加一个空div块，并使用clear：both来设定表示两侧都不允许有浮动元素。这样新的空div块会下移，达到撑开父元素的目的。...这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left...（4）fix定位 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
super 把盒的基线升到父盒的上标的适当位置。（此值对元素文本的字号无影响。） text-top 把盒的顶部同父级的内容区域的顶部对齐（参见 10.6.1）。...因此，尽管在同一行内格式化上下文中的行盒是等宽的（包含块的宽度），由于浮动会造成可用的水平空间减少，行盒的宽度仍可能变动。...同一行内格式化上下文中的行盒在高度上通常是变动的（比如，一行可能包含图片但其他行仅包含文本）。...如果一个行内盒不可切割（比如，行内盒包含的是单个字符或者语言指定的断字规则不允许断字，又或者行内盒的 white-space 属性值为 nowrap 或 pre ），那么该行内盒将溢出行盒。...为了包含行内格式化上下文中的行内级内容，行盒按需创建。
由于属于 CSS3 新增的伪类，所以也可以作为一种 HACK 元素，只对 IE9+ 生效。...介绍 :root 伪类，是因为在介绍使用 CSS变量 的时候，声明全局CSS变量时 :root 很有用。 :empty 伪类 :empty 伪类，代表没有子元素的元素。...这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。...也就是说，要想 :empty 生效，标签中连哪怕一个空格都不允许存在。...使用 :not(*) 将匹配任何非元素的元素，因此这个规则将永远不会被应用。 这个选择器只会应用在一个元素上， 你不能用它在排除所有祖先元素。
clear:both 意思是说，设置了该属性的元素，其左边和右边不允许存在浮动元素。...具体包括三种情况： 相邻的兄弟元素之间： 原因： 相邻的兄弟元素默认位于同一个块级上下文中 计算规则： 正正取大值，正负值相加，负负最小值 父元素与第一个/最后一个子元素之间： 原因： a.margin-top...计算规则： 子元素和父元素上边界重叠，并且以子元素的 margin-top 作为父元素的 margin-top 整体移动。...IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。...设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。 伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。
有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。...包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见[cref flexible-two-column-layout-reloaded...简单翻译一下： 此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。...首先，我们知道overflow:hidden并不是万能的，要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块。...其次，如果我们先定义了overflow:hidden防止容器被撑开，或者用这个方法做了神马图文混排、清除浮动之类的处理，甚至是用了overflow:hidden来实现块级上下文这样上流的东东，突然产品又说里面的一个浮层要显示
在层叠上下文中，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。...层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。 每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。...每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。 3.2. 如何形成堆叠上下文？...）的后代元素，包括行内块级元素（inline blocks）和行内表格元素（inline tables） 堆叠层级为 0 的子堆叠上下文（child stacking contexts）和堆叠层级为 0...的定位的后代元素 堆叠层级为正的子堆叠上下文 上述关于层次的绘制规则递归地适用于任何层叠上下文。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 1.clear 属性定义: 1. clear 属性规定元素的哪一侧不允许其他浮动元素 。...2. clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。...1. clear:left 的含义是如果当前元素的左侧有浮动元素，那么就强制该元素另起一行 。 3. clear: right -- 在右侧不允许浮动元素 。...5. clear: inherit -- 从父元素继承 clear 属性 。 3为什么会有浮动 1. 在我们页面正常显示的排版布局中, 元素可分为块级元素与行内元素； 2....在标准文档流中块级元素会独占一行, 行内元素会从左至右依次铺展开； 3. 这样的设置在我们实际开发中是不能完全满足我们设计需求的, 因此就有了浮动这样的设置 。 4.
与div2都是BFC上下文，但是要求的是：外边距将不再与上下文之外的元素折叠，按照要求，我们应该将div1与div2放在不同的上下文中，修改后的脚本如下： <!...即定义了position为非static的元素 取值： auto： 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。 整数： 用整数值来定义堆叠级别。...说明： 检索或设置对象的层叠顺序。 z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。 当多个元素层叠在一起时，数字大者将显示在上面。 示例： <!...f)、浮动元素不能溢出包含块 浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。...如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小） super： 把当前盒的基线提升到合适的位置作为父级盒的上标
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。...然而，层叠上下文除了让元素的层级更高之外，还会生成一个独立的上下文，它的子元素的层叠水平只在当前上下文生效。...那就去找它们的爸爸，直到找到处于同一层叠上下文（此例中的上下文是根元素形成的）的祖先元素（此例中是.div1与.div2），让两个祖先元素对比一下哪个位于上面就好了。...它的每一个子孙元素，一旦形成了层叠上下文，那么连上它的子元素，都就会被装入一个小一点箱子（上述过程可以无限次执行，小箱子中有元素形成了层叠上下文，会独立包成一个更小的箱子）。...有了上面的铺垫，下面将迎来重头戏：在同一层叠上下文中，不同箱子是按照什么规则进行摆放的呢？就只有z-index会产生影响吗？箱子内杂七杂八那些东西，就没个摆放顺序吗？
display 试一试 display:block; 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。...子元素不是inherit元素 div元素默认是换行的，因为父元素是inline，设置了inherit的子元素跟随父元素的属性inline，与父元素成为同一行。...其他display属性（不常用）; 值 描述 list-item 此元素会作为列表显示 run-in 此元素会根据上下文作为块级元素或内联元素显示 compact CSS 中有值 compact，不过由于缺乏广泛支持...此元素会作为一个或多个行的分组来显示（类似 ） table-footer-group 此元素会作为一个或多个行的分组来显示（类似 ） table-row 此元素会作为一个表格行显示...（类似 ） table-column-group 此元素会作为一个或多个列的分组来显示（类似 ） table-column 此元素会作为一个单元格列显示（类似 ）
同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。...同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 <!...这短话详细列举了生成BFC元素的高度计算规则，翻译成中文如下： 建立块格式化上下文的元素的高度按如下所述计算： 如果该元素只有行内级子元素，其高度为最上行盒的顶部到最下行盒的底部的距离。...如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。 绝对定位子元素会被忽略，相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。...此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。
$data.a="12323232323"一样都可以改变a属性的值 $watch()方法时当a值发生变化之后进行的回调回函，此方法在开发中也是非常实用的 实例生命周期钩子 生命周期：我们把一个对象从生成...（new）到被销毁（destory）的过程，称为生命周期 生命周期钩子的 this 上下文指向调用它的 Vue 实例，箭头函数并没有 this var vm = new Vue({ el: '#app...：a is:hello 生命周期图例(先记录再慢慢理解)： 模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。...随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过 指令： 地址：https://cn.vuejs.org/v2/api/#v-text v-text <span v-text="msg"...缩写示例： 箭头函数绑定了父级作用域的上下文 问题： 如果你已经有一个现成的服务端应用，你可以将vue作为该应用的一部分嵌入其中
对每一个网页来说，默认都会创建一个层叠上下文 ，这个上下文（这张桌子）的根部就是 html 元素，html 元素的所有子元素都会位于这个默认的层叠上下文中的某个层叠等级，就好比东西会摆放在桌子的不同位置上一样...这个自然不用多想，引入眼帘的肯定是一大片的蓝色，同时还有一个此前设置好尺寸的红色块级元素。除非你做了额外的设置，否则这个元素将正常地出现在左上角。 你可能会说“就这？...虽然上面这个例子只涉及到了两个层叠等级，但实际上，在一个层叠上下文中，一共可能出现七个层叠等级，从最低到最高排列，依次是： 背景和边框 ：形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的...Z-Index 为负数 ：设置了 z-index 为负数的子元素以及由它所产生的层叠上下文 块级盒模型：位于正常文档流中的、块级的、非定位的子元素 浮动盒模型 ：浮动的、非定位的子元素 内联盒模型 ：位于正常文档流中的...div.four，无论给 div.one 的子元素设置多大的 z-index，子元素的层级都无法超过 div.four。
2.蓝色的范围，是包括红色边框的区域？ 我们将边框的颜色修改为半透明，不难发现...  <!...的元素； 3.position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）； 4.flex (flexbox) 容器的子元素...13.在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。...总结: 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。...每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠
block(内联标签设置为块级标签) 1 span {display:block;} 注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 ...： 上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值 2、父子div： if 父级div中没有border，padding...，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin； <!...也就是说，对于块级元素，子元素的宽度默认为父元素的100%。...毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。
他们各自也都形成了新的层叠上下文，其中包含着新的层叠层。 在层叠上下文中，其子元素按照上面解释的规则进行层叠。...，当处理层叠时只考虑子元素，这里类似于BFC 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠 2....HTML 中的出现顺序层叠：红->绿->蓝 5.3 给子元素增加 z-index 红绿位于一个div.first-box下，蓝黄位于div.second-box下，红绿蓝都设置了position: absolute...； 这个例子中，红蓝绿黄元素的父元素中都没有生成新的层叠上下文，都属于根层叠上下文中的元素 红蓝都没有设置 z-index，同属于层叠顺序中的第 6 级，按 HTML 中的出现顺序层叠； 绿设置了正的...z-index，属于第 7 级； 黄设置了负的 z-index，属于第 2 级； 所以这个例子中的从底到高显示的顺序就是：黄->红->蓝->绿 5.4 在不同层叠上下文的父元素内的情况 红绿位于一个div.first-box
稍微翻译一下： 形成堆叠上下文环境的元素的背景与边框 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低） 正常流式布局，非 inline-block，无 position...除外）的子元素（包括 display:table 和 display:inline ） 拥有 z-index:0 的子堆叠上下文元素 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低...堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。...也就是说添加 opacity 替换成上面列出来这些属性都是可以达到同样的效果。 在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。...特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。
> 看看效果: 浮动布局注意点 浮动和标准流的父盒子搭配 先用标准流的父元素排列上下位置,...之后内部子元素采取浮动排列左右位置....浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流 清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动有不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子....清除浮动的本质 1.清除浮动的本质就是清除浮动元素造成的影响 2.如果父盒子本身有高度,则不需要清除浮动 3.清除浮动之后.父级盒子根据浮动的子盒子自动检测高度.父级有了高度,就不会影响下面的标准流...语法 选择器 {clear : 属性值} 属性值 描述 left 不允许左侧有浮动元素 right 不允许右边有浮动元素 both 同时清除左右两侧浮动 在实际工作中,我们一般只用clear:both
他们各自也都形成了新的层叠上下文，其中包含着新的层叠层。 在层叠上下文中，其子元素按照上面解释的规则进行层叠。...，当处理层叠时只考虑子元素，这里类似于BFC 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠 2....层叠等级的比较只有在同一个层叠上下文元素中才有意义 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序 注意，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由...，都属于根层叠上下文中的元素，且都是层叠顺序第6级，所以按HTML中的出现顺序层叠：红->绿->蓝 5.3 给子元素增加 z-index 红绿位于一个 div.first-box下，蓝黄位于 div.second-box...小，因此位于红绿之下； 所以这个例子中从低到到显示的顺序：蓝->红->绿 (我遇到的的情况就属于这个例子类似情形) 5.5 给子元素设置 opacity 红绿位于 div.first-box下，蓝位于
他们各自也都形成了新的层叠上下文，其中包含着新的层叠层。 在层叠上下文中，其子元素按照上面解释的规则进行层叠。...，当处理层叠时只考虑子元素，这里类似于BFC 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠 2....层叠等级的比较只有在同一个层叠上下文元素中才有意义 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序 注意，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由...，都属于根层叠上下文中的元素，且都是层叠顺序第6级，所以按HTML中的出现顺序层叠：红->绿->蓝 5.3 给子元素增加 z-index 红绿位于一个div.first-box下，蓝黄位于div.second-box...：蓝->红->绿 (我遇到的的情况就属于这个例子类似情形) 5.5 给子元素设置 opacity 红绿位于div.first-box下，蓝位于div.second-box下，红绿蓝都设置了position
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
