使用css3彈性盒模型怎么實現元素寬度自適應？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一、css實現左側寬度固定右側寬度自適應
1、定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
position: absolute;/*定位*/
left: 0;
top:0;
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定寬
</div>
<div class="right">
自適應
</div>
</body>
</html>2、浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
float: left;/*浮動*/
}
.right{
background: blue;
height: 200px;
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定寬
</div>
<div class="right">
自適應
</div>
</body>
</html>3、margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
background: red;
width: 200px;
height: 200px;
}
.right{
background: blue;
height: 200px;
margin-top: -200px;/*margin*/
margin-left: 210px;
}
</style>
</head>
<body>
<div class="left">
定寬
</div>
<div class="right">
自適應
</div>
</body>
</html>二、css3彈性盒模型實現自適應
1、上下高度固定中間高度自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
#contain{
display: flex;
flex-direction: column;/*列 垂直方向*/
height: 100%;/*全屏效果 該元素及其父元素及html、body height：100%*/
}
#top{
height: 200px;
background: red;
}
#center {
flex: 1;
background: blue;
}
#bottom{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="contain">
<div id="top">你好</div>
<div id="center">你好</div>
<div id="bottom">你也好</div>
</div>
</body>
</html>2、左側寬度固定右側寬度自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#contain {
display: flex; /*父元素設置該屬性*/
}
#left {
width: 100px;
height: 200px;
background: #fff8a8;
margin-right: 10px;
}
#right {
flex: 1; /*所占比例/份數*/
height: 200px;
background: #ff9bad;
}
</style>
</head>
<body>
<div id="contain">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用
進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上
關于使用css3彈性盒模型怎么實現元素寬度自適應問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
