zoukankan      html  css  js  c++  java
  • (转)当margin-top、padding-top的值为百分比时是如何计算的?

    本文链接:https://blog.csdn.net/qq_27437967/article/details/72625900
    问题:当margin-top、padding-top的值是百分比时,分别是如何计算的?
    A 相对父级元素的height,相对自身的height
    B 相对最近父级块级元素的height,相对自身的height
    C 相对父级元素的width,相对自身的width
    D 相对最近父级块级元素的width,相对最近父级块级元素的width

    答案:D

    可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)

    如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式,使其元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。

    为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢?

    CSS权威指南中的解释:

    我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距时父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如果循环。




    原文链接:https://blog.csdn.net/qq_27437967/article/details/72625900

  • 相关阅读:
    后端架构师技术图谱
    互联网经典技术架构
    软件开发知识体系(二)
    软件开发知识体系(一)
    HSF源码剖析
    分库分表的几种常见形式以及可能遇到的难题
    iOS 关于MVC和MVVM设计模式的那些事
    MVC与MVP简单对比
    MVC、MVP、MVVM 模式
    Learning Android ActionBar
  • 原文地址:https://www.cnblogs.com/lwj-blog/p/11437047.html
Copyright © 2011-2022 走看看