kakaai77的博客

常见的形成BFC的场景根元素（html,:root）浮动元素（float属性部位none）绝对定位元素（absolute或fixed）行内快元素（display为inline-block）表格单元格（元素的display为table-cell(默认)）表格标题（display为table-caption）

核心思想：给item设置边框，有重合的边框可以利用margin负值来重叠隐藏，但需要给item宽度补偿，由于整个布局的宽度为1100px 1100px/5 = 220px，但由于布局中中间有6条边框，所以无论如何都会超出一个像素，可以将其中的一个盒子像素减少1px来解决这个问题。考拉布局加边框的布局。

到底该怎么做呢，我们应该想这样一个问题，父元素设置为flex时，所有的子元素都将不再遵循行内元素或者块级元素的限制，默认的宽度（主轴的方向为x轴时）为0，高度最大为充满单行交叉轴的高度，所以为了解决盒子排布不规范，我们可以这样做。如图，显然，space-between并不能达到我们预期的效果，一般来说我们预期的效果应该是最后一行盒子从左到右依次排列，并空出一个位置。在最后一行中添加多余的元素，设置其宽度和其他盒子一样，高度为auto，这样子盒子因为有宽度会占据位置，因为没有高度不会撑开盒子，代码贴上。

最近的开发中遇到了SVG不能修改颜色的问题，以前是直接用，没有研究过，现在搞个笔记记录下。

内边距padding:上下会被撑起来，但是不会占用空间，左右会撑起来，也会占用空间。border:上下会被撑起来，但是不占用空间，左右占据空间。margin:上下没有效果，左右可以撑起来。什么是行内非替换元素呢？

行内级元素（包含inline-block） 水平居中：在父元素中设置text-align:center;块级元素 margin:0 auto;

垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin，这种现象叫做折叠（collapse）如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠，则这个块级元素的margin-top值会传递给父元素。显然，子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。

方法：display:none元素不显示出来，并且也不占据位置，不占据任何空间（相当于不存在）方法二：visibility:hidden设置为hidden,虽然元素不可见，但是会占据元素应该占据的空间默认为visible方法三：rgba设置颜色，将a的值设置为0rgba的a设置的是alpha的值，可以设置透明度，不影响子元素方法四：opacity设置透明度，设置为0设置整个元素的透明度，会影响所有的子元素Overflowvisible:溢出部分可见hidde

background中bg-size是可以省略的，如果不省略需要紧跟在background-position后面，并添加/local:表示属性值随着背景相对固定，如果一个元素拥有滚动机制，北京的 内容会随着元素的内容滚动。scroll:此关键属性值表示北京相对于元素本身固定，而不是随着它的内容滚动。注意：如果设置了背景图片，而没有设置宽高的情况下，图片显示不出来。fixed:表示北京相对视口固定，北京不会随着元素的滚动而滚动。设置的第一张图片将显示在最上面，其他图片将会层叠在下面。

行内级元素（包含inline-block） 水平居中：在父元素中设置text-align:center;块级元素 margin:0 auto;

总盒子宽度为1190,如果要浮动排布5个盒子，间距为10px，宽度为230px。

box-sizing是改变盒子宽高的计算方式，一般使用bor-box，消除padding和border对整个盒子的影响，但在没有明确给出宽高的情况下，box-sizing是没有效果的。如上图，我们并没有给box设置box-sizing：border-box，但box的高度被撑开了，宽度依旧和父元素相同，并没有被撑开，因为box继承了父亲的宽度，wdith为auto。现在明白宽度的继承和设置100%的区别了吧，设置了100%相当于明确给了子元素的宽度的数值。如上图，很明显，当box的宽度和高度为auto时。