本文介绍了CSS3中的盒子模型，包括边距、边框、填充和内容四部分，并详细阐述了元素宽度和高度的计算方式。同时，文章讲解了margin、padding属性的用法，以及position属性的静态、相对、绝对、固定和粘性定位，以及重叠元素的z-index处理。
CSS3
CSS 用于控制网页的样式和布局。
CSS 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的宽度和高度
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: aqua;
width:300px;
height:300px;
border:25px solid green;
padding:25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px
试想一下，你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mm{
width: 220px;
height: 250px;
padding: 10px;
border: 5px solid aqua;
margin: 0px;
}
</style>
</head>
<body>
<img src="girls.jpg" width="250" height="250 "/>
<div class="mm">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>
</body>
</html>
最终元素的总宽度计算公式是这样的：
总元素的宽度=内容宽度+(左/右)内边距+(左/右)边框+(左/右)外边距
元素的总高度最终计算公式是这样的：
总元素的高度=内容高度+(上/下)内边距+(上/下)边框+(上/下)外边距
margin(外边距)
margin 设置元素的外边距。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右外边距，也可以一次改变所有的属性。
margin 可以使用负值，重叠的内容。
Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Margin 单边外边距属性</title>
<style>
p{
background-color: aqua;
}
.margin{
margin-top:100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落</p>
<p class="margin">这是一个指定边距大小的段落</p>
</body>
</html>
Margin - 简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是 margin :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Margin - 简写属性</title>
<style>
p{
background-color: aqua;
}
.margin{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落</p>
<p class="margin">这是一个指定边距大小的段落</p>
</body>
</html>
margin属性可以有一到四个值。
1、margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
2、margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
3、margin:25px 50px;
上下边距为25px
左右边距为50px
4、margin:25px;
所有的4个边距都是25px
padding（内边距）
元素中的内容与元素边框之间的距离–padding（内边距）
当元素的 padding内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding单边内边距属性</title>
<style>
p{
background-color: aqua;
}
.padding{
padding-top:25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落</p>
<p class="padding">这是一个指定边距大小的段落</p>
</body>
</html>
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是 padding :
Padding属性，可以有一到四个值。
1、padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
2、padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
3、padding:25px 50px;
上下填充为25px
左右填充为50px
4、padding:25px;
所有的填充都是25px
Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
static relative fixed absolute sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
正常的文档流对象—从左上角开始，向右下角，一个挨着一个依次顺序排列，碰到块级元素自动换行。
静态定位的元素不会受到 top, bottom, left, right影响。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static 定位</title>
<style>
.static{
width: 300px;
height: 300px;
background-color: yellow;
position: static;
}
.absolute{
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
left: 200px;
top: 200px;
}
.relative{
width: 300px;
height: 200px;
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
.fixed{
width: 300px;
height: 300px;
background-color: pink;
position: fixed;
left: 100px;
top: 100px;
}
#sticky{
width: 300px;
height: 300px;
background-color: greenyellow;
position: sticky;
left: 100px;
top: 200px;
}
</style>
</head>
<body>
<div class="static">
<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象</p>
<p>该元素使用了 position: static;</p>
</div>
<div class="absolute">
<h2>position: absolute;</h2>
<p>使用 position: absolute; 定位的元素，不遵循正常的文档流对象</p>
<p>该元素使用了 position: absolute;</p>
</div>
<div class="relative">
<h2>position: relative;</h2>
<p>使用 position: relative; 相对定位元素的定位是相对其正常位置。</p>
<p>该元素使用了 position: relative;</p>
</div>
<div class="fixed">
<h2>position: fixed;</h2>
<p>使用 position: fixed; 元素的位置相对于浏览器窗口是固定位置。</p>
<p>该元素使用了 position: fixed;</p>
</div>
<div id="sticky">
<h2>position: sticky;</h2>
<p>使用 position: sticky; 粘性定位的元素是依赖于用户的滚动。</p>
<p>在 position:relative 与 position:fixed 定位之间切换。</p>
</div>
</body>
</html>
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
