随笔分类 - CSS
摘要：根据9.4.2 IFC小节中的高亮文字可以看出，IFC中是这样布局行内盒的：IFC首先创建一个行框，将行内盒一个一个水平地排列。一个行框用完了，就创建一个新的行框接着放。如果一个行内盒在当前行框的剩余部分放不下，则会创建一个新的行内盒装下剩余的部分，放到下一个行框。被分割的行内盒在分割处（即上一个行
阅读全文
摘要：蓝色区域为.parent的content box。由此可以看出，规范中所说的，若某元素的position为absolute，其视口应该为其第一个position为absolute、relative或fixed的祖先元素的内容边界，而不是内边距边界。
阅读全文
摘要：假设现在有一个红色box和一个绿色box。 红色box在上，绿色box在下。 红色box设置float: left，绿色box使用clear:both清除浮动。 请问，绿色box的哪个上边缘（content box的上边缘、padding box的上边缘、border box的上边缘、margin
阅读全文
摘要：/* 这是一个规则集，由一个选择器和后跟的声明块组成 */ 选择器 { /* 这是一个声明 */ 属性名1: 属性值1; ... }
阅读全文
摘要：概述 1）什么是BFC BFC，全称Block Formatting Content，译为“块级格式化上下文”。它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局。这个区域与外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局不
阅读全文
摘要：不同情况的margin合并 两个竖直方向上相邻的margin会发生合并。合并的margin的高度等于两者中的较大者。 兄弟关系 父子关系 当父元素没有设置内边距或边框，以及没有触发BFC时，如果子元素的margin值大于父元素的margin值，就会发生margin塌陷。解决方法是给父元素添加边框或内
阅读全文
摘要：rem 先将1rem设为屏幕宽度的1/20： document.addEventListener('DOMContentLoaded', function () { document.documentElement.style.fontSize = document.documentElement.
阅读全文
摘要：[1] display:table-cell知识点总结 匿名表格元素 有时候我们在编写table元素的时候，会少些一些元素。这些“丢失”的元素会被模拟出来，使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table元素，从而使得其符合table/inline-table、ta
阅读全文
摘要：float元素的特性 包裹性 包裹性由“包裹”和“自适应”两部分组成。 1）包裹 “包裹”是指浮动元素若没有指定宽度和高度，则设置适应内容的宽度和高度。即使是块级元素，width也不再占满屏幕的一行。 （图中红色为father，蓝色为浮动元素son，绿色为content） 2）自适应 “自适应”是指
阅读全文
