1. 定义盒子外型
<style?
.bios {
/* 指定宽度（width）跟高度（height） */
width: 300px;
height: 300px;
/* 指定背景颜色 */
background-color: rgb(234,143,23);
/* 指定内边距 （有放大的效果）*/
/* padding: 100px; */
/* 指定边框 */
border: 100px solid #f0f;
/* 指定外边框 */
margin: 100px;
/* 浮动：让块元素在一行显示 */
float: left;
}
.bio {
width: 100px;
height: 100px;
background-color: #ff0;
padding: 100px;
border: 100px solid #00f;
margin: 100px;
float: left;
}
</style>
2. 给定内容
<div class="bios">309030803070</div>
<div class="bio">309030803070</div>
3. 完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bios {
/* 指定宽度（width）跟高度（height） */
width: 300px;
height: 300px;
/* 指定背景颜色 */
background-color: rgb(234,143,23);
/* 指定内边距 （有放大的效果）*/
/* padding: 100px; */
/* 指定边框 */
border: 100px solid #f0f;
/* 指定外边框 */
margin: 100px;
/* 浮动：让块元素在一行显示 */
float: left;
}
.bio {
width: 100px;
height: 100px;
background-color: #ff0;
padding: 100px;
border: 100px solid #00f;
margin: 100px;
float: left;
}
</style>
</head>
<body>
<!-- 盒子模型 -->
<!-- 内容（width+heigh） -->
<!-- 背景生效区域 内边距+（width+height） -->
<!-- 从内到外分别是 内容（width+height）——内边距——边框——外边框 -->
<div class="bios">309030803070</div>
<div class="bio">309030803070</div>
<!-- 盒子总宽度 -->
<!-- 左外边距+上边框+下边框+width+右内边距+右边框+右外边距 -->
<!-- 和总高度 -->
<!-- 上外编剧+上边框+上内边距+height+下内边距+下边框+下外边距 -->
<!-- 去掉内边距 width+2*内边距 height+2*内边距 -->
<!-- 去掉边框 width+2*边框 height+2*边框 -->
<!-- 去掉外边框 width+2*外边距 height+2*外边距 -->
</body>
</html>
执行结果如下所示：
右边的就是盒子；
结束语
若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。
1999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
