web开发的页面布局

最新推荐文章于 2023-03-14 16:15:27 发布

一斤草莓吃光光

最新推荐文章于 2023-03-14 16:15:27 发布

阅读量1.4k

点赞数

分类专栏： HTML与CSS 文章标签： css web开发布局

本文链接：https://blog.csdn.net/sinat_36713319/article/details/53671796

版权

HTML与CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web开发的页面布局

CSS的页面布局属性主要有四个： 1、margin和padding属性，分别指边距和填充，用来增加元素周围的空间 2、align和float属性，分别指对其和浮动属性，用于放置元素先说明边距和填充属性。一、边距 web中的元素具有自己的一个矩形区域，margin属性用于在这个矩形区域外再添加空白。 margin-top：设置上边距 margin-right：设置右边距 margi
复制链接

扫一扫