zoukankan      html  css  js  c++  java
  • 盒子模型

         今天遇到css中的盒子模型问题,因此研究了一下。

         盒子模型是相对于一个元素的,每个元素都有自己的盒子,可以设置margin,border,padding,content.

         从外到内一次是:margin,border,padding,content.

         设置高和宽是实际上是设置border的height和width属性。

         元素的宽度计算公式为:margin-left+border-left+padding-left+content+padding-right+border-right+margin-right;

         而且margin是相对于相邻元素的外边距。

         在嵌套相邻元素中,设置内层元素margin-top时不起作用,原来是没有激活外层元素的layout属性,即内层元素没有获得外层父级元素的layout属性。

         具体什么原因,还是不太明白,可以根据下面方法解决:

         为父级元素加上float,overflow,position,padding-top属性来激活layout属性渲染自己。

         

         在没有激活父级元素layout属性的前提下,上面显示效果的代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title>###</title>
    <style type="text/css">
    
    #outer{
       background-color:blue;
       150px;
       height:100px;
    }
    #inner{
       margin-left:20px ;
       margin-top:30px;
       padding-top:20px;
       background-color:red;
       100px;
       height:20px;
    
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <p id="inner">生命的起源</p>
    </div>
    
    </body>
    </html>
    

    上面是激活父级元素的layout属性后的显示效果,比如在父级元素中加入overflow属性,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title>###</title>
    <style type="text/css">
    
    #outer{
       background-color:blue;
       overflow:hidden;
       150px;
       height:100px;
    }
    #inner{
       margin-left:20px ;
       margin-top:30px;
       padding-top:20px;
       background-color:red;
       100px;
       height:20px;
    
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <p id="inner">生命的起源</p>
    </div>
    
    </body>
    </html>
    

        

  • 相关阅读:
    利用runtime检測这个对象是否存在某属性?
    Android Studio 使用 SVN 必然遇到问题:commit ** File out of data 问题解决方法
    JPA測试实例
    pat(A) 1063. Set Similarity(STL)
    @Override用在哪儿
    Highcharts数据表示(3)
    #pragma pack (n) 惹的祸
    C++二阶构造函数
    使用自定义的控件
    C++ explicit
  • 原文地址:https://www.cnblogs.com/xshang/p/3515053.html
Copyright © 2011-2022 走看看