盒子模型:
一个独立的盒子模型由网页内容,边框,内边距,外边距四部分组成。
网页内容(content):位于最中间,网页的主要显示内容。
边框(border):位于内边距外面,如果没有内边距就是包着内容的外框,它一般具有一定的厚度。
内边距(padding):位于边框内部的空隙,是内容与边框的距离。
外边距(margin):位于边框外部空隙,边框外面周围的距离。
border-width的属性设置方法:
border-width 简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none,边框宽度实际上会重置为 0。不允许指定负长度值。
border-width:thin medium thick;
上边框是 10px
右边框和左边框是中等边框
下边框是粗边框
border-style属性设置方法:
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
例1:
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
外边距是盒子边框外,与其他盒子的距离,
margin-right 右外边距
margin-left 左外边距
margin-top 上外边距
margin-button 下外边距
内边距以padding开头。
以下示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ww {
background: url("img/bg.jpg") no-repeat;
width:400px;
height:500px;
}
.r01
{
width:260px;
padding-top:80px;
color:#FFF;
font-size:14px;
box-sizing: border-box;
}
.r02{
height: 100px;
}
li{
list-style: none;
}
.anniu{
height: 49px;
width: 150px;
background-image: url("img/btn.jpg");
background-repeat: no-repeat;
margin-left: 85px;
border: none;
}
span{
color: red;
}
.yuanjiao{
border-radius: 5px;
}
</style>
</head>
<body>
<div id="ww">
<div class="r01">
<form action="" method="get" name="asd">
<ul>
<li><span>*</span>姓名:
<input type="text" class="yuanjiao">
</li>
<li>
<span>*</span>邮箱:
<input type="email" class="yuanjiao">
</li>
<li>
<span>*</span> 电话:
<input type="number" class="yuanjiao">
</li>
<li>
性别:
<select name="sex" class="yuanjiao">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>
年龄:
<select name="year" class="yuanjiao" >
<option>请选择</option>
<option>1</option>
<option>2</option>
</select>
</li>
</ul>
<div class="r02">
<input class="anniu" type="submit" value="" >
</div>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#qq{
border: 2px solid;
border-radius: 8px;
width: 300px;
margin: 0px auto;
border-color: orange;
box-sizing: border-box;
}
li{
list-style: none;
}
.a01{
background: url("img/icon_01.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a02{
background: url("img/icon_02.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a03{
background: url("img/icon_03.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a04{
background: url("img/icon_04.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a05{
background: url("img/icon_05.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a06{
background: url("img/icon_06.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a07{
background: url("img/icon_07.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a08{
background: url("img/icon_08.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a09{
background: url("img/icon_09.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
border-bottom-color: gray;
border-bottom-style: dashed;
box-sizing: border-box;
}
.a10{
background: url("img/icon_10.jpg") -2px center no-repeat;
padding-left: 10px;
height: 50px;
width: 298px;
line-height: 50px;
margin: 0px;
box-sizing: border-box;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div id="qq">
<div class="a01">
<ul>
<li><a href="#">酒水、饮料</a></li>
</ul>
</div>
<div class="a02">
<ul>
<li><a href="#">进口食品</a></li>
</ul>
</div>
<div class="a03">
<ul>
<li><a href="#">休闲零食</a></li>
</ul>
</div>
<div class="a04">
<ul>
<li><a href="#">地方特产</a></li>
</ul>
</div>
<div class="a05">
<ul>
<li><a href="#">保健、冲调</a></li>
</ul>
</div>
<div class="a06">
<ul>
<li><a href="#">粮油、生鲜</a></li>
</ul>
</div>
<div class="a07">
<ul>
<li><a href="#">美容洗护</a></li>
</ul>
</div>
<div class="a08">
<ul>
<li><a href="#">清洁洗涤</a></li>
</ul>
</div>
<div class="a09">
<ul>
<li><a href="#">母婴、纸品</a></li>
</ul>
</div>
<div class="a10">
<ul>
<li><a href="#">家居百货</a></li>
</ul>
</div>
</div>
</body>
</html>