CSS的页面布局属性主要有四个:
1、margin和padding属性,分别指边距和填充,用来增加元素周围的空间
2、align和float属性,分别指对其和浮动属性,用于放置元素
先说明边距和填充属性。
一、边距
web中的元素具有自己的一个矩形区域,margin属性用于在这个矩形区域外再添加空白。
margin-top:设置上边距
margin-right:设置右边距
margin-bottom:设置下边距
margin-left:设置左边距
margin:将上、右、下、左作为单个属性进行设置
margin-top:10px;
margin-right:10px;
或者是直接使用margin属性
margin:15px;
margin:10px 5px 0px 0px;
二、填充
填充是在元素的矩形空间内添加空间,与边距的区别就在于添加的位置,边距是在矩形区域外添加空白,而填充是在矩形区域内添加和元素属性一样的内容。
它的使用和margin类似
padding-top:设置上填充
padding-right:设置右填充
padding-bottom:设置下填充
padding-left:设置左填充
可以使用以上属性单独设置填充,也可以直接使用padding设置,用法与margin一样。
下面几个图可以明显看出填充的作用
<!DOCTYPE html>
<html>
<head>
<h1 style="text-align:center">This is my page.</h1>
<style type="text/css">
div{
width: 250px;
height: 250px;
border: 1px solid #000000;
color: black;
font-weight: bold;
text-align: center;
}
div#d1{
background-color: red;
margin: 25px;
padding:10px;
float: left;
}
div#d2{
background-color: green;
margin: 25px;
padding:30px;
float: left;
}
div#d3{
background-color: blue;
padding: 50px;
margin: 25px;
float: left;
}
</style>
</head>
<body>
<div id="d1">DIV#1</div>
<div id="d2">DIV#2</div>
<div id="d3">DIV#3</div>
</body>
</html>
红色方块:padding10像素
绿色方块:padding30像素
蓝色方块:padding50像素
虽然三个方框最初高度和宽度设置都是250px,250px,但是最终显示的三个方框大小是不同的,同时要注意文本“DIV #~”的位置。
但是填充并不是改变了元素的大小,而是在元素的矩形区域内又进行了扩展,扩展部分与元素属性相同,因此,我们看到的是方框的大小不一。