• 深入浅出CSS:Div(一)


    这个系列是学习笔记,简明记录结论性的知识。

    新建一个层时,border为零,margin为0,padding为0,如果不指定宽度(width),则自动100%填充父元素。

    三、层与父元素的关系

    1. 举例,直接建立一个新层div1,则它的父元素就是body,当给新层添加内外补白或边框等等时,body的宽度并未发生变化。

    当层不断的扩张,比如增加margin,padding或border时,它的总长或总宽=本身+扩张的长/宽。

    当层扩张后的宽度到达极限等于body的宽度时,就不能继续扩张,因为父元素的宽度不会变,这时再增加宽度,只能在内部压缩。

    原理1:层无论怎么扩张,都不会超过父元素的宽度。如果想让一个层的宽度固定不变(层A),利用这个原理,就在这个层的内部再套一个内部层(层B),则层B无论怎么扩张都不会超过层A。*也就是栏高限制内容

    原理应用实例1:

    如图所示,外层wrapper包裹三个内部层ABC,并且三个内部层的宽度之和正好等于wrapper层宽度。

    当扩大内部层的宽度时,比如层B,由于宽度大于外部层,所以会将最右边的层C挤落。

    解决方法:

    1.进行精确计算,扩张多少,内部层就减少多少宽度,缺点:需要不停的精确计算。

    2.在需要改变的层内再套一个内部层,然后将内容放在内部层中(前面原理的应用)

    3.用CSS3的新功能。

  • 相关阅读:
    洛谷P1880 石子合并
    洛谷P3265 装备购买
    bzoj1345 序列问题
    从群里抄来的某题
    poj2689 Prime Distance
    灯 & 树
    [HNOI2013]游走
    A
    B
    hdu 1247 Hat’s Words(字典树)
  • 原文地址:https://www.cnblogs.com/tinaluo/p/7099057.html
Copyright © 2020-2023  润新知