<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
/* 所有元素边距为0 */
* {
margin: 0px;
}
body {
background-color: green;
}
#box {
width: 1020px;
overflow: auto;
/* 自动设置边距,左右边距会相等,保持水平居中,垂直不会 */
margin: auto;
}
.item {
float: left;
margin: 20px;
border: 5px solid black;
/* 填充就是向元素内部增加空间,也称为内边距,和外边距不同的是,填充会改变元素的大小,随着填充的加大,元素也会加大 */
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
<div class="item">
<img src="img/11.jpg"/>
<br/>
sdfasdfa
</div>
<div class="item"><img src="img/11.jpg"/></div>
<div class="item"><img src="img/11.jpg"/></div>
</div>
</body>
</html>
前端之HTML盒子模型篇(六)
最新推荐文章于 2022-10-07 20:29:03 发布