<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<!--内部样式-->
<style type="text/css">
*{ /* *:通配符,指所有的标签.初始化所有标签的内边距和外边距 */
margin:0;
padding:0;
}
.box{
width: 300px;
height: 450px;
border: 1px solid red;
/*padding:50px 40px 30px 20px;*/<!--分别对应上,右,下,左顺时针方向-->
padding: 50px 30px 10px;/* 分别对应上,左右,下 */
/* padding:50px 20px;分别对应上下,左右 */
/* padding:50px;四个方位都是50px */
/* margin-top:100px;
margin-bottom:50px;
margin-left:100px; */
/* margin:50px; */
}
.box2{
width:200px;
height:200px;
border:1px solid green;
/* margin:auto; */ /* 盒子水平居中 */
}
</style>
</head>
<body>
<!-- 盒子模型：内容dontent,边框border,内边距padding-->
<!--方位词：top上，bottom下，right右，left左，center居中-->
<!--内边距padding：会把盒子撑大-->
<!-- 外边距margin：盒子与盒子之间的距离 -->
<!-- 外边距的运用： -->
<div class="box">
hello box!
</div>
<div class="box2">
hello box2
</div>
</body>
</html>
扫一扫
04-23
2102
2102
08-04
1491
1491
10-12
4067
4067
06-12
384
384
11-05
294
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
