盒子模型
总大小=内容高度+padding+border+margin
border
border-color(设置边框颜色)
border-width(设置边框宽度)
border-style(设置边框样式,一般只用两种,实线(solid)和虚线(dashed)
可以简写border(颜色 宽度 样式)不分前后
margin
margin-top上外边距
margin-bottom下外边距
margin-left左外边距
margin-right右外边距
margin(上 右 下 左)可以简写
margin(0px auto)可以使块级元素居中
*{
padding:" 0";
margin:" 0";
}可以使缝隙为0
padding
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
padding(上 右 下 左)简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="css/index.css" />
<body>
<div class="dh">
<div class="title"><img src="img/title_icon.gif"/>课程导航</div>
<ul>
<li>ACCP 软件工程师</li>
<li>BTEST 软件测试工程师</li>
<li>BENET 网络工程师</li>
<li>JBNS 网站工程师</li>
<li>ACCP 启蒙星</li>
<li>ANDROID 软件工程师</li>
<li>JAVA 软件工程师</li>
<li>NET 软件工程师</li>
<li>网络营销</li>
</ul>
</body>
</html>
.dh{
border:#B0CFEF 2px solid ;
height: 220px;
width: 200px;
margin:0 auto ;
}
ul li{
list-style: none;
line-height:20px ;
background-image: url(../img/submenu.gif);
border-bottom:#B0CFEF 1px solid ;
padding-left: 5px;
background-size: 100% 100%;
background-repeat:no-repeat ;
}
h5{
color:#1F386E ;
}
.title{
height:30px ;
line-height: 30px;
background-color: #F5F9FC;
font-weight:bold ;
color:#1F427A ;
padding-left: 3px;
border-bottom: #B0CFEF 1px solid;
}
img{
vertical-align: middle;
}
*{
padding: 0px;
margin: 0px;
}
box-sizing(盒子模型)
box-sizing:content-box | border-box | inherit;
主要使用的是(border-box),使内容被框起来,缩小内容,使原本的框大小不变
border-radius(可以使四个角变成圆形,设置圆角半径)
border-radius: 20px 10px 50px 30px;(上 右 下 左)
盒子阴影(box-shadow)
box-shadow:inset x-offset y-offset blur-radius color;