div+css网页布局设计新开端（4）-css教程-PHP中文网

div+css网页布局设计新开端（4）

黄舟

发布： 2016-12-29 14:23:11

原创

1765人浏览过

首先我们定义个长度宽度为500px的div，你可以看做是一个大盒子，为了能清楚的看到它的存在我们把它的边框显示实线

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
} </style> <head>
<body>
<div class="div"></div>
</body>
</html>

登录后复制

里面将放很多div 你可以理解一个大盒子里装其他小盒子
先放一个把

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
} </style> <head>
<body>
<div class="div">
<div id="a"></div> 
</div>
</body>
</html>

登录后复制

你会看到

图没截完全，可以看到这个里面div紧紧贴着大div的左上角

加上

立即学习“前端免费学习笔记（深入）”；

margin-top:5px;
margin-left:5px

登录后复制

会

margin是设置外边距，如果这里设置

margin-right:5px;
margin-bottom:5px

登录后复制

不会有效果
因为它的后边和下面没东西

下面看看内边距

ecshop仿万表网商城整站

该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气，功能实用，是一款时尚典雅的综合类模板！样式精美的商品分类树，层次分明，分类结构一目了然。首页轮播主广告分别对应切换小广告，商品宣传更到位。独家特色增加顶级频道页面、品牌页面，以及仿京东对比功能，提升网站档次，让您的网站更加高端大气！并且全站采用div+css布局，兼容性良好，更注重页面细节，增加多种j

查看详情

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
margin-top:5px;
margin-left:5px;
padding-top:5px;
padding-left:5px;
} </style> <head>
<body>
<div class="div">
<div id="a">hello</div> </div>
</body>
</html>

登录后复制

效果一试就看的出来，非常简单

发现一个问题，在ie6和360浏览器在div设置了长度和高度的前提下，居然能够自适应，也就是内容无论有很多少，都不会胀破div，但原来的长度和高度改变了
其实这是不符合规范的。火狐浏览器是正常的

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
} 
</style> <head>
<body>
<div class="div" >
5555555555555555555555555555555555555555555555555555555555555555555555555
<br/>
<br/>
<br/>
</div>
</body>
</html>

登录后复制

大家可以试试看看，这也算是浏览器兼容问题了

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
}
#a{
width:100px;
height:50px;
background:red
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body>
<div class="div" >
<div id="a"></div>
<div id="b"></div>
<br/>
<br/>
<br/>
</div>
</body>
</html>

登录后复制

在火狐浏览下运行是