摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。
盒模型
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
外边距合并块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
相邻的兄弟元素：相邻的两个兄弟元素之间的外边距会塌陷。
块级父元素与其第一个/最后一个子元素：如果块级父元素中，上边框宽度及上内边距距离为0时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。
空块元素：如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
BFC它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
创建BFC的方式如下：
根元素或其它包含它的元素（html标签）
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
overflow 值不为 visible 的块元素
弹性项 (display: flex 或 inline-flex元素的子元素)
网格项 (display: grid 或 inline-grid 元素的子元素)
BFC作用 水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
子元素为
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
圣杯双飞翼
FLEX布局flex
grid布局链接描述
CSS Grid 布局完全指南(图解 Grid 详细教程)
如何使用 CSS Grid 快速而又灵活的布局
设备像素，设备独立像素，CSS像素
session，cookie，localStorage，sessionStorage浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
transform、transition和animationCSS3中动画属性transform、transition和animation
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113073.html
摘要：我的邮箱地址欢迎大家交流学习纠错此篇博客是我的复习笔记，和学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开的书略读，后记录了标签，元素，属性的具体意义。有些标记有属性，具体格式，以标记为例，其中为标记的属性。我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错！ 此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开htm...
摘要：第二种情况控制样式如果的值为那么样式就是，否则就是写在最后对于的属性绑定和的属性绑定是一样一样的。对于文章中所用的代码是结合了学习笔记之数据绑定上面的例子做的，链接地址 简介 基本HTML属性 Css 类绑定 CSS 类绑定，[class] 全部替换的例子 CSS 类绑定，[class.sepcial] 部分替换的例子 CSS 类绑定，[ngClass] 替换多个的...
摘要：用标记内容的目的是为了赋予网页语义。规定了一组标签，用来给内容打上不同的标记。最新的版本，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。 用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。 HTML 规定了一组标签，用来给内容打上不...
摘要：用标记内容的目的是为了赋予网页语义。规定了一组标签，用来给内容打上不同的标记。最新的版本，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。 用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。 HTML 规定了一组标签，用来给内容打上不...
摘要：默认为根据自己的指定的模板文件来生成特定的文件主要是针对多入口文件。那么选项就可以决定是否都使用这些生成的文件。压缩压缩通过使用可以看到项目各模块的大小，可以按需优化图片来自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...
摘要：行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素的内容中，而不会破坏其显示。标记标记基本目的是允许创作人员将包含标记的文档与其他文档相关联。更多细节请看权威指南 题外话：HTML是一种结构化语言，而CSS是它的补充；这是一种样式语言。CSS是前端三板斧之一，因此学习CSS很重要。而我还是菜鸟，所以需要加强学习CSS。这个是我学习CSS权威指南的笔记，如有不对，请谅解和...
阅读 3655·2021-11-17 09:33
阅读 928·2021-10-09 09:44
阅读 282·2019-08-30 13:59
阅读 3225·2019-08-30 11:26
阅读 2058·2019-08-29 16:56
阅读 2725·2019-08-29 14:22
阅读 3056·2019-08-29 12:11
阅读 1137·2019-08-29 10:58
