這篇文章主要介紹了HTML+CSS相對寬度和絕對寬度沖突時的div解決方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
相對寬度和絕對寬度沖突時的div解決方法
摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎么辦呢？
我們通過一道例題來講解今天的內(nèi)容：
1.完成圖片上的題目要求
2.嘗試提供這樣一種方案，使得寬度與屏幕等寬，布局大體與1類似，并且保證你無論怎么調(diào)整瀏覽器的寬度，都可以保證中間部分布局相對寬度不變化，且格子間的間距均為10px
題目1很簡單，有許多種解決方案，我就不一一贅述了
分析題目2，發(fā)現(xiàn)有兩個關(guān)鍵的需求：
相對寬度：格子的相對寬度（比例）不變
絕對寬度：格子間的絕對距離不變
如果只關(guān)注相對寬度，那么很簡單，令左邊格子的寬度為30%（舉例），右邊各自的寬度為70%即可；如果只關(guān)注絕對寬度，那么更簡單，令中間的距離為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先解決絕對寬度，后解決相對寬度。就本題而言，前者更簡便一些。而我們怎么“拆分”問題呢？——當(dāng)然是容器div啦！
我們先解決相對寬度：
我們讓A和C合并，然后和B用相對寬度描述
這就很簡單了，左邊寬度為30%，右邊寬度為70%
那怎么解決left容器里面的布局呢？
我們先想一想：能不能做一個左邊是寬度固定的格子，右邊是寬度可變的格子的容器？當(dāng)然可以，這不是就是導(dǎo)航欄么！這個簡單得很，我隨便找一種方法粘在下面了：
#left{
height: 300px;
float: left;
width: 150px;
}
#right{
height: 300px;
width: auto;
margin-left: 150px;
}
這樣問題是不是就馬上解決了呢？
所以下次遇到相對和絕對沖突的時候，一定要使用好div這把利器?。?/p>
當(dāng)然我們也要注意一些小細節(jié)，比如如何處理border的問題等，這需要調(diào)一下外面容器和里邊容器的高度（相差2*border-width），并且為了使right容器和左邊相適應(yīng)，right里面還要再套一個div才行。
盒式模型是css布局的基本功，大家一定要對其有深刻的理解，才應(yīng)用在各種變形上。完成這道題還需要對margin、padding（雖然這道題沒有用到）、border以及div的關(guān)系有相當(dāng)?shù)睦斫猓裉煳揖筒辉俣嘀v了，下次有時間再說。
下面把我的全部代碼粘上，對大家一個參考，要是有更好的方案，一定要在留言區(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的寬度
以下皆默認為不加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相對寬度和絕對寬度沖突時的div解決方法的文章就介紹到這了,更多相關(guān)HTML+CSS相對寬度和絕對寬度沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/732930.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
