一个网站做两个语言模板可以吗,wordpress被植入广告插件,佛山搭建建网站哪家好,设计培训培训网站建设关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)起因#xff1a;在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height高度#xff0c;无法居中#xff0c;发现源码.navbar-brand 设置了 padding: 15px 15px;(默认…关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)起因在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height高度无法居中发现源码.navbar-brand 设置了 padding: 15px 15px;(默认导航高度为50)于是居中应该是等于高度-30解决过程中写了几个div用于检测问题结果遇到了以下问题经过数小时的研究(时间大多花费在百度与谷歌上以及研究原因上)于是写下这篇文章做个总结加深个人记忆。我写了两个div从上往下分别标记为div1和div2设置了相同的margin与高宽然后给div1设置左浮动。那么根据我薄弱的基础判断这时候刷新页面应该出现的是两个div重叠在一起只显示一个div但是结果出现了偏差两个div并没有叠加显示并且div1出现在了div2下方。(F5后的显示)预期的结果并没有出现然后开始排查写的代码发现问题出现在margin上清除div的maring后元素显示正常不会出现错位。(清除了margin之后的正常状态)由于margin-left是正常的所以显然是margin-top的设置出现了些问题于是推理查找问题n分钟后得出如下结论正常文档流状态下div1浮动脱离了文档流然后div2这时候依旧处在文档流状态于是向上移动至div1浮动前的位置这时候body的位置发生改变向下移动了div2设置的margin-top的距离(又一个问题出现了为什么div2设置的margin能够改变body的位置或者说是父元素的位置好吧这个问题经过百度与测试后发现是个固有问题在文章末尾做详细说明)。(蓝色部分是body)而div1这时候处于浮动状态由于同样设置了margin所以浮动后同样会改变位置div1浮动后根据body的位置重新进行定位所以div1浮动后两个div的位置不会重合。(解决方法-给body添加padding-top或者border——详情见结尾。)(可以很明显看出div2根据body进行了margin定位)两个div的css如下1 div:nth-child(1){2 float:left;3 margin:50px;4 width:200px;5 height:200px;6 border:10px solid #000;7 }8 div:nth-child(2){9 margin:50px;10 width:200px;11 height:200px;12 border:10px solid #000;13 }关于子元素的margin-top会改变父级元素的位置(也就是div2的margin-top改变了body位置)以下。这个问题发生的原因是根据规范一个盒子如果没有上补白(padding-top)和上边框(border-top)那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。再说了白点就是父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级假传圣旨把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
