HTML+CSS相對寬度和絕對寬度沖突時的div解決方法

發(fā)布時間：2020-06-30 15:43:58 作者：Super_Tiger_Lee

我要評論

這篇文章主要介紹了HTML+CSS相對寬度和絕對寬度沖突時的div解決方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

相對寬度和絕對寬度沖突時的div解決方法

摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎么辦呢？

我們通過一道例題來講解今天的內(nèi)容：

1.完成圖片上的題目要求
2.嘗試提供這樣一種方案，使得寬度與屏幕等寬，布局大體與1類似，并且保證你無論怎么調整瀏覽器的寬度，都可以保證中間部分布局相對寬度不變化，且格子間的間距均為10px

題目1很簡單，有許多種解決方案，我就不一一贅述了

分析題目2，發(fā)現(xiàn)有兩個關鍵的需求：
相對寬度：格子的相對寬度（比例）不變
絕對寬度：格子間的絕對距離不變

如果只關注相對寬度，那么很簡單，令左邊格子的寬度為30%（舉例），右邊各自的寬度為70%即可；如果只關注絕對寬度，那么更簡單，令中間的距離為10px即可。但是同時要滿足時怎么辦呢？難不成要寫 width：（inherit-10px）*30% 么？
顯然不可以。我來講講我的解決方案吧（本人小白，如果有疏忽紕漏，或者您有更好的方案，歡迎在評論區(qū)指正?。?/p>

先寫出大體的盒子框架

<!-- Tiger的代碼世界 -->
<!doctype html>
<html>
<head>
    <title>相對寬度和絕對寬度討論</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
        </div>
        <div id="right">
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

top和bottom容器我就不贅述了。我只講中間部分。

首先明確，相對寬度和絕對寬度的問題是不能同時解決的（1.就本題而言 2.歡迎指正）
那我們就把問題拆分：先解決相對寬度，后解決絕對寬度or先解決絕對寬度，后解決相對寬度。就本題而言，前者更簡便一些。而我們怎么“拆分”問題呢？——當然是容器div啦！

我們先解決相對寬度：
我們讓A和C合并，然后和B用相對寬度描述

這就很簡單了，左邊寬度為30%，右邊寬度為70%
那怎么解決left容器里面的布局呢？
我們先想一想：能不能做一個左邊是寬度固定的格子，右邊是寬度可變的格子的容器？當然可以，這不是就是導航欄么！這個簡單得很，我隨便找一種方法粘在下面了：

#left{
    height: 300px;
    float: left;
    width: 150px;
}

#right{
    height: 300px;
    width: auto;
    margin-left: 150px;
}

這樣問題是不是就馬上解決了呢？
所以下次遇到相對和絕對沖突的時候，一定要使用好div這把利器啊！

當然我們也要注意一些小細節(jié)，比如如何處理border的問題等，這需要調一下外面容器和里邊容器的高度（相差2*border-width），并且為了使right容器和左邊相適應，right里面還要再套一個div才行。

盒式模型是css布局的基本功，大家一定要對其有深刻的理解，才應用在各種變形上。完成這道題還需要對margin、padding（雖然這道題沒有用到）、border以及div的關系有相當?shù)睦斫?，今天我就不再多講了，下次有時間再說。

下面把我的全部代碼粘上，對大家一個參考，要是有更好的方案，一定要在留言區(qū)分享哦！

HTML：

<!Tiger的代碼世界>
<!doctype html>
<html>
<head>
    <title>CSS布局練習</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="top">
    </div>
    <div class="wrapper">
        <div id="left">
            <div class="innerright"></div>
            <div class="inner"></div>
        </div>
        <div id="right">
            <div class="inner"></div>
        </div>
    </div>
    <div id="bottom">
    </div>
</body>
</html>

CSS：

/*Tiger的代碼世界*/

/*題目中的寬度不明確是加border和margin的寬度還是不加border和margin的寬度
  以下皆默認為不加border和margin的寬度*/


*{
    margin: 0px;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-color: black;
}

html{
    margin: 0;
    padding: 0;
    border-width: 0;
    width: 100%;
}

body{
    margin: 0;
    padding: 0;
    border-width: 0;
}

#top{
    margin: 10px;
    height: 150px;
}

.wrapper{
    margin: 10px;
    height: 300px;
    width: inherit;
    border-width: 0;
}

#left{
    height: 300px;
    width: 30%;
    float: left;
    border-width: 0;
}

#left .inner{
    height: 294px;
    width: auto;
    margin-right: 10px;

}

#left .innerright{

    height: 294px;
    width: 10px;
    float: right;
    border-width: 0;
    margin-left: 10px;
}


#right{
    height: 300px;
    width: 70%;
    float: right;
    border-width: 0;

}

#right .inner{
    height: 294px;
    width: auto;
}


#bottom{
    margin: 10px;
    height: 150px;
}

到此這篇關于HTML+CSS相對寬度和絕對寬度沖突時的div解決方法的文章就介紹到這了,更多相關HTML+CSS相對寬度和絕對寬度沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！