CSS盒模型细节讲解

最新推荐文章于 2024-08-21 22:53:13 发布

置顶 Stirve unremitting

最新推荐文章于 2024-08-21 22:53:13 发布

阅读量919

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104850573

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 186px;
				height:186px;
				background: red;
				border:10px solid #000;
				/*padding:10px;/*内边距*/
				/*padding:10px 30px;
				padding:10px 20px 30px;*/
				padding:10px;/*内边距*/
				padding:10px 30px;/*上下 左右*/
				padding:10px 30px 50px;/*上 左右 下*/
				padding:10px 20px 30px 40px;/*上 右 下 左*/
				
			}
			
			.box2{
				width: 186px;
				height:186px;
				background: red;
				border:10px solid #000;
				padding-top:10px;/*顶部内边距*/
				padding-right:50px;/*右内边距*/
				padding-bottom:30px;/*底部内边距*/
				padding-left:20px;/*左内边距*/
			}
		</style>
	</head>
	<body>
		<!--
			外边距:	改变元素外边的间距
			内边距: 	改变元素与内容的间距
				padding:一个值; 一个值,改变四个方向
				padding:上下  左右;
				padding:上 左右 下;
				padding:上 右 下 左;顺时针方向变化
				
				padding-top:顶部内边距;
				padding-right:右内边距;
				padding-bottom:底部内边距;
				padding-left:左内边距;
				注意:内边距没有负值;
				
				margin:四个方向;
				margin:上下 左右;
				margin:上 左右 下;
				margin:上 右 下 左;
				
				margin-top:上外边距;
				marign-right:右外边距;
				marign-bottom:下外边距;
				marign-left:左外边距;
				注意: margin可以为负值, auto自适应
				
			margin常见bug:
				1: 上下外边距相遇,只显示较大值
				2: 嵌套关系的元素,子元素的上外边距和父元素的上外边距相遇,取较大值
				
			盒模型占位计算:
				w= width+左右边框+左右内边距+左右外边距
				h= height+上下边框+上下内边距+上下外边距
				
			
		-->
		<div class="box">
			<img src="img/3.jpg" />
		</div>
		<div class="box2">
			<img src="img/3.jpg" />
		</div>
		哈哈哈哈哈
	</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型细节讲解

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 186px; height:186px; backgroun...
复制链接

扫一扫