<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
不會有效果
因為它的後邊和下面沒東西
下面看看內邊距
<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，但原來的長度和高度改變了
其實這是不符合規範的。Firefox瀏覽器是正常的
<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>
在Firefox瀏覽下運行是
正確的
在IE6瀏覽器是
錯誤的
一個div的長度和高度是外邊距（兩個）+邊框（兩個）+內邊距（兩個）+內容長度
反正記住一點，div的長寬度絕對不是指內容的長寬度
以上就是div+css網頁布局設計新開端（4）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
