lap2004的专栏

css 在网页布局方面除了前面浮动布局；目前流行一维布局flex和二维布局GRID,本节重点就flex进行总结：基本概念如下：flex 布局的基本概念 - CSS（层叠样式表） | MDNFlexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。https://developer.mozilla.org/zh-CN/docs/Web/CSS/

选择器表示有多种方法，经量用表和图说清楚：分类如下：举例及优先级如下：CSS--选择器及其优先级 - 知乎普通规则 -- 选择器在 css 中，首先要选择一个（或多个）文档中的元素，然后才能对其应用我们定义的样式；而选择文档中元素的规则，就是选择器。 分类基本选择器通配选择器ID选择器类选择器元素选择器属性选择器组…https://zhuanlan.zhihu.com/p/85788761具体说明如下：https://www.w3school.com.cn/cssref/css_

在媒体对象布局中，为使得文字与图像并列显示而不是包围，对文本元素引入BFC。关于BFC概念如下：块格式化上下文 - Web 开发者指南 | MDN块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context举例说明参考：一次弄懂.

css中浮动（float）类似于word中图文环绕方式，使得元素脱离原来文档流，使得其他元素查询排列，环绕浮动元素。例子类似如下：float - CSS（层叠样式表） | MDNfloat CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。https://developer.mozilla.org/zh-CN/docs/Web/CSS/float要注意，浮动是针对块级元素的，在浮动中，为阻止浮动

为解决多个选择器外边距堆叠问题，或者多个组件之间间距问题，如列表，导航等，采用 *+* 简称猫头鹰选择器解决，具体如下：*+*，开头是一个通用选择器*，+是相邻组合器，后一个*是另一个通用选择器。它选择了页面上有着相同父级的非第一个元素。可实现侧边栏每个元素等距等。body * + *{margin-top:1.5em;}以上代码全局设置上下堆叠的元素的间距。下面为具体演示示例https://codepen.io/AllThingsSmitty/pen/gMRvWqhttps://

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）： 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

默认的盒模型box-sizing属性为content-box，设置宽或高后，只指内容的宽和高，而边距，内边框等宽度都是叠加到内容宽和高上的。尺寸计算公式：width = 内容的宽度height = 内容的高度宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。为避免产生魔术数值在布局时一般将属性改为border-box包括内容，内边距和边框，但不包括外边距。详细举例见下面链接：box-sizing - CSS（层叠样式表） | MDN...

最近阅读《深入解析css》，对css中的知识进行了总结，现将一些知识进行整理，便于应用。相对单位 em rem css中绝对单位为px。相对单位有em rem(root em) 1em相当于一个当前元素的字号。如果当前字体指定为16px,则em就是16px，在设置padding、height 等时，常用这些相对单位。 html文档中，根节点为所有元素组节点，他有个伪类选择器（：root）等于类型选择器html。rem为root em 简写 是指相对于根节点的字号大小。 作者在使用中，