• CSS(二)


    1.BFC(块级格式上下文,用于清除浮动,防止margin重叠等)

    块级格式上下文,是一个独立的渲染区域,并且有一定的布局规则。BFC区域不会与float box重叠,BFC是页面上的一个独立的容器,子元素不会影响到外面,计算BFC高度时,浮动元素也会参与计算。

    1.1哪些元素会生成BFC

               根元素,float不为none的元素,position为fixed和absolute的元素,display为inline-bolck,table-cell,table-caption,flex,inline-flex,的元素。overflow不为visiable的元素。

    2.垂直居中的方法

             (1)magin:0 auto定位为上下左右为0,margin为0可以实现脱离文档流居中

             (2)margin负值法,margin-top设为-height的一半,margin-top设为-width的一半

             (3)transform:translate(-50%,-50%)

             (4)flex布局:justify-content:center;aligin-items:center;

             (5)table-cell(未脱离文档流的)设置父元素的display:table-cell;vertical-align:middle

    3.js动画和css3动画的差异性

             渲染线程分为main thread(主线程)和compositor thread(),如果css只改变transform和opcaity,这时整个css动画得以在compsitor thread完成(而js动画则会在main thread执行,然后发出compositor thread进行下一步操作),特别注意的是如果改变transform和opacity是不会layout或者paint的。

    区别:涵盖功能面,js比css大;实现/重构难度不一,css比js更加简单,性能调优方向固定;对帧速表现不好的低版本浏览器,css3可以做到自然降级;css有天然事件的支持,js需要自己写事件;css3有兼容性问题,而js大多时候没有兼容性问题。

    4.块元素和行元素

             块元素:独占一行,并且自动填满父元素,可以设置margin,padding,宽度和高度。

             行元素:不独占一行,width和height失效,并且垂直方向的margin,padding失效。

    5.visiblity=hidden;opacity=0;display:none

    • opacity=0,该元素隐藏起来,且不会改变页面的布局,如果该元素有绑定事件,如点击事件,那么再次点击该元素依旧会触发该事件。Visibility=hidden,该元素隐藏起来,不影响页面布局,不会触发绑定事件。Display=none,把元素隐藏起来并且会影响页面布局,可以理解为在页面中删除。
  • 相关阅读:
    基贝叶斯后验概率的拼写检查器实现 python
    Hadoop The Definitive Guide 2nd Edition 笔记
    DGV删除当前选中行
    DGV设置单元不可编辑
    DGV获取当前选中单元格
    HDU2112_HDU Today_有地名的最短路_map+SPFA
    HDU1026_优先队列+广搜+打印路径
    HDU2757_Ocean Currents_优先队列+广搜_入门题_十四周模拟赛
    自己写的SPFA模板(可打印路径)
    HDU2782_暴力深搜_第十四周模拟赛
  • 原文地址:https://www.cnblogs.com/mlebk/p/12426219.html
Copyright © 2020-2023  润新知