web开发的页面布局

来源：互联网发布：异形契约知乎编辑：程序博客网时间：2024/06/01 10:26

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 #~”的位置。
但是填充并不是改变了元素的大小，而是在元素的矩形区域内又进行了扩展，扩展部分与元素属性相同，因此，我们看到的是方框的大小不一。

0 0