zoukankan      html  css  js  c++  java
  • CSS的易错整理系列

    1、(×)css盒子模型?

    border-box和content-box
    width部分说的很乱
    现在我知道了,确实是width,offset只是为了好计算的
    2、(×)垂直居中,有几种方法
    说了flex、position,vertacal-align,line-height 那如果是就父元素呢。行内块又怎么办
    为什么记不住?死知识记不住?css真难缠
    (1)行内
    父元素水平:text-align :center
    父元素垂直:line-height设置成和height一样 
    也正是因为行内,所以都要设置在它外层的盒子身上!!(父元素不能设置成100% 
    2、块级
    (1)外position relative
    内absolute,top: 50%;left: 50%;
     此时是这样,然后平移自身的一半 transform: translate(-50%,-50%); 
    tranform:改变,使改变
    translate:转化,翻译,移动,本来这个就是往哪里移动的
    记的话就是me
    【或者是知道了具体的宽高,那就写margin-top和left的负值】
    (2)flex布局,IE是有些兼容问题的。都在父级    
    (3)table布局也是实现方法的一种,但不太常用~
    水平① display: table-cell;
    vertical-align: middle;以上这两种就已经实现了 垂直居中
    垂直② text-align: center;
    行内:直接就ok了【这就是上面的那个方法】
    块:这个一定要给块级子元素设置一个 display: inline-block 才能用
    垂直③ margin 0 auto
    快:如果子元素是div这种这个ok
    行内就不行了

     3、(×)清除浮动,几种方法

    说了flex、position、overflow hidden,设置before伪元素
    为什么就还在往后问??
    原因:排版会超出父元素,甚至会影响兄弟元素
    【首先解释部分】
    eg:父topDiv 浮动floatDiv (左浮)子textDiv / 父的兄弟bottomDIv
    首先 textDiv设置clear left
    (1)通过上面的样式,.textDiv告诉浏览器,我的左边不允许有浮动的元素存在,请清除掉我左边的浮动元素。然而,因为浮动元素(.floatDiv)位置已经确定,浏览器在计算.textDiv的位置时,为满足其需求,将.textDiv渲染在浮动元素下方,保证了.textDiv左边没有浮动元素。同时可以看出,父元素的高度也被撑起来了其兄弟元素的渲染也不再受到浮动的影响,这是因为.textDiv仍然在文档流中,它必须在父元素的边界内,父元素只有增加其高度才能达到此目的,可以说是一个意外收获。(clear的值为both也有相同的效果,通俗理解就是,哪边不允许有浮动元素,clear就是对应方向的值,两边都不允许就是both)
    (2)如果先孩子,再float元素(不行,因为先确定子元素,浮动另起一行就影响不到了)(所以也有个局限,最好的还是用空的代替)
    .textDiv的位置先确定了,于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。然而,父元素的高度并没有被撑起来,没有将浮动影响“内化”,导致浮动影响到了接下来的元素排版。
    实际上,这里主要是为了清除浮动,撑起来父元素是个附属品
    (3)根据这个思路,因为不能确定是否父元素的最后一个元素能否做到clearboth 更为通用的是添加一个blank来清除
     <div class="blankDiv"></div>
    注意必须是块级元素,否则无法撑起父级元素高度。
    (是因为为了满足这个块级的clear要求,父元素额外定位的,行内的话就没有高度了)
    (4)同样的 原理 只是利用伪元素来做都不用加新元素了
    原理是,想让after的左边也没有伪元素,这样兄弟就正常了,底部和父元素的边框也正常了,
    可以看到before是完了才另起一行的,after才能碰到float,所以就在after身上设置clear both
    设置block是必须要有高度才能有能力撑起来,哪怕高度是0,也是有那个能力在的…… 如果是行内的话就直接被忽略了块元素不会!
    (5)父元素  overflow: auto;
    这里的overflow值,可以是除了"visible"之外的任何有效值
    副作用比如,scroll值会导致滚动条始终可见,hidden会使得超出边框部分不可见等
    因为bfc:BFC在计算高度的时候,内部浮动元素的高度也要计算在内。也就是说,即使BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,高度是大于等于浮动元素的高度的。
    display inline -block也可以bfc,但是
    在各种构建BFC的方式中,overflow方式可能是外部影响更可控的一种所以也是最常用
    【其次解决方案】
    解决方案:看了半天,一般这三个是最主流的:
    (1)比如有三个浮动的元素,再加一个浮动的子元素,并设置clear: both
    语义化不太好
    (2)父元素overflow:hidden,形成bfc(scroll也可以)
    (3)父元素伪元素
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content:"";display:block;clear:both;}.clearfix{*zoom:1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/}
    其他的bfc会有一些问题(子元素它确实没有影响到外部了,这个影响是父元素影响到了外部)
    QAQ bfc呢,也是
    overflow(不是visible)
    display flex 、inline-block
    position(ab,fix)
    float(right left
    (但首先bfc有一些问题,尤其是下面那两个,其次你讲bfc太混乱了人家不懂)
     
    附赠补充:
    1、伪类 
    伪类是选择器的一种,它用于选择处于特定状态的元素,比如当它们是这一类型的第一个元素时,或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样,帮你在你的标记文本中减少多余的类,让你的代码更灵活、更易于维护
    伪元素
    表现得是像你往标记文本中加入全新的HTML元素一样,而不是向现有的元素上应用类。伪元素开头为双冒号::(早期单冒号 但是双冒号更规范哦)
    比如::first-line可以精准自适应选中第一行
    ::before  这些伪元素的更推荐的用法是插入一个图标,例如下面的示例加入的一个小箭头,作为一个视觉性的提示,而且我们并不希望屏幕阅读器读出它。
    深拷贝和浅拷贝的区别 √ 

    首先明确,深浅都是对复杂数据类型来说的,简单是无所谓的

    浅拷贝:地址是不同的,let userCopy = Object.assign({}, user) 展开运算符同

    浅拷贝只是复制了对象里的简单数据类型,浅拷贝 [ 对于对象里的复杂数据类型 只是复制了地址。 ]

    深拷贝:对于所有的复杂类型,都是新开辟了内存空间

  • 相关阅读:
    python-用闭包(装饰器)实现计算器的功能
    python 斐波那契数列
    python 递归方法
    python冒泡排序
    一步步学习ASP.NET MVC3 (6)——@helper,@functions
    一步步学习ASP.NET MVC3 (5)——View从Action中获得数据
    一步步学习ASP.NET MVC3 (4)——Razor(2)
    一步步学习ASP.NET MVC3 (3)——Razor(1)
    ASP.NET MVC Spring.NET NHibernate 整合
    ASP.NET MVC NHibernate 整合
  • 原文地址:https://www.cnblogs.com/lx2331/p/15202387.html
Copyright © 2011-2022 走看看