• 當前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> div+css >> div css布局解決瀏覽器兼容及優(yōu)化等實用技巧

div css布局解決瀏覽器兼容及優(yōu)化等實用技巧

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點擊數(shù)： 更新時間：2009-06-21
• DIV 上下居中用 line-height
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  div.v-align {line-height: 200px;height: 200px;border: 1px solid red;}
  </style>
  <div class="v-align">垂直居中</div>
  清除瀏覽器默認樣式
  1.用其他有名的庫來清除（如：YUI)
  2.自已清除 如：
  * {padding: 0;margin:0;}
  讓A支持所有瀏覽器
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  a.agideo:link, a.agideo:visited {font-weight: bold;text-decoration: none;color: green;}
  a.agideo:hover, a.agideo:active {font-weight: bold;text-decoration: none;color: red;}
  </style>
  <a class="agideo">捷道數(shù)碼</a>
  <style type="text/css">
  a.google:hover, a.google:active {font-weight: bold;text-decoration: none;color: red;}
  a.google:link, a.google:visited {font-weight: bold;text-decoration: none;color: green;}
  </style>
  <a class="google">Google</a>
  A 偽類定義順序記憶法
  LoVe:HAte(愛恨)
  IMG vertical-align
  vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
  baseline :默認值。將支持 valign 特性的對象的內容與基線對齊
  sub 垂直對齊文本的下標
  super 垂直對齊文本的上標
  top : 將支持 valign 特性的對象的內容對象頂端對齊
  text-top : 將支持 valign 特性的對象的文本與對象頂端對齊
  middle : 將支持 valign 特性的對象的內容與對象中部對齊
  bottom : 將支持 valign 特性的對象的內容與對象底端對齊
  text-bottom : 將支持 valign 特性的對象的文本與對象頂端對齊
  length : 由浮點數(shù)字和單位標識符組成的長度值 | 百分數(shù)�？蔀樨摂�(shù)。定義由基線算起的偏移量。基線對于數(shù)值來說為0，對于百分數(shù)來說就是0%。請參閱 長度單位。目前IE尚未實現(xiàn)此參數(shù)
  Html代碼　
  復制代碼代碼如下:
  <style type="text/css">
  div.v-align {border: 1px solid red;line-height: 40px;float: left;font-size: 11px;height: 40px;}
  div.v-align img.only-img {float:left;}
  div.v-align.has-img {padding-top: 10px;height: 30px;}
  div.v-align.has-img-and-text img.has-text {
  vertical-align: -4px !important;vertical-align: middle;margin-top: -3px !important;margin-top: 0px;}
  div.v-align.has-img-and-text {
  padding-top: 0px !important;padding-top: 10px;height: 40px !important;height: 30px;}
  </style>
  <div class="v-align">正常</div>
  <div class="v-align has-img"><img src="http://dl.iteye.com/upload/attachment/162320/1f89f269-580c-304b-975a-e6004b9893ce.png" class="only-img" /></div>
  <div class="v-align has-img-and-text"><img src="./accept.png" align="absmiddle" class="has-text" />有圖片有字</div>
  垂直Margin 疊加
  Html代碼
  復制代碼代碼如下:
  <style tyep="text/css">
  body, div {padding:0;margin:0;}
  div, span {padding: 10px;margin: 10px;border: 10px solid #000;}
  #div1 {background-color: red;}
  #div2 {background-color: green;}
  #div3 {background-color: blue;}
  </style>
  <div id="div1"><div>div1</div></div>
  <div id="div2"><div>div2</div></div>
  <div id="div3"><span>span1</span><span>span2</span></div>
  Background position
  Html代碼
  復制代碼代碼如下:
  <style tyep="text/css">
  body, div {padding:0;margin:0;}
  div {border:1px solid #ccc;height: 200px;width: 300px;}
  #div1 {background: url(http://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px;}
  #div2 {background: urlhttp://dl.iteye.com/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%;}
  #div3 {background: url(http://dl.iteye.com/upload/attachment/162318/8be0e495-2d0a-3ec2-9f5f-7465eb8c23ae.jpg) no-repeat 20% 20%;}
  </style>
  <div id="div1">20px</div><br/>
  <div id="div2">20%</div><br/>
  <div id="div3">20%</div>
  Float 占地問題
  1.父子TAG都Float以父能包含子
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  div.parent {border: 1px solid red;width: 600px;float: left; }
  div.child {border: 1px solid green;float: left;}
  </style>
  <div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  </div>
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  div.parent {border: 1px solid red;width: 600px;float: left; }
  div.child {border: 1px solid green;float: left;}
  </style>
  <div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  </div>
  2.最后一個子TAG后加一clear的無語義tag
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  div.parent {border: 1px solid red;width: 600px;}
  div.child {border: 1px solid green;float: left;}
  div.clear {clear: both;}
  </style>
  <div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="clear"></div>
  </div>
  例子7:
  Html代碼
  復制代碼代碼如下:
  <style type="text/css">
  div.parent {border: 1px solid red;width: 600px;}
  div.child {border: 1px solid green;float: left;}
  div.clear {clear: both;}
  </style>
  <div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="clear"></div>
  </div>
• DIV+CSS創(chuàng)建三欄網頁布局方法介紹 :上一篇
  DIV+CSS常用的Html網頁布局代碼 :下一篇