CSS基础：盒子模型&padding撑大盒子

最新推荐文章于 2024-06-23 12:25:57 发布

渣猫略懂

最新推荐文章于 2024-06-23 12:25:57 发布

阅读量1.1k

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120632581

版权

盒子模型边框样式内边距 div元素布局调整

关键词由CSDN通过智能技术生成

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 盒子模型分为三个部分：从内至外分别是：盒子内容、盒子内边距padding、盒子边框border、盒子外边距margin
			 每个属性都有四个方向：上top、右right、下bottom、左left*/
			 /* 边框border */
			#div1{
				height: 100px;
				width: 200px;
				/* 边框宽度 */
				border-width: 5px;
				/* 边框样式：实线solid、虚线dashed、点线dotted、双实线double、无边框none */
				border-style: solid;
				/* 边框颜色：默认黑色 */
				border-color: #006400;
				/* 下边框颜色 */
				border-bottom-color: #00FFFF;
				/* 上边框连写 */
				border-top:1px dashed #A52A2A;
				/* 全部边框连写 */
				border:3px double #DAA520;
			}
			/* 内边距padding */
			#div1{
				/* 上边距 */
				padding-top: 30px;
				/* padding连写：
				 写四个分别表示上、右、下、左
				 写三个表示上、左右、下 
				 写两个表示上下、左右
				 写一个表示上下左右*/
				 padding:50px 50px 50px 50px;
				 padding: 70px 80px 90px;
				 padding: 100px 150px;
				 padding: 100px;
			}
			/* padding会撑大盒子，最终的渲染宽度=盒子的边框大小+两侧padding */
			#div2{
				width: 200px;
				height: 200px;
				padding-left: 40px;
				border: 3px solid #000000;   
			}
			#div3{
				height: 200px;
				width: 154px;
				padding-left: 20px;
				padding-right: 20px;
				border: 3px solid #0000FF;
			}
			/* 块级元素的宽度是默认占满父级元素，既未设置子元素的大小时，子元素默认与父元素大小相同 */
			#div4{
				background-color: #0000FF;
				width: 300px;
				height: 300px;
				
			}
			#div5{
				background-color: #006400;
				height: 150px;
				/* 未设置子元素的大小时，padding不会撑大盒子，如果padding大于父级盒子宽度会撑大 */
				padding: 50px;
				/* padding-left: 200px;
				padding-right: 200px; */
			}
		</style>
	</head>
	<body>
		<div id="div1">
			喜洋洋与灰太狼
		</div>
		<div id="div2">
			div1:左内边距40px，边框3px，盒子宽度200px
		</div>
		<div id="div3">
			div2:最终渲染200px,左右边距20px,边框3px，内容宽度应为154
		</div>
		<div id="div4">
			<div id="div5">
				
			</div>
		</div>
	</body>
</html>