五.CSS盒子模型

所谓盒模型，就是浏览器为每个HTML元素生成的矩形盒子。即HTML页面实际上就是由一系列盒子组成。这些盒子是按照可见版式在页面上排布的。并由三个属性进行控制：position属性，display属性,float属性。

position属性：控制页面元素之间的位置关系

display属性:控制元素的堆叠、并排、显示

float属性:提供控制方式，以便把元素组成多栏布局

需要说明的是，默认情况下，我们是看不到盒子的。

每个盒子都有三个属性：

边框（border）：可以设置边框的宽窄、样式和颜色

内边距（padding）：可以设置盒子内容区与边框的间距

外边距（margin）：设置盒子与盒子的间距

下面我用一张图来展示下

一个盒子有四天边，因此，边距、内边距、外边距各有top、right、bottom、left四条边

好啦，说了那么多废话，我们来实际的演示下

首先了，创建具有两个段落的HTML文档

<!DOCTYPE html>
<html>
<head>
<title>CSS盒模型演示</title>
<meta charset="utf-8">
<link href="in_css/box.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p_1">
    西山白雪三城戍，南浦清江万里桥。<br>
    海内风尘诸弟隔，天涯涕泪一身遥。<br>
    惟将迟暮供多病，未有涓埃答圣朝。<br>
    跨马出郊时极目，不堪人事日萧条。<br>

</p>
<p class="p_2">
    锦瑟无端五十弦，一弦一柱思华年。<br>
    庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
    沧海月明珠有泪，蓝田日暖玉生烟。<br>
    此情可待成追忆，只是当时已惘然。<br>

</p>

</body>
</html>

然后，设置第一个段落的外边距为100px，在浏览器中查看效果

我们可以看到整个段落外边距情况

当单独为每条外边距编写样式的时候。显示如下

p.p_1{
margin-top: 100px;
margin-right: 400px;
margin-bottom: 50px;
margin-left: 400px;

}

几种简写说明：

①

p.p_1{
margin: 200px 500px 20px 500px;

}

不写全

margin-top:200px;margin-right: 500px;margin-bottom:20px;margin-left: 500px;

默认按照顺时针顺序设置外边距

②自动取对边值

margin-top:200px;margin-right: 500px;margin-bottom:20px;

上面的代码最后一个外左边距没有写出，它会自动取右边距的值。同理可以省去下外边距

③只写一个值

margin: 50px;

则四条外边距全部取一样的值

下文待续……

秒客网

五.CSS盒子模型

相关文章