增加padding的同时要注意总宽度够不够!
如果不够，可以缩小div的宽度
只需要把div的宽和高减去padding*2的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实战首页布局-margin设置</title>
<style type="text/css">
#container{
width: 1002px;
background: gray;
}
#header{
height: 120px;
background: orange;
}
/*若父亲div未设置高度，其子div为浮动型且设置了高度
此时父div的高度不随子div的高度自变化 没有实际高度 是飘起来的
可以给父div设置一个实际高度
若想让其自变化 加上overflow:hidden*/
#main{
/*height: 600px;*/
overflow: hidden;
background: green;
}
#Lsite{
width: 700px;
height: 600px;
float: left;
background: pink;
}
/*类的css写法*/
.four{
/*width: 330px;*/
width: 290px;
/*height: 280px;*/
height: 240px;
background: white;
float: left;
margin:10px;
padding: 20px
/*增加padding的同时要注意总宽度够不够! 如果不够，可以缩小div的宽度 只需要把div的宽和高减去padding*2的值*/
}
#Rsite{
width: 302px;
height: 600px;
float: right;
background: purple;
}
#footer{
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="Lsite">
<!-- 这4个div具有相同的布局（性质）
给它们取一个类名four，它们属于同一类
针对类写css就可以控制属于这一类的div -->
<div class="four">
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
</div>
<div class="four">
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
</div>
<div class="four">
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
</div>
<div class="four">
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
</div>
</div>
<div id="Rsite"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
