【JavaWeb】CSS盒子模型

1.4 CSS盒子模型

border 边框
margin 间距
padding 填充
content为内容，border为边框

不同浏览器的页面宽度计算不同
IE 浏览器：实际尺寸 = width
chrome浏览器：实际尺寸 = width + 左右borderwidth + padding

 <html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#div1{
				width:400px;
				height:400px;
				background-color:greenyellow;
 
				/* 1. border 边框样式 */
				border-width:1px;			/*边框粗细*/
				border-style:solid;		/*边框样式：solid(实线) , dotted(点状线) ... */
				border-color:blue;			/*边框颜色*/
 
				/* border:4px double blue;*/
 
				/* border-top : 4px dotted blue;*/
			}
 
			#div2{
				width:150px;
				height:150px;
				background-color:darkorange;
				
				margin-top:100px;
				margin-left:100px;
				
				/*margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */
			
				/* padding : 填充 */
				padding-top:50px;
				padding-left:50px;
			}
 
			#div3{
				width:100px;
				height:100px;
				background-color:aquamarine;
				/*
				margin-top:50px;
				margin-left:50px;
				*/
			}
			#div4{
				width:200px;
				height:200px;
				margin-left:100px;
				background-color:greenyellow;
			}
			body{
				margin:0;
				padding:0;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">&nbsp;</div>
			</div>
		</div>
		<div id="div4">&nbsp;</div>
 
	</body>
</html>

posted @ 2022-07-10 20:59 植树chen 阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 【JavaWeb】CSS绝对定位和相对定位

· 【JavaWeb】CSS简介

· css盒子模型

· [CSS] border-box 和 content-box

· CSS总结5-盒子模型

公告

昵称：植树chen
园龄： 4年11个月
粉丝： 3
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 【bug】博客园小bug(6)

植树chen

种一棵树最好的时间是十年前，其次是现在

【JavaWeb】CSS盒子模型

公告

最新随笔

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	#div1{
	width:400px;
	height:400px;
	background-color:greenyellow;

	/* 1. border 边框样式 */
	border-width:1px; /边框粗细/
	border-style:solid; /边框样式：solid(实线) , dotted(点状线) ... /
	border-color:blue; /边框颜色/

	/* border:4px double blue;*/

	/* border-top : 4px dotted blue;*/
	}

	#div2{
	width:150px;
	height:150px;
	background-color:darkorange;

	margin-top:100px;
	margin-left:100px;

	/margin:100px 100px 50px 150px;/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */

	/* padding : 填充 */
	padding-top:50px;
	padding-left:50px;
	}

	#div3{
	width:100px;
	height:100px;
	background-color:aquamarine;
	/*
	margin-top:50px;
	margin-left:50px;
	*/
	}
	#div4{
	width:200px;
	height:200px;
	margin-left:100px;
	background-color:greenyellow;
	}
	body{
	margin:0;
	padding:0;
	}
	</style>
	</head>
	<body>
	<div id="div1">
	<div id="div2">
	<div id="div3"> </div>
	</div>
	</div>
	<div id="div4"> </div>

	</body>
	</html>