2020-03-15

          ## CSS知识总结

1.     怎么让一个不定宽高的 DIV，垂直水平居中?
   

使用Flex只需要在父盒子设置：display: flex; justify-content: center;align-items: center;使用 CSS3 transform父盒子设置:display:relativeDiv 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;使用 display:table-cell 方法父盒子设置:display:table-cell; text-align:center;vertical-align:middle;Div 设置: display:inline-block;vertical-align:middle;
2. position 几个属性的作用position 的常见四个属性值: relative，absolute，fixed，static。
一般都要配合"left"、“top”、“right” 以及 “bottom” 属性使用。
static:默认位置，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。
设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。
relative:相对定位，相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
absolute:绝对定位，设置为 absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
fixed:固定定位，位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3 浮动与清除浮动
浮动相关知识float属性的取值：
left：元素向左浮动。
right：元素向右浮动。
none：默认值。
元素不浮动，并会显示在其在文本中出现的位置。浮动的特性：浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。浮动元素的展示在不同情况下会有不同的规则：浮动元素在浮动的时候，其margin不会超过包含块的padding。
PS：如果想要元素超出，可以设置margin属性如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素浮动元素会尽可能地向顶端对齐、向左或向右对齐重叠问题行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
clear属性 ：确保当前元素的左右两侧不会有浮动元素。
clear只对元素本身的布局起作用。
取值：left、right、both。
父元素高度塌陷问题为什么要清除浮动，
父元素高度塌陷 解决父元素高度塌陷问题：
一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

清除浮动的方法方法
1：给父级div定义 高度 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。 优点：代码简洁 缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）
方法二：使用空元素，如

(.clear{clear:both}) 原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。 优点：浏览器支持好 缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。 不推荐使用
方法四：父级div定义 display:table 原理：将div属性强制变成表格 优点：不解 缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto； 原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1） 优点：代码简介，不存在结构和语义化问题 缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级div定义 伪类:after 和 zoom.clearfix:after{ content:’.’; display:block; height:0; clear:both; visibility: hidden;}.clearfix {zoom:1;}IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类） 缺点：代码不是非常简洁（极力推荐使用）
经益求精写法.
clearfix:after { content:””; display:block; height:0; clear:both; }.clearfix { *zoom:1; } 照顾IE6，IE7就可以了

                         BFC相关知识

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC布局规则 BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值BFC 的区域不会与浮动盒子重叠（清除浮动原理）。计算 BFC 的高度时，浮动元素也参与计算
哪些元素会生成 BFC根元素
float 属性不为 noneposition 为 absolute 或 fixeddisplay 为 inline-block， table-cell， table-caption， flex， inline-flexoverflow 不为 visible
box-sizing是什么
设置CSS盒模型为标准模型或IE模型。
标准模型的宽度只包括content。
IE模型包括border和padding box-sizing属性可以为三个值content-box，默认值，只计算内容的宽度，border和padding不计算入width之内padding-box，padding计算入宽度内border-box，border和padding计算入宽度之内。

CSS隐藏元素的几种方式及区别
display:none元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。不会触发其点击事件
visibility:hidden和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。无法触发其点击事件适用于那些元素隐藏后不希望页面布局会发生变化的场景
opacity:0将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。可以触发点击事件设置height，width等盒模型属性为0简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。
其他脑洞方法设置元素的position与left，top，bottom，right等，将元素移出至屏幕外设置元素的position与z-index，将z-index设置成尽量小的负数。
消除图片底部间隙的方法
图片块状化 - 无基线对齐：img { display: block; }图片底线对齐：img { vertical-align: bottom; }行高足够小 - 基线位置上移：.box { line-height: 0; }
."nth-child"和"nth-of-type"的区别
“nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。