盒子模型

2022/4/13 23:15:14

编程Tag： 模型设置 top background margin 盒子外边

本文主要是介绍盒子模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

margin 相关技巧

margin:x auto;设置元素水平居中
margin负值让元素位移及边框合并

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        body{
            margin:0px;  /* 设置body中margin属性（默认有8px） */
        }
        .box{
            width:202px;
            height:156px;
            background-color:pink;
            margin: 50px auto 0;  /* 设置上边距50px 水平自动居中 下边距不设置 */
        }
        .box div{
            width:202px;
            height:30px;
            border:1px solid green;
            background-color:gold;
            margin:-1px;  /* 解决边框重叠变粗问题 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>
</html>

外边距合并（只适用于垂直方向）

在垂直方向上，当两个外边距相遇时，将会形成一个外边距，合并后的外边距高度等于两个外边距中较大的那个值。

举例：垂直方向上有两个盒子，盒子1 和盒子2。盒子1设置margin-bottom:20px; 盒子2设置margin-top:30px; 此时两个盒子的间距并不是50px，而是30px。

解决方法：
1. 使用这种特性
2. 设置一边的外边距，一般设置margin-top
3. 将元素浮动或定位

margin-top 塌陷（至少两个盒子）

在两个盒子嵌套时，内部的盒子设置margin-top会加到外边的盒子上，导致内部盒子设置失败。

解决方法：
1. 外部盒子设置一个边框
2. 外部盒子设置overfolw:hidden
3. 使用伪元素类

.clearfix:before{  /* 相当于方法1 */
    content:'';
    display:table;
}

点击查看代码

<!DOCTYPE html>
<html>

<head> 
<meta charset="utf-8"> 
<title>margin-top 塌陷</title> 
<style type='text/css'>
	.clearfix:before{
		content:'';
		display:table;
}
	body{
		margin:0;
}
	.box{
		width:200px;
		height:200px;
		background-color:gold;
		margin:auto;

		
}
	.con{
		width:120px;
		height:50px;
		background-color:green;
		margin-left:40px;
		margin-top:75px;
		
}


</style>
</head>

<body>
<div class='box clearfix'>
	<div class='con'></div>	
</div>
</body>

</html>

这篇关于盒子模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

盒子模型

margin 相关技巧

外边距合并（只适用于垂直方向）

margin-top 塌陷（至少两个盒子）

相关编程文章