zoukankan      html  css  js  c++  java
  • 盒模型的各种魔法(有点黑)

    盒模型的各种魔法(有点黑)

    这篇主要是用来系统地整理盒模型和盒模型的一些黑魔法
    如果还有什么好玩的黑魔法可以加我的QQ387857274一起讨论

    灵活单盒模型

    先不讨论其父盒和其他盒对它的影响和固定尺寸且不含任何定位

    img
    我们的子元素就是从最中间的那块content中诞生的

    单盒的表现

    1. 文字和子盒的尺寸

    如盒中存在inline 或者文字或者 具有尺寸子盒,则此盒会一占一行并且高度等于line-height或者子盒的高度

    2. padding和border

    设置padding和border会增加盒的宽度或者高度(不设box-sizing)
    设置了box-sizing 他俩都不会影响宽度或者高度,会压缩盒内空间

    灵活单盒与他娘

    情况一
    当灵活单盒所在的content区域被压缩时

    这个应该很好理解,因为他存在范围就是他娘的肚子嘛
    img
    他娘吃了东西后
    img

    情况二
    当灵活单盒自己想不开 第二张设置margin水平之后,垂直方向只会改变位置,然后就是

    img
    img

    情况三
    当灵活单盒 绝对定位 成功设置任意对方向的一对坐标后

    img
    当设置top:0;bottom:0;时
    img

    这里单盒的高度会随父元素的高度变化而变化

    固定单盒模型

    尺寸固定的盒模型
    1. 设置固定的px时

    其尺寸只在不设置box-sizing的情况下padding尺寸会增加

    2. 设置百分比时

    此时元素会根据父元素content的大小分配空间

    不管什么情况都是这么个准则

    盒模型的耻辱

    为什么说是耻辱呢,身为一个盒你丫居然给子元素留后门,像我这种正义的男子是不会接受后门这种事的,来看看是怎么样个耻辱

    这里有三个盒子嵌套,加上body 四个
    img
    当test1设置margin-top:100px;时
    img
    可以看到4个盒子都向下移动了100px,这里就不展示下边距的问题了;这就是我所说的“后门”

    相当于每个盒子都有上下两个后门,供每个盒子内子元素的外边距来去自如,马蛋,耻辱

    好了先写到这,还有什么盒模型的黑魔法大家可以加我的QQ387857274探讨探讨

  • 相关阅读:
    MVC,KVO,KVC的简单认识
    Objective-C之集合对象
    Objective-C之词典对象
    Objective-C之数组对象
    Objective-C关键字static
    IOS做天气预报
    同步和异步GET,POST请求
    iOS开发常用的开源库和示例
    KVC KVO KVB
    iOS中的 沙盒文件夹 (数据的写入和读取,归档和反归档)
  • 原文地址:https://www.cnblogs.com/ZxrGloria/p/5323178.html
Copyright © 2011-2022 走看看