靜哥哥的博客

1. Flex布局Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 在父元素中设置 display:flex; 即指定该容器使用弹性布局。注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。一些概念：采用 Flex 布局的元素，称为 “Flex 容器”。它的所有子...

CSS盒模型仅仅是一个形象的比喻。在HTML中所有的标签都可以看作盒子。 宽度/高度 => 指定可以存放内容的区域 内边距 => 填充物 边框 => 盒子本身 外边距 => 盒子和盒子之间的间隙标准盒子模型： 宽度 = margin * 2 + border * 2 + padding * 2 + width

　BFC (Block formatting context) 直译为”块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。BFC的生成CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC根元素float属性不为 noneposition 为...

浏览器对页面的呈现的处理流程文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树之后根据DOM元素的几何属性构建一棵用于渲染的树。 渲染树的每个节点都有大小和边距等属性，类似于盒子模型。 当渲染树构建完成后，浏览器 就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。 回流(reflow)：渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏...

1. margin：auto .father { width: 300px; height: 300px; background: yellow; position: relative; } .son { width: 200px; height: 200px; background: blue; position: absolute; margin: a...