实战网页布局心得（一）
生活随笔
收集整理的這篇文章主要介紹了
实战网页布局心得（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實戰心得：
1.父元素不能撐起浮動子元素帶來的影響
在沒有實戰之前，經常會看到書里講到浮動元素帶來的影響，其中之一就是父元素不能撐起子元素，書里經常會舉這個例子
然后書上就會介紹如何清除浮動來讓父元素撐起子元素了，但是當不設置父元素的高度時，頁面就只會顯示這兩個子元素，看起來好像達到了我們想要的效果，
那為什么還要清除浮動呢？？父元素沒有包裹子元素其實還是會有影響的，會對父元素的兄弟元素的布局會有影響。看個例子
<!doctype html> <html><head><title></title></head><meta charset='utf-8'><style>#wrapper{width: 400px;}#test_float1{width:50px;height: 50px;float: left;background-color: blue;}#test_float2{width: 50px;height: 50px;float: right;background-color: red;}#special{width:400px;height:200px;background-color: yellow;}</style><body><div id='wrapper'><div id='test_float1'>子元素1</div><div id='test_float2'>子元素2</div></div><div id='special'>這個元素不會按照正常布局位于wrapper元素的下面，而是會和wrapper的子元素重疊在一起</div></body> </html>顯示結果：
我們預期的結果是黃色區域位于wrapper的下面，可是顯然黃色區域與wrapper重疊了。
所以我們給wrapper一個高度讓它能夠包裹起來子元素（這只是一種清理浮動的方法）
#wrapper{height:100px; }然后就會達到預期效果了
2.float元素的寬度和高度
當一個元素設置為float時，只要其值不為none，它就變成了block元素，即塊級方框，但是它和塊級元素略有區別。
一般塊級方框默認的width為一整行，而float元素的尺寸與內容的大小相同，內容的寬度即為float元素的寬度，內容的高度即為float元素的高度，看一個例子：
<style> span{display: block;background-color: yellow;}</style> <body ><span>文字</span></body>它的效果圖是：
然后看一下float的：
<style> ul{height:50px;list-style: none;background-color: blue;}li{float: left;padding:5px 10px;margin-left: 10px;background-color: yellow;}</style><body ><ul><li>首頁</li><li>第一</li><li>第二</li><li>第三</li></ul></body>
總結
以上是生活随笔為你收集整理的实战网页布局心得（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js碎片知识的学习与补充(parsein
- 下一篇： printf与sprintf