盒子模型

     今天遇到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属性的前提下，上面显示效果的代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">
 
#outer{
   background-color:blue;
   width:150px;
   height:100px;
}
#inner{
   margin-left:20px ;
   margin-top:30px;
   padding-top:20px;
   background-color:red;
   width:100px;
   height:20px;
 
}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>
 
</body>
</html>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">
 
#outer{
   background-color:blue;
   overflow:hidden;
   width:150px;
   height:100px;
}
#inner{
   margin-left:20px ;
   margin-top:30px;
   padding-top:20px;
   background-color:red;
   width:100px;
   height:20px;
 
}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>
 
</body>
</html>

 

 

    

posted @   xshang  阅读(892)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手