技术总结第一天
一、BFC
BFC，直译为：块级格式化上下文
位于文档中的普通流，它是一个独立的渲染区域，并且与区域外部毫无关系。
作用：①可以用于避免盒子的外边距合并；触发的条件是，为每个DIV标签添加一个父容器，并将其属性设置为overflow：hidden。
②清除浮动；由于浮动脱离了文档流，故在父容器中添加border的话只能显示上下两条border。解决的办法：为父容器添加overflow：hidden，触发BFC条件。
③阻止元素被浮动元素覆盖；为仍在文档流的元素添加overflow：hidden，触发BFC条件。
③阻止元素被浮动元素覆盖；为仍在文档流的元素添加overflow：hidden，触发BFC条件。
二、隐藏元素的几种方法
①display：none；使元素脱离文档流，不占据任何空间，消失在页面中。
②visibility：hidden；不脱离文档流，元素仍占据文档空间，但是不显示在页面中。
③opacity：0；将元素的透明度设置为0，元素一切都正常显示，只不过是因为透明度为0，我们看不见，等同于元素隐藏了。
④使用定位：position：absolute；绝对定位，脱离文档流，相对于最近的且不是static定位的父元素来定位，将元素通过margin的方式把元素移到屏幕外无关紧要的位置，我们在页面也看不到元素，等同于隐藏了元素。
⑤CSS3属性方法，clip-path：polygon（0px 0px, 0px 0px, 0px 0px, 0px 0px）,通过获取原图形的四个坐标来裁剪的方式变相隐藏了元素。
⑥transform：scale（0），对元素盒子进行缩放，从而达到隐藏的目的。（从四周向中心缩放）
三、CSS居中问题
行内元素：
水平居中：
①text-align：center；
②为父元素添加 width：fit-content 属性，父元素便会自适应于子元素的宽度，然后再通过父元素添加 margin：auto，也能实现水平居中
垂直居中：
①父元素添加属性 line-height 并将其值设置为等同于 height 的值，就能实现垂直居中，此方式只支持于单行文本。
块级元素：
水平居中：
①margin：0 auto；水平方向子元素自适应，添加于子元素的样式中
水平垂直居中：
①定位方式：为父元素添加position：relative（相对定位，没有脱离文档流），子元素添加position：absolute（绝对定位，脱离文档流），然后通过将子元素定位到top：50%；left：50%。再通过对子元素的margin设置返回自身宽高的一半，就能实现水平垂直居中；也可以为子元素添加属性方法，left：cale（50% - 自身宽度一半）；top：cale（50% - 自身高度一半）。
②定位+动画：同样使用子绝父相的定位方式，并将其移动到top：50%；left：50%；位置上。若不知道子元素盒子的宽高，可以通过动画方式transform：translate（-50%，-50%），也可以实现水平垂直居中。
③还是定位的方法：为子元素添加margin：auto，元素显示不变，再为子元素添加属性top：0；right：0；bottom：0；right：0；后，子元素就可以相对于父元素实现水平垂直居中的效果了。原理：当为子元素添加四个方位的属性后，父元素便有了可进行分配的空间，margin：auto；就会自动填充空间，就实现了水平垂直居中的效果了。
④padding方法：父元素盒子不设置宽高，只设置padding属性，也可以实现水平垂直居中。
⑤flex布局：为父元素添加display：flex；进行flex布局，再设置属性justify-content：center；（实现水平居中）align-content：center；（实现垂直居中）后，就可以实现水平垂直居中的效果了。
⑥通过父元素伪类的方法实现：先对子元素进行display：inline-bloke，是子元素成为行内块，再设置父元素的伪类，并将伪类的高度设置为父元素高度，宽度为0；也将伪类通过display：inline-block；设置为行内块形式（伪类默认为行内元素），最后通过对伪类与子元素都采用中线对齐（vertical-algin：middle），也可实现水平垂直居中。
全部评论
(1) 回帖