块级元素（Block-Level Elements）

最新推荐文章于 2024-07-25 15:57:28 发布

老任物联网杂谈

最新推荐文章于 2024-07-25 15:57:28 发布

阅读量996

点赞数

分类专栏：前端技术文章标签： div 浏览器 class border 语言 header

前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

　　CSS中的盒子模型，我们都知道其组成结构。但是，在使用它时总觉得难以驾驭。　　
X轴方向：
　　定律：
　　　　1）width指的是盒子中内容的宽度，而不是盒子的宽度。
　　　　2）在普通流（ normal flow ）中，块级元素盒子的宽度一定等于该盒子的父容器的width。
　　　　3）X轴方向的属性：margin-left, border-left, padding-left, width, padding-right, border-right, margin-right。
　　　　　其中只有margin-left,margin-right,width可以设置为auto。
　　X轴方向使用auto：
　　　　1）设置三个属性中的一个为auto:
　　　　　由定律2）可知，子容器的盒子宽度一定等于该盒子的父容器的width。基于这条理论，如果我们设置X轴方向上的某一属性（margin-left,margin-right,width）为auto，浏览器会计算出一个数字value来替换auto，以使得子容器的盒子宽度等于父容器的width。
　eg.1
<div style="width:500px; background:#999;">
<p style="width:200px; margin-right:200px; margin-left:auto;">
This are some words...
</p>
</div>

　re.1
　div.width = p.width + p.margin-right + p.margin-left　　=>　　p.margin-left = div.width - (p.width + p.margin-right ) = 500 - (200 + 200) = 100px
　eg.2
<div style="width:500px; background:#999;">
<p style="width:100px; margin-right:200px; margin-left:100px;">
This are some words...
</p>
</div>

　re.2
　这个例子中，p的盒子宽度小于div的width。此时，浏览器会将margin-right:200px替换成margin-right:auto;
　注：这只是针对left-to-right的语言，如中文、英文，对于right-to-left的语言，此行为相反。即设置为margin-left:auto;
　2)同时设置三个属性中的两个为auto:
　除了定律2）要满足外，这两个设为auto的属性将平分剩余宽度（剩余宽度指的是：要使定律2）成立，还需要加上多少宽度）
　eg.3
<style type="text/css">
.content{
width:960px;
margin:0 auto;
}
</style>

<body>
<div class="content">
<div class="header">
</div>
<div class="leftCol">
</div>
<div class="rightCol">
</div>
<div class="footer">
</div>
</div>
</body>

　re.3　
　这个例子就是我们平时要做一个宽度为960像素且水平居中的典型例子，为了使得水平居中，我们设置margin-left,margin-right为auto，浏览器会自动为margin-left,margin-right的值设置为：(浏览器窗口宽度 - div.content.width)/2
　　　margin-left或者margin-right使用负值：
　　　规律：一定要满足定律2）
　eg.4
div {width: 400px; border: 3px solid black;}
p.wide {margin-left: 10px; width: auto; margin-right: -50px; }

<div>
<p class="wide">
this is a demo
</p>
</div>

　re.4
　p.wide.width = div.width - (p.wide.margin-left + margin-right) = 400 - (10 + (-50)) = 440px
Y轴方向：
　　　1）与X轴方向的属性一样，只有margin-top，margin-bottom和height可以指定为auto。
　　　2）不同的是，当我们在普通流中设置margin-top和margin-bottom为auto时，浏览器不予理会，而是自动把它设置为0 （注意，此规则不适于positioned元素）。这使得要上下居中变得困难。
　　　3）margin折叠：就大原则。