前端学习笔记2017.6.12 CSS控制DIV
前一篇文章中用div布局了豆瓣東西的頁面，如果用html代碼表示的話大概是這個樣子的
<!DOCTYPE html><html>
<head>
</head>
<body>
<div><!--banner-->
?? ?<div></div><!--banner1-->
?? ?<div></div><!--banner2-->
</div>
<div></div><!--ad-->
<div><!--hierarchy-->
?? ?<div></div><!--left-->
?? ?<div></div><!--right-->
</div>
<div><!--goods-->
?? ?<div></div>
?? ?<div></div>
?? ?<div></div>
</div>
</body>
</html>
?
把上面那段代碼保存為1.html，打開之后發現啥也顯示出來。
這是為什么？因為我們指定了div，但卻沒告訴瀏覽器這塊div大小、顏色等屬性，那么怎么實現這些呢？CSS啦。
?
怎么加入css代碼呢？用style元素即可，比如下面這樣:
<!DOCTYPE html> <html> <head> </head><body> <style>div{background:red;}</style><div><!--banner--><div></div><!--banner1--><div></div><!--banner2--> </div><div></div><!--ad--><div><!--hierarchy--><div></div><!--left--><div></div><!--right--> </div> <div><!--goods--><div></div><div></div><div></div> </div></body> </html>?用瀏覽器打開發現還是啥也沒有，為什么？因為沒有指定div的高度、寬度，你怎么可以給一個沒有大小的東西填充顏色呢？好，我們給div元素一個大小。
變成下面這樣:
<!DOCTYPE html> <html> <head> </head><body> <style>div{height:200px;width:100px;background: red;}</style><div><!--banner--><div></div><!--banner1--><div></div><!--banner2--> </div><div></div><!--ad--><div><!--hierarchy--><div></div><!--left--><div></div><!--right--> </div> <div><!--goods--><div></div><div></div><div></div> </div></body> </html>?用瀏覽器打開之后發現時一個紅色的豎條，為什么呢？因為我們上面通過css對所有的div都設置了背景色是紅色，怎么能更個性化一些呢？讓某個div是紅色，某個div是藍色？可以的，可以給div起一個名字，然后再css代碼中指定對應div的名字，這樣就針對性的對某個div設置css屬性了，好我們再改一下就變成了下面這樣：
<!DOCTYPE html> <html> <head> </head><body> <style>#banner{height:200px;width:100px;background: red;}#ad{height: 200px;width:100px;background:blue;}#hierarchy{height: 200px;width:100px;background: green;} #goods{height:200px;width:100px;background: yellow;}</style><div id="banner"><!--banner--><div id="banner1"></div><!--banner1--><div id="banner2"></div><!--banner2--> </div><div id="ad"></div><!--ad--><div id="hierarchy"><!--hierarchy--><div></div><!--left--><div></div><!--right--> </div> <div id="goods"><!--goods--><div id="goods1"></div><div id="goods2"></div><div id="goods3"></div> </div></body> </html>?
人家豆瓣東西那個banner是布滿整個瀏覽器的，而且你幾個div的大小也和豆瓣東西的不一樣，再調整一下，怎么看出人家height和width用了幾個像素呢？我是截圖之后放到PS里面用選區工具框選一下，然后再信息窗口里面看一下這個選區的長width和height，然后再看下圖像的分辨率，為了方便，切換成像素/厘米 這樣就能算出占用幾個像素了，調整一下，最后代碼變成了這樣：
<!DOCTYPE html> <html> <head> </head><body> <style>#banner{height:90px;background: red;}#ad{height: 99px;width:924px;background:blue;}#hierarchy{height: 476px;width:924px;background: green;} #goods{height:488px;width:924px;background: yellow;}</style><div id="banner"><!--banner--><div id="banner1"></div><!--banner1--><div id="banner2"></div><!--banner2--> </div><div id="ad"></div><!--ad--><div id="hierarchy"><!--hierarchy--><div></div><!--left--><div></div><!--right--> </div> <div id="goods"><!--goods--><div id="goods1"></div><div id="goods2"></div><div id="goods3"></div> </div></body> </html>?
效果如下:
?
?
?div的大小布局差不多了，可是豆瓣東西里面的div有幾個事居中的，那怎么實現呢？可以用margin來實現，margin它是屬于盒模型里面的一個概念，margin是指元素邊框到元素外邊之間的距離，比如：margin : 10px 0px 15px 5px;
它的意思是元素邊框距離元素外邊的距離分別是上邊是10像素、右邊是0像素、下邊是15像素、左邊是5像素，按照上右下左的順序來寫的，如果遇到margin的簡寫比如margin:0px auto;? 這種雖然有兩個值，但是我們可以把它“轉化為”四個值，按照上右下左的順序
第一個是0px 第二個是auto，第三個沒有了嗎？不，返回去，還是0，第四個是auto，這樣，所以最后的結果是margin:0px auto 0px? auto
?
<!DOCTYPE html> <html> <head> </head><body> <style>#banner{height:90px;background: red;}#ad{height: 99px;width:924px;background:blue;margin: 2px auto 2px auto;}#hierarchy{height: 476px;width:924px;background: green;margin: 2px auto 2px auto;} #goods{height:488px;width:924px;background: yellow;margin: 2px auto 2px auto;}</style><div id="banner"><!--banner--><div id="banner1"></div><!--banner1--><div id="banner2"></div><!--banner2--> </div><div id="ad"></div><!--ad--><div id="hierarchy"><!--hierarchy--><div></div><!--left--><div></div><!--right--> </div> <div id="goods"><!--goods--><div id="goods1"></div><div id="goods2"></div><div id="goods3"></div> </div></body>?這樣就居中啦。
?
轉載于:https://www.cnblogs.com/yfish/p/6991576.html
總結
以上是生活随笔為你收集整理的前端学习笔记2017.6.12 CSS控制DIV的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ViewPager (下)-- 利用 F
- 下一篇： 按年按月分组查询