CSS div和css布局
一.div和span
DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是為了應用CSS樣式
DIV和span的區別在於，span是內聯元素，div是塊級元素。div占用整行，span只會占用內容大小的部分。div可以改變size，span不可以改變size
二.盒模型
margin 盒子外邊距，增加的話，內盒大小不會變
padding 盒子內邊距，增加的話，border向外擴大，內盒大小本身不會變
border 盒子邊框寬度
width 盒子寬度
height 盒子高度
三.布局相關的屬性
1.position定位方式
relative 正常定位
absolute 根據父元素進行定位
fixed 根據瀏覽器窗口進行定位
static 沒有定位
inherit 繼承
2.定位
left，right，top，bottom離頁面頂點的距離
3.覆蓋順序優先級
z-index 其值是從0，1，2... 數值越大，優先級越高，那麽顯示就在最上面
4.display顯示屬性
display:none 層不顯示
display:block 塊狀顯示，在元素後面換行，顯示下一個塊元素。將內聯轉換成塊狀
display:inline 內聯顯示，多個塊可以顯示在一行內。將塊狀轉換成內聯
5.float浮動屬性
left 左浮動
right 右浮動
6.clear清除浮動
clear:both
7.overflow溢出處理
hidden 隱藏超出層大小的內容
scroll 無論內容是否超出層大小都添加滾動條
auto 超出時自動添加滾動條
四.兼容問題及高效
1.兼容性測試工具
IE Tester
Multibrowser
2.常用瀏覽器
Google chrome
Firefox
opera
3.高效的開發工具
輕量級
notepad++
sublime text
記事本
重量級
webstorm
Dreamweaver
4.網頁設計工具
fireworks
photoshop
5.判斷IE的方法
條件判斷格式
<!--[if 條件 版本]> 那麽顯示 <![endif]-->
不等於
[if !IE 8] 除了IE8都可以顯示
小於
[if lt IE 5.5] 如果IE瀏覽器版本小於5.5的顯示
大於
[if gt IE 5] 如果IE瀏覽器版本大於5的顯示
小於或者等於
[if lte IE 6] 如果IE瀏覽器版本小於等於6的顯示
大於或者等於
[if gte IE 6] 如果IE瀏覽器版本大於等於6的顯示
小於和大於之間
[if (gt IE 5)&(lt IE 7)]
或
[if (IE 6)|(IE 7)]
僅
<!--[if IE 8]>
<!doctype html> <html> <head> <title>Div+Css布局(div+span以及盒模型)</title> <meta charset="utf-8"> <style type="text/css"> body{ margin:0px; padding:0px; } /* div{ background-color:green; color:#fff; } span{ background-color:green; color:#fff; } div{ width:500px; height:500px; padding:0px; margin:0px; border:solid 10px; }*/ .div{ width:600px; height:600px; margin:0 auto; background-color:green; } .diva{ float:left; width:240px; height:240px; background-color:red; } .divb{ float:left; width:240px; height:240px; background-color:yellow; } .div div{ margin:10px; padding:10px; border:solid 10px; } </style> </head> <body> <!--div>麥子學院DIV</div> <div>麥子學院DIV</div> <span>麥子學院SPAN</span> <span>麥子學院SPAN</span--> <div class="div"> <div class="diva"></div> <div class="divb"></div> </div> </body> </html>
<!doctype html> <html> <head> <title>Div+Css布局(布局相關的屬性)</title> <meta charset="utf-8"> <style type="text/css"> body{ padding:0; margin:0; } /* .div{ width:300px; height:300px; background-color:green; position:relative; left:10px; top:10px; z-index:0; } span{ position:absolute; background-color:#ff6600; color:#fff; top:-10px; right:0; } .fixed{ position:fixed; background-color:#ff6600; color:#fff; top:100px; z-index:1; } */ div{ background:green; display:inline; width:200px; } span{ background-color:red; display:block; width:200px; } </style> </head> <body> <!--div class="fixed"> <p>聯系電話：1111111</p> <p>聯系QQ：782590844</p> <p>聯系地址：四川省成都市</p> </div> <div class="div"> <span>瀏覽次數：222</span> </div> </div--> <div>麥子學院</div> <div>麥子學院</div> <div>麥子學院</div> <span>麥子學院</span> <span>麥子學院</span> <span>麥子學院</span> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </body> </html>
<!doctype html> <html> <head> <title>Div+Css布局(浮動以及溢出處理)</title> <meta charset="utf-8"> <style type="text/css"> body{ padding:0; margin:0; } .div{ width:960px; height:600px; margin:0 auto; background-color:#f1f1f1; } .left{ float:left; width:260px; height:460px; background:#ccc; } .right{ float:right; width:690px; height:460px; background:#ddd; } .clear{ clear:both; } .bottom{ margin-top:10px; height:200px; width:960px; background:red; } .jianjie{ width:260px; height:120px; background:red; overflow:auto; } </style> </head> <body> <div class="div"> <div class="left"> <div class="jianjie"> 麥子學院麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院<br /> 麥子學院麥子學院麥子學院<br /> </div> </div> <div class="right"></div> <div class="clear"></div> <div class="bottom"></div> </div> </body> </html>
CSS div和css布局