CSS_Day_4：盒子模型、层模型、浮动模型

最新推荐文章于 2024-08-03 23:03:36 发布

孤光冰雪LightIce

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量116

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Brandon_/article/details/119222884

版权

一、盒子模型

外边距(margin)+ 盒子壁(border)+ 内边距(padding)+ 内容元素(content = width + height)

盒子模型

四个值时：上右下左
三个值时：上左右下
两个值时：上下左右
默认初始化时 margin : 8px

<body>
	<div>
		<div class="wrapper">
			<div class="box">
				<div class="content">
				</div class="content1">
			</div>
		</div>
	</div>
</body>

.content1{
	width:10px;
	height:10px;
	background-color:#fff;
}
.content{
	width:10px;
	height:10px;
	padding:10px;
	background-color:#0f0;
}
.box{
	width:30px;
	height:30px;
	padding:10px;
	background-color:#fff;
}
.wrapper{
	width:50px;
	height:50px;
	padding:10px;
	background-color:#0f0;
}

二、层模型

opacity：透明度

1.position:absolute：绝对定位（left，top，right，bottom，脱离原来位置进行定位）

相对于最近的有定位的父级进行定位，否则相对于文档进行定位

2.position:relative：相对定位（left，top，right，bottom，保留原来位置进行定位）

相对于自己原来的位置进行定位

<body>
	<div class="wrapper">
		<div class="content">
			<div class="box">
			</div>
		</div>
	</div>
</body>

*{
	margin:0;
	padding:0;
}
/*！！！初始化！！！*/
.wrapper{
	margin-left:100px;
	width:200px;
	height:200px;
	background-color:orange;
}
.content{
	position:relative;
	margin-left:100px;
	width:100px;
	height:100px;
	background-color:black;
}
.box{
	position:absolute;
	left:50px;
	width:50px;
	height:50px;
	background-color:yellow;
}

3.position:fixed：广告定位

z-index：显示层级

三、浮动模型

float:left/right：使元素站队

<body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<div class="content">4</div>
		<div class="content">5</div>
		<div class="content">6</div>
		<div class="content">7</div>
		<div class="content">8</div>
		<div class="content">9</div>
		<p class="clear"></p>
	</div>
</body>

*{
	margin:0;
	padding:0;
}
/*！！！初始化！！！*/

.wrapper{
	width:350px;
	height:350px;
	border:1px solid black;
}

.content{
	float:left/right;
	margin-left:10px;
	margin-bottom:10px;
	color:#fff;
	background-color:black;
	width:100px;
	height:100px;
}

.clear{
	border-top:0 solid green;
	clear:both;
}
/*占位边界是父级的边界*/