zoukankan      html  css  js  c++  java
  • 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,把元素隐藏起来并且会影响页面布局,可以理解为在页面中删除。
  • 相关阅读:
    int是逻辑炸弹吗?
    悲剧
    下班啦
    Android SDK 2.2 开发环境安装
    MVC
    用于主题检测的临时日志(61d47e0cd5874842a9f56a725c1f25f6 3bfe001a32de4114a6b44005b770f6d7)
    ASP.NET读取XML文件
    asp.net执行顺序
    理解POCO
    乐观中谨慎 招聘调薪现"贫富差距"
  • 原文地址:https://www.cnblogs.com/mlebk/p/12426219.html
Copyright © 2011-2022 走看看