HTML+CSS相對(duì)寬度和絕對(duì)寬度沖突時(shí)的div解決方法

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

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

相對(duì)寬度和絕對(duì)寬度沖突時(shí)的div解決方法

摘要：一般我們?cè)谑褂媒^對(duì)寬度時(shí)會(huì)使用px，相對(duì)寬度時(shí)會(huì)使用%，但是要是同時(shí)使用絕對(duì)寬度和相對(duì)寬度時(shí)該怎么辦呢？

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

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

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

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

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

先寫(xiě)出大體的盒子框架

<!-- Tiger的代碼世界 -->
<!doctype html>
<html>
<head>
    <title>相對(duì)寬度和絕對(duì)寬度討論</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容器我就不贅述了。我只講中間部分。

首先明確，相對(duì)寬度和絕對(duì)寬度的問(wèn)題是不能同時(shí)解決的（1.就本題而言 2.歡迎指正）
那我們就把問(wèn)題拆分：先解決相對(duì)寬度，后解決絕對(duì)寬度or先解決絕對(duì)寬度，后解決相對(duì)寬度。就本題而言，前者更簡(jiǎn)便一些。而我們?cè)趺?ldquo;拆分”問(wèn)題呢？——當(dāng)然是容器div啦！

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

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

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

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

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

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

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

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

HTML：

<!Tiger的代碼世界>
<!doctype html>
<html>
<head>
    <title>CSS布局練習(xí)</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的寬度
  以下皆默認(rèn)為不加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;
}

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