盒子模型

本文深入探讨了网页中元素的组织原则——盒子模型,包括其组成部分、如何影响元素布局,以及不同定位方式的应用。通过实例展示了盒子模型如何在实际网页设计中发挥作用,包括margin的‘塌陷’现象及负值margin的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         盒子模型是使网页中各个元素能合理地进行组织的一套原则和规范。有content(内容)、border(边框)、padding(内边距)、margin(外边距)4个部分组成。一个盒子实际在页面上占据的空间由“内容+内边距+外边距+边框”组成。也不是用<div>定义的网页元素才是盒子,所有的网页元素都可以看做是盒子。

    当连个元素是行内元素水平定位margin设置时,它们之间的距离是第一个元素的margin-right加上第二个元素的margin-left,若是垂直排列的块级元素,则margin的距离是两者制作较大的,这种现象称为margin的“塌陷”现象。

    当块级元素的定位为嵌套关系(父子关系,即一个元素包含另一个元素)时,margin将以父块的内容为参考

如下代码:

 
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
   <style type="text/css">
   div.father{
   background-color:#fffebb;
   text-align:center;
   font-family:Arial1, Helvetica, sans-serif;
   font-size:20px;
   padding:10px;
   border:1px solid #000000;
 }
 div.son{
 background-color:#a2d2ff;
 margin-top:30px;
 margin-bottom:0px;
 padding:15px;
 border:1px dashed #004993;
 }
 </style>
 </HEAD>
 <BODY>
<div class="father">
<div class="son">内容距离父div边框为10+30+15+1=56px</div>
</BODY>
</HTML>
运行效果如图:


可以看出外层盒子的宽度会自动延伸,直到浏览器边界为止,而里面嵌套的div宽度也会自动延伸,并以外面的内容部分为限。

      当margin为负值时会使设为负值的块相反方向移动,甚至覆盖在一个块上。


盒子的定位:

   盒子的定位有四中方式:

     static(静态定位 ,是默认值) :盒子以标准流方式布局

    relative(相对定位):盒子以标准流方式为基础,是盒子相对于原来的标准位置偏移指定距离。

    absolute(绝对定位):盒子的位置以它的包含框为基准偏移。

    fixed(固定定位):以浏览器窗口为基准定位,即拖动浏览器窗口滚动条是,依然保持对象位置不变。

  

内容概要:本文详细介绍了名为MoSca的系统,该系统旨在从单目随意拍摄的视频中重建和合成动态场景的新视角。MoSca通过4D Motion Scaffolds(运动支架)将视频数据转化为紧凑平滑编码的Motion Scaffold表示,并将场景几何和外观与变形场解耦,通过高斯融合进行优化。系统还解决了相机焦距和姿态的问题,无需额外的姿态估计工具。文章不仅提供了系统的理论背景,还给出了基于PyTorch的简化实现代码,涵盖MotionScaffold、GaussianFusion、MoScaSystem等核心组件。此外,文中深入探讨了ARAP变形模型、2D先验到3D的提升、动态高斯表示、相机参数估计等关键技术,并提出了完整的训练流程和性能优化技巧。 适用人群:具备一定计算机视觉和深度学习基础的研究人员和工程师,特别是对动态场景重建和新视角合成感兴趣的从业者。 使用场景及目标:①从单目视频中重建动态场景的新视角;②研究和实现基于4D Motion Scaffolds的动态场景表示方法;③探索如何利用预训练视觉模型的先验知识提升3D重建质量;④开发高效的动态场景渲染和优化算法。 其他说明:本文提供了详细的代码实现,包括简化版和深入扩展的技术细节。阅读者可以通过代码实践加深对MoSca系统的理解,并根据具体应用场景调整和扩展各个模块。此外,文中还强调了物理启发的正则化项和多模态先验融合的重要性,帮助实现更合理的变形和更高质量的渲染效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值