第五节 CSS盒子模型
5.1 边框属性
border-style:边框样式，值有以下情况：
solid:实线
double:空心线
dashed:虚线组成的边框
dotted:圆点组成的边框
border-color:边框颜色
border-width:边框宽度
简写
border: 1px solid red;
5.2 外边距属性
margin:外间距,边框和边框外层的元素的距离
margin:四个方向的距离(top right bottom left)
margin-top:
margin-bottom:
margin-left:
margin-right:
5.3 内边距属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
padding-left:
padding-right:
padding-top:
padding-bottom:
盒子模型的实际的宽度：width+2*（padding+border+margin）
盒子模型的实际的高度：height+2*（padding+border+margin）
###综合实例：
<head>
<meta charset="UTF-8">
<title>综合练习</title>
<style type="text/css">
body {
font-size: 12px;
}
#main {
width: 1000px;
margin: 0 auto;
}
#top {
width: 980px;
height: 200px;
padding-left: 10px;
padding-right: 10px;
margin: 0 auto;
/* background-color: #87CEEB;*/
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #333;
text-decoration: underline;
}
#a1 {
color: #F65626;
}
#searchtext{
width: 500px;
border-radius: 10px;
border: 1px solid #888888;
height: 25px;
vertical-align: top;
}
#searchbtn{
background-color: #FF8C00;
border-radius: 10px;
height: 28px;
width: 100px;
display: inline-block;
vertical-align: top;
line-height: 28px;
text-align: center;
}
.price{
text-align: center;
color: #F65626;
}
</style>
</head>
<body>
<!--顶部-->
<div id="top">
<div style="background-color: #aaa; height: 35px; border-radius: 10px; line-height: 35px;">
<div style="float: left; text-indent: 2em;">
<a href="#" id="a1">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机狂淘宝</a>
</div>
<div style="float: right; margin-right: 10px;">
<a href="#" id="a1">淘宝网首页</a>
<a href="#">我的淘宝</a>
<a href="#">购物车</a>
<a href="#">收藏夹</a>
<a href="#">商品分类</a>
<a href="#">卖家中心</a>
<a href="#">联系客服</a>
<a href="#">网站导航</a>
</div>
</div>
<div style="overflow: hidden;">
<div style="float: left;">
<img src="img/logo.bmp" />
</div>
<div style="float: left; padding-top: 30px;">
<input id="searchtext" type="text" name="keyword" /> <div id="searchbtn">搜索</div><br/>
客厅灯 冲锋衣 床底 沙发垫 电脑桌 鞋柜
</div>
</div>
<div style="background-color: #aaa; height: 35px; border-radius: 10px; line-height: 35px; text-indent: 4em;">
客厅灯 冲锋衣 床底 沙发垫 电脑桌 鞋柜
</div>
<div style="margin-top: 10px; overflow: hidden;">
<div style="float: left;">
<input type="text" name="price1" style="border-radius: 5px;" />---<input type="text" name="price2" style="border-radius: 5px;" />
</div>
<div style="float: right;">
<input type="checkbox" name="" value="包邮" />包邮<input type="checkbox" name="" value="包邮" />包邮 <input type="checkbox" name="" value="包邮" />包邮
</div>
</div>
</div>
<!--主体-->
<div id="main">
<table width="100%" id="tab">
<tr>
<td>
<div style="text-align: center;">
<img src="img/002.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/003.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/004.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/005.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/006.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
</tr>
<tr>
<td>
<div style="text-align: center;">
<img src="img/007.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/008.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/009.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/010.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
<td>
<div style="text-align: center;">
<img src="img/011.png" width="180"/>
</div>
<div class="price">
¥40 包邮
</div>
<div style="text-align: center;">
世界上最好的商品
</div>
<div style="color: #888888; text-align: center;">
专营店
</div>
<div style="color: #888888; text-align: right;">
如实描述
</div>
</td>
</tr>
</table>
</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
