（重点）盒子模型
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
盒子模型的经典案例：
<html>
<head>
<title>盒子模型经典案例</title>
<link rel = "stylesheet" type = "text/css" href = "box.css"></head>
<body>
<div class = "div">
<ul class = "faceul">
<!--用于去掉列表前面的标记实心点-->
<li class = "div1">
<img src = "me.jpg"><br/>
<a href = "#">点击查看</a>
</li>
<li class = "div1">
<img src = "me.jpg"><br/>
<a href = "#">点击查看</a>
</li>
<li class = "div1">
<img src = "me.jpg"><br/>
<a href = "#">点击查看</a>
</li>
</ul>
</div>
</body>
</html>body{
border : 1px solid red;/* width，type，color*/
width: 500px;
height: 600px;
margin : 0 auto;/*auto 表示自动居中*/
}
/*盒子模型的概念：margin,padding,border,content*/
.div{ /*盒子里面可以放多个图片盒子*/
border: 1px solid red;
width: 340px;
height: 400px;
margin: 5px,0px,0px,5px;
}
.div1{ /*每个图片外面像素+40px的盒子*/
width: 140px;
height: 140px;
border :1px solid blue;
margin-top : 5px;
margin-left: 5px;
float:left;/*左浮动*/
}
.div1 li{ /*每个图片的盒子*/
width :100px;
height: 100px;
margin: 5px,0px,15px,5px;
border : 1px solid silver;
float:left;/*左浮动*/
}
.faceul{
width: 140px;
height: 140px;
margin-top : 5px;
margin-left: 5px;
margin-right: 25px;
float:left;
}
.faceul list_style{
list-style-type: none;
float:left;
}
1227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
