css盒子模型
2017-09-28 14:43
218 查看
CSS盒子模型
盒子模型的原理图：
细节说明：
1.html元素都可以看成一个盒子。
2.盒子模型的参照物不一样，则使用的css属性不一样，比如从div的角度看，是margin-right,从div2看，则是margin-left。
3.如果你不希望破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。
盒子模型详细图：
小范例1：
源代码：
box.html:
box.css:
小范例2：
源代码：
boxshili.html
boxshili.css
盒子模型的原理图：
细节说明：
1.html元素都可以看成一个盒子。
2.盒子模型的参照物不一样，则使用的css属性不一样，比如从div的角度看，是margin-right,从div2看，则是margin-left。
3.如果你不希望破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。
盒子模型详细图：
小范例1：
源代码：
box.html:
<html> <head> <link rel="stylesheet" type="text/css" href="box2.css"> </head> <body> <div class="div1"> <ul class="faceul"> <li><img src="tupian.jpg"><a href="#">海滩</a></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> <li><img src="tupian.jpg"></li> </ul> </div> </body> </html>
box.css:
body{
margin:0px;
padding:0px;
}
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
margin-top:100px;
}
.div1 img{
width:100px;
height:30px;
}
/*faceul用于控制显示图片区域宽度和高度*/
.faceul{
width:350px;
height:250px;
border:1px solid red;
list-style-type:none;
padding:0;
}
/*用于控制单个图片区域大小*/
.faceul li{
width:50px;
height:60px;
border:1px solid blue;
float:left; /*左浮动*/
margin-left:5px;
margin-top:5px;
}
.faceul img{
width:50px;
margin-top:5px;
}
.faceul a{
font-size:5px;
margin-left:12px;
margin-top:0px;
}
a:link{
text-decoration:none;
color:black;
}小范例2：
源代码：
boxshili.html
<html> <head> <link rel="stylesheet" type="text/css" href="boxshili.css"> </head> <body> <div class="div1"> <div> <span class="span1"><font class="font1">美丽风景</font><a href="#">更多风景</a></span> <ul class="faceul"> <li><img src="风景一.jpg"><br/><a href="#">风景一</a></li> <li><img src="风景二.jpg"><br/><a href="#">风景二</a></li> <li><img src="风景三.jpg"><br/><a href="#">风景三</a></li> </ul> </div> <div> <span class="span1"><font class="font1">诱惑美食</font><a href="#">更多美食</a></span> <ul class="faceul"> <li><img src="美食一.jpg"><br/><a href="#">美食一</a></li> <li><img src="美食二.jpg"><br/><a href="#">美食二</a></li> <li><img src="美食三.jpg"><br/><a href="#">美食三</a></li> </ul> </div> <div> <span class="span1"><font class="font1">优美建筑</font><a href="#">更多建筑</a></span> <ul class="faceul"> <li><img src="建筑一.jpg"><br/><a href="#">建筑一</a></li> <li><img src="建筑二.jpg"><br/><a href="#">建筑二</a></li> <li><img src="建筑三.jpg"><br/><a href="#">建筑三</a></li> </ul> </div> </div> </body> </html>
boxshili.css
body{
margin:0 auto;
width:1000px;
height:1000px;
border:1px solid blue;
}
/*定义几个常用字体*/
.font1{
font-weight:bold;
font-size:18px;
font-style:italic;
margin:4px 0 0 4px;
}
.span1{
display:block;
}
.span1 a{
float:right;
}
.div1{
width:330px;
height:370px;
font-size:10px;
/*border:1px solid gray;*/
}
.div1 img{
width:80px;
height:50px;
}
/*定义几种超链接样式*/
a:link{
text-decoration:none;
}
.faceul{
width:350px;
height:75px;
list-style-type:none;
padding:0;
font-size:10px;
}
.faceul li{
float:left;
width:100px;
height:78px;
margin:4px;
text-align:center; /*表示放在该元素的其他元素会居中放置*/
}
.faceul img{
margin-top:2px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 