盒模型CSS属性
盒模型是网页布局的基石，从盒子的内部到盒子的外围：
盒模型具体的CSS属性可以分为以下两种：
- 内填充：padding属性
- 外边距：margin属性
padding和margin的用法
需求1：让文本和盒子的周围产生间距，给盒子添加泡沫（padding）
padding的用法：
1：padding是长在 内容 和 盒子之间的距离
2：padding是长在盒子里面的
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
background: cadetblue;
padding: 40px;
}
</style>
<body>
<div class="box">
你好，我是周小周！
</div>
</body>
3：padding 主要控制子元素在盒子内部的位置关系
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background: cadetblue;
padding: 25px;
}
p{
width: 300px;
height: 300px;
background: coral;
}
</style>
<body>
<div class="box">
<p>书中自有黄金屋</p>
</div>
</body>
4：padding添加在父元素上面。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background: coral;
padding: 30px;
}
p{
width: 300px;
height: 300px;
background: cornflowerblue;
padding: 30px;
}
</style>
<body>
<div class="box">
<p>书中自有颜如玉</p>
</div>
</body>
5:padding可以把盒子撑大！！
- 如果想让盒子保持原有大小，需要在宽高的基础上减掉padding！！
- 注意：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。
<style>
*{
margin: 0;
padding: 0;
}
.box{
/* 此处应减去padding*2 即减去60px */
width: 240px;
height: 140px;
background: cornflowerblue;
/* padding可以把盒子撑大 */
padding: 30px;
}
</style>
<body>
<div class="box">
我是佩奇，这是我的家人
</div>
</body>
减去之后的效果
6：单一方向上设置padding值：
- padding-left：
- padding-right:
- padding-top:
- padding-bottom:
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 300px;
background: cadetblue;
/*单一方向上设置padding值 顶部距离 */
padding-top: 30px;
}
</style>
</head>
<body>
<div class="box">
摘下星星给你，摘下月亮给你，想要的都给你。
</div>
</body>
还有其他四种情况：
- 单一方向上设置padding值 底部距离
比如：padding-bottom: 30px; - 单一方向上设置padding值 左边距离
比如：padding-left: 20px; - 单一方向上设置padding值 左边距离
比如：padding-left: 20px; - 单一方向上设置padding值 右边距离
比如：padding-right: 20px;
7:padding的设置方法：
- padding:一个值 四周都有padding
- padding:两个值 上下 左右
- padding:三个值 上 左右 下
- padding:四个值 上 右 下 左
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 200px;
background: cornflowerblue;
/* padding:一个值 四周都有padding */
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
文本文本文本文本
</div>
</body>
同理可得：
-
padding:两个值 上下 左右
比如： padding: 20px 40px; -
padding:三个值 上 左右 下
比如：padding: 20px 40px 80px; -
padding:四个值 上 右 下 左
比如：padding: 20px 40px 80px 160px;8：padding不会对背景图的位置造成影响
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 200px;
background:cornsilk url(./images/1.gif) no-repeat;
padding:120px ;
}
</style>
</head>
<body>
<div class="box">
文本文本文本文本文本
</div>
</body>
9：padding不能为负值,如果为负值则无法显示。
需求2:让两个盒子（同级的盒子）之间，产生一定距离（margin）。
margin的用法
1：margin 是长在盒子外围的
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: cornsilk;
/* margin 是长在盒子外围的 */
margin: 40px;
}
.wrap{
width: 300px;
height: 260px;
background: brown;
}
</style>
</head>
<body>
<div class="box">文本文本文本</div>
<div class="wrap">文本文本文本</div>
</body>
2：margin 控制当前元素 与 其他同级元素的位置关系
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
background: cornsilk;
/* margin 控制当前元素 与 其他同级元素的位置关系 */
margin: 30px;
}
.wrap{
width: 400px;
height: 360px;
background: brown;
}
</style>
<body>
<div class="box"></div>
<div class="wrap"></div>
</body>
3：margin给元素的单一一个方向设置margin值
margin-right:
margin-left:
margin-top:
margin-bottom:
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: cadetblue;
float: left;
/* margin给元素的单一一个方向设置margin值 右边 */
margin-right: 80px;
/* 顶部距离 */
margin-top: 80px;
}
.wrap{
width:300px ;
height:200px ;
background: rgb(189, 189, 189);
float: left;
/* 左边 */
margin-left: 80px;
/* 底部距离 */
margin-bottom: 80px;
}
</style>
<body>
<div class="box">文本文本文本</div>
<div class="wrap">文本文本文本</div>
</body>
4:margin设置方法：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上右下左
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: cadetblue;
float: left;
/* margin:一个值 四周 */
margin: 100px;
}
.wrap{
width:300px ;
height:200px ;
background: cornsilk;
float: left;
/* margin:两个值 上下 左右 */
margin: 100px 40px;
}
也可以这样：margin:三个值 上 左右 下
margin: 100px 40px 30px;
margin:四个值 上右下左
margin: 100px 40px 30px 20px;
5:margin常出现的BUG:
A: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: cadetblue;
margin-bottom: 150px;
}
.wrap{
width:300px ;
height:200px ;
background: coral;
/* 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置 */
margin-top: 180px;
}
</style>
</head>
<body>
<div class="box">盒子里面的内容</div>
<div class="wrap">盒子里面的内容</div>
</body>
B:当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top:会错误的把margin-top:添加在父元素上面
扫一扫
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
