打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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


灵活单盒模型

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


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

单盒的表现

1. 文字和子盒的尺寸

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

2. padding和border

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

灵活单盒与他娘

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

这个应该很好理解,因为他存在范围就是他娘的肚子嘛


他娘吃了东西后

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


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


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

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

固定单盒模型

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

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

2. 设置百分比时

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

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

盒模型的耻辱

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

这里有三个盒子嵌套,加上body 四个


当test1设置margin-top:100px;时

可以看到4个盒子都向下移动了100px,这里就不展示下边距的问题了;这就是我所说的“后门”

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
深入理解CSS盒子模型(2)
标准盒模型和怪异(ie)盒模型的对比
盒子模型
了解CSS盒状模型 设计更佳网页
css的盒子模型属性有哪些?css盒子模型相关属性的介绍
CSS知识总结
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服