国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
CSS寬高相關(guān)
一.自適應(yīng)高度
用這個(gè)好用
div {
     width
:200px;
     height
:auto!important;
     height
:200px;
     min-height
:200px;
     border
:1px solid green;
    
}
-----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div自動(dòng)高度</title>
<style type="text/css">
<!--
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; margin:0 auto 10px auto;}
.cl{ clear:both;}
.con1 { overflow:auto; height:auto;margin:auto; background-color:#FFFFCC;}
.top1{ height:200px; width:80%; background-color:#eee; margin:0 auto;}
-->
</style>
</head>
<body>
<h4>利用clear自動(dòng)高度,因?yàn)門OP層有下邊界</h4>
<div class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自動(dòng)高度實(shí)現(xiàn),無下邊界的情況</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>

二、給行內(nèi)元素定義寬度

 

  如果你給一個(gè)行內(nèi)元素定義寬度,那么它只是在IE6下有效. 所有的HTML元素要么是行內(nèi)元素要么就好是塊元素. 行內(nèi)元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內(nèi)元素的寬度, 為了解決這個(gè)問題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素.

 

  1. span { width: 150px; display: block }  

  為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div, 一個(gè)包含另一個(gè):

 

Java代碼
  1. <div class="container">   
  2.   
  3.        <div class="holder">Content</div>   
  4.   
  5. </div>  

 

  然后你需要定義外層div的min-width屬性,

 

Html代碼
  1. .container {   
  2.        min-width:300px;   
  3. }  

 

這時(shí)該是IE hack大顯身手的時(shí)候了. 你需要包含如下的代碼:

 

Html代碼
  1. * html .container {   
  2.       border-right: 300px solid #FFF;   
  3. }   
  4.   
  5. * html .holder {   
  6.       display: inline-block;   
  7.       position: relative;        
  8.       margin-right: -300px;   
  9. }  

三、讓固定寬度的頁面居中

 

  為了讓頁面在瀏覽器居中顯示, 需要相對(duì)定位外層div, 然后把margin設(shè)置為auto.

 

Html代碼
  1. #wrapper {   
  2.       margin: auto;   
  3.       position: relative;   
  4. }  
 

四、 最小寬度

 

  IE6另外一個(gè)bug就是它不支持 min-width 屬性. min-width又是相當(dāng)有用的, 特別是對(duì)于彈性模板來說, 它們有一個(gè)100%的寬度,min-width 可以告訴瀏覽器何時(shí)就不要再壓縮寬度了.

除IE6以外所有的瀏覽器你只需要一個(gè) min-width: Xpx; 例如:

 

Html代碼
  1. .container {   
  2.     min-width:300px;   
  3. }  

 

  為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div, 一個(gè)包含另一個(gè):

 

Java代碼
  1. <div class="container">   
  2.   
  3.        <div class="holder">Content</div>   
  4.   
  5. </div>  

 

  然后你需要定義外層div的min-width屬性,

 

Html代碼
  1. .container {   
  2.        min-width:300px;   
  3. }  

 

這時(shí)該是IE hack大顯身手的時(shí)候了. 你需要包含如下的代碼:

 

Html代碼
  1. * html .container {   
  2.       border-right: 300px solid #FFF;   
  3. }   
  4.   
  5. * html .holder {   
  6.       display: inline-block;   
  7.       position: relative;        
  8.       margin-right: -300px;   
  9. }  
五。最小高度然后自適合
#mrjin {
    background:#ccc;
    min-height:100px; 
    height:auto !important; 
    height:100px; 
    overflow:visible;
}
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS中!important的作用
九宮格基本布局(二)
深入理解CSS盒子模型(3)
CSS元素水平垂直居中方法總結(jié)(主要對(duì)大漠以及張?chǎng)涡癫┛退龇椒ㄟM(jìn)行了歸納)
css+div通用兼容性代碼
最常用的10種CSS BUG解決方法與技巧
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服