前端每日个人总结

技术总结第一天

一、BFC 

BFC,直译为:块级格式化上下文
位于文档中的普通流,它是一个独立的渲染区域,并且与区域外部毫无关系。
作用:①可以用于避免盒子的外边距合并;触发的条件是,为每个DIV标签添加一个父容器,并将其属性设置为overflow:hidden。
           ②清除浮动;由于浮动脱离了文档流,故在父容器中添加border的话只能显示上下两条border。解决的办法:为父容器添加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),也可实现水平垂直居中。


全部评论
点赞 回复
分享
发布于 2021-03-30 10:53

相关推荐

3 2 评论
分享
牛客网
牛客企业服务