盒子模型在CSS中，这些矩形盒子中的每一个都是使用标准盒子模型来描述的。该模型描述了元素占据的空间的内容。每个框有四个边：边距边、边框边、填充边和内容边。在标准模式下，一个块的总宽度=width+margin（左右）+padding（左右）+border（左右）在weird模式下，一个块的总宽度=width+margin（左右）right）（即width已经包含了padding和border值）marginmergeblock的topmargin和bottommargin有时会合并（collapsed）成一个单独的margin，这种行为称为margincollapsing（边距折叠），有些地方被翻译为保证金合并。相邻的兄弟元素：两个相邻的兄弟元素之间的边距会塌陷。块级父元素及其第一个/最后一个子元素：如果块级父元素的topborderwidth和toppaddingdistance为0，则块级父元素及其第一个子元素将发生Collapsingtopmargin.空块级元素：如果存在空块级元素，则其边框、内边距、行内内容、高度和最小高度都不存在。那么这个时候它的top和bottommargin中间就没有barrier了，这个时候它的top和bottommargin会合并。BFC决定了块级元素如何布局其内容，以及与其他元素的关系和相互关系。BFC的创建方式如下：根元素或其他包含它的元素（html标签）浮动元素（元素的浮动不是无）绝对定位元素（元素的位置是绝对的或固定的）内联块（theelementhasdisplay:inline-block)tablecells(元素有display:table-cell,HTMLtablecells的默认属性)溢出值不可见Block元素elasticitem(display:flexorinline-flex的子元素element)griditem(display:gridorsub-elementofinline-gridelement)BFC功能水平居中的子元素是行内元素或块元素，宽度必须是宽度未定，采用的布局方案是不同的。子元素为内联元素：为父元素设置text-align:center；固定宽度块元素：设置左右外边距值为auto；变宽块元素：设置子元素为display:inline，然后在父元素上设置text-align:center；一般解决方案：flex布局，为父元素设置display:flex;justify-content:center；垂直居中子元素的垂直居中有单行内联文本、多行内联文本和块元素。不同的。父元素固定，子元素为单行行内文本：设置父元素的高度等于行高line-height。:middle;块元素：设置子元素position:absolute并设置top和bottom为0，父元素应定位为static、margin:auto以外的值；一般解决方案：flex布局，设置{display:flexforparentelement;align-items:center;}。圣杯布局与双飞翼布局圣杯双飞翼FLEX布局flexgrid布局链接说明CSS网格布局完全指南（图解网格详细教程）如何使用CSSGrid快速灵活地布局各种像素单元devicepixels,deviceindependentpixels,CSSpixelsession,cookie,localStorage,sessionStorage说说session,cookie,sessionStorage,localStorage的区别及应用场景transform,transitionandanimation动画属性transform,transitionandanimationinCSS3
