五.CSS盒子模型

时间:2022-12-13 22:53:58

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

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

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

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

 

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

每个盒子都有三个属性:

边框(border):可以设置边框的宽窄、样式和颜色

内边距(padding):可以设置盒子内容区与边框的间距

外边距(margin):设置盒子与盒子的间距

下面我用一张图来展示下

五.CSS盒子模型

一个盒子有四天边,因此,边距、内边距、外边距各有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,在浏览器中查看效果

五.CSS盒子模型

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

五.CSS盒子模型

 

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

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

}

五.CSS盒子模型

 

几种简写说明:

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;

则四条外边距全部取一样的值
 
 
下文待续……