Web前端开发——CSS布局与定位之盒子模型（Ⅱ）padding、margin属性

最新推荐文章于 2023-12-02 09:30:00 发布

OSurer

最新推荐文章于 2023-12-02 09:30:00 发布

阅读量673

点赞数

分类专栏： Web前端开发文章标签： CSS布局与样式 margin padding

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104170979

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 对浏览器默认的设置清零

默认的浏览器会给它一个默以值，这个默认值包括字体字号，还包括每个盒子它的margin属性值和padding属性值所以为了正确布局，首先我们就要对浏览器默认的属性值进行清零，我们通常采用一个全局的样式，*作为样式的名字进行设定：

        *{
            margin: 0;
            padding: 0;
        }

值得注意的是，只有当它取值为零的时候，才可以省略掉它的单位，其它情况下是不可以的

2. padding和margin

2.1 基本属性

它们的取值都可以是像素值还可以是个百分比，如果设置为百分比，它的参照物就是外层的盒子具体的宽度和高度值
对于padding和margin来说我们可以把属性值设置在一起，用padding和margin本身来表示，比如说我们把它设置为5个像素就表示它的四个方向上都是5个像素大小，也单独的设置某个方向上的padding和margin的值。

当把属性值都设置在一起存在以下几种情况：

当为第一种情况时，1px为四个方向的取值；

当为第二种情况时，从top开始，按顺时针的顺序，即1、2分别为上、右，下左等于上右，完整表达即为1 2 1 2；

当为第三种情况时，与第二种情况类似，即上右下为123，左与右相同，完整表达为1 2 3 2；

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
    width:100px;
    height:100px;	
    margin:15px 10px 20px 30px;
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>   
</body>
</html>

值得注意的是：①就是每一个div标签做出来的盒子，它有一个换行的效果，也就是它会独占一行；

②它在垂直方向上有一个合并的效果，合并的结果就是哪一个高度更高，合并的结果就是哪一个高度

2.2 水平居中

如图所示，div的居中可通过设置margin实现，0指上下的值，这个值可任意设定，auto指左右的值浏览器会自动的根据外层盒子的一个宽度和div区域的一个宽度除以二自动的计算出来margin-left和margin-ight它的取值，它们是相等的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	padding:0px;
	margin:0px auto;
}
#container{
	margin: 50px auto ;
}
#newsimglist{
	text-align:center;	
	font-size:0;
	/*否则图间有空隙*/

}

#newsimglist img{	
	height:100px;
	width:100px;
    margin-left:5px;
	border:5px solid #0cf;
	padding:5px;
}	

</style>
</head>

<body>
 <div id="container">
     <div id="newsimglist">
         <img src = "images/crisis.jpg" />
         <img src = "images/crisis.jpg" />
         <img src = "images/crisis.jpg" />
     </div>
</div>	  
</body>
</html>