CSS（5）盒子模型

最新推荐文章于 2022-06-11 20:56:40 发布

棋宣

最新推荐文章于 2022-06-11 20:56:40 发布

阅读量622

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/flower521528/article/details/123269729

版权

本文详细介绍了CSS中的盒子模型，包括内边距和外边距的设置方法，并指出外边距合并的特性及解决策略。同时，讨论了如何使用`margin: 0 auto`实现块元素的水平居中，并提供了实际代码示例。此外，还提到了文本垂直居中的实现方式。

摘要由CSDN通过智能技术生成

一、标准盒子模型

每个标签都类似于盒子有内边距和外边距

1.内边距设置

padding-left：10px；	左边的边距
padding-right：10px；	右边的边距
padding-top：10px；	上面的边距
padding-bottom：10px；	下面的边距

简写：padding:10px;上下左右都是10px；

padding：10px 20px；第一个值是上下的边距，第二个值是左右的边距；

padding：10px 20px 30px；第一个值是上面的边距，第二个值是左右的边距，第三个值是下面的边距

padding：10px 20px 30px 40px；第一个值是上面的边距，第二个值是右面的边距，第三个值是下面的边距，第四个值是左边的边距，呈顺时针方向

2.外边距设置

margin-top：10px	上面外边距为10
margin-bottom：20px	下面外边距为20
margin-left：30px	左边外边距为30
margin-right：40px	右面外边距为40

简写：margin:10px;上下左右都是10px；

margin：10px 20px；第一个值是上下的边距，第二个值是左右的边距；

margin：10px 20px 30px；第一个值是上面的边距，第二个值是左右的边距，第三个值是下面的边距

margin：10px 20px 30px 40px；第一个值是上面的边距，第二个值是右面的边距，第三个值是下面的边距，第四个值是左边的边距，呈顺时针方向

注意:外边距自带的一些bug

两个盒子之间的距离是外边距，但他们之间的距离不是相加的；

例如：

正常逻辑是第一个盒子和第二个盒子距离应该是30px，但是它们实际距离是30px

这就是外边距之间的bug，两个盒子的上下边距，之间的距离按最大的一个算。

同样，盒子里面套小盒子也是这样算的。

这块希望大家多多注意，只有上下外边距是这样的，左右外边距是正常逻辑。

<style>
    .box{
        margin-bottom:30px;
    }
    .box1{
        margin-top:20px;
    }
</style>

<body>
    <div class="box">第一个盒子</div>
    <div class="box1">第二个盒子</div>
</body>

解决办法:

给上下盒子做溢出处理，就能实现正常逻辑的算法。

给盒子套个父盒子，做溢出处理。

	    <style>
        .boxfa{
				overflow:hidden;
			}
			.box2fa{
				overflow:hidden;
			}
			.box{
				margin-bottom:30px;
			}
			.box2{
				margin-top:30px;
			}
		</style>
	</head>
	
	<body>
		
		<div class="boxfa">
			<div class="box">hello</div>
		</div>
		
		<div class="box2fa">
			<div class="box2">world</div>
		</div>
		
	</body>
</html>

二、块元素居中

margin：0 auto;：实现块元素的居中

当行高等于块元素的值时，可以实现文本上下的居中。

<style>
			.context{
				width:1000px;
				height:100px;
				background-color:#008000;
				text-align:center;
                line-height:100px;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<div class="context">
			托马斯家的
		</div>
	</body>

棋宣

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS（5）盒子模型

一、标准盒子模型每个标签都类似于盒子有内边距和外边距内边距设置padding-left：10px；左边的边距 padding-right：10px；右边的边距 padding-top：10px；上面的边距 padding-bottom：10px；下面的边距简写：padding:10px;上下左右都是10px；padding：10px 20px；第一个值是上下的边距，第二个值是左右的边距； padding：10px...
复制链接

扫一扫