盒子模型练习2

最新推荐文章于 2023-12-08 10:33:37 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-12-08 10:33:37 发布

阅读量644

点赞数 1

本文链接：https://blog.csdn.net/qq_37805832/article/details/108394991

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		.big
		{
			width: 500px;
			height: 500px;
			background-color: blue;
			border: 5px solid red;
			padding-top: 150px;
			padding-left: 150px;
			box-sizing: border-box;
		}
		.small
		{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*margin-top: 150px;
			margin: 150px auto;
			*/
			/*
            注意点:
            1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
            2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
            3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
            margin本质上是用于控制兄弟关系之间的间隙的
            */
           
		}
	</style>
</head>
<body>
<div class="big">
    <div class="small"></div>
</div>
</body>
</html>

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
盒子模型练习2

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> *{padding: 0px;margin: 0px;} .big { width: 500px; height:
复制链接

扫一扫