1-1-1html实例代码

最新推荐文章于 2022-03-22 18:16:18 发布

Raquel1993

最新推荐文章于 2022-03-22 18:16:18 发布

阅读量937

点赞数

本文链接：https://blog.csdn.net/u014305060/article/details/52006705

版权

这是一个HTML代码示例，演示了不同大小和样式的嵌套div元素布局。每个div都有独特的尺寸、边框样式、背景颜色以及内边距设置。通过此实例，可以了解CSS中margin和padding对元素位置的影响。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
#n1{
width:405px;
height:405px;
border: 1px dashed black;
margin:100px auto;
}
#n2{
	width: 340px;
	height: 340px;
	border: 6px solid blue;
	margin: 29px auto;
	background: green;
} 
#n3{
	width: 260px;
	height: 260px;
	background: pink;
	margin: 21px auto;
	padding-top: 41px;
	padding-left: 41px;
}
#n4{
	width: 214px;
	height: 214px;
	border: 1px dotted white;
	padding-left: 4px;
	padding-top: 4px;
}
#n5{
	width: 161px;
	height: 161px;
	border: 1px dashed white;
	padding-top: 49px;
	padding-left:49px;
}
#n6{
	width: 100px;
	height: 100px;
	background: red;
	border: 6px solid green;
}
</style>

</head>
<body>
  <div id="n1">
                <div id="n2">
                        <div id="n3">

最低0.47元/天解锁文章

Raquel1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-1-1html实例代码

Document#n1{width:405px;height:405px;border: 1px dashed black;margin:100px auto;}#n2{ width: 340px; height: 340px; border: 6px solid blue; margin: 29px auto; background: green;} #n3{ w
复制链接

扫一扫