div+css網頁佈局設計新開端（4）-css教學-PHP中文網

div+css網頁佈局設計新開端（4）

黄舟

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

原創

1652 人瀏覽過

首先我們定義個長度寬度為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+css網頁佈局設計新開端（4）

圖沒截完全，可以看到這個裡面div左上角緊貼著大div的

圖片上

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

登入後複製

會

div+css網頁佈局設計新開端（4）

margin是設定外邊距，如果這裡設定

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

登入後複製

<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>

登入後複製

在火狐瀏覽下運作是

錯誤的

div+css網頁佈局設計新開端（4）