溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS如何設置每個div的寬高和背景色”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS如何設置每個div的寬高和背景色”文章能幫助大家解決問題。
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。
如下代碼是CSS通過id設置每個div的寬高和背景色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a {
width: 200px;
height: 100px;
background: red;
}
#b {
width: 200px;
height: 100px;
background: blue;
}
#c {
width: 200px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>執行效果：
浮動布局
我們先寫兩個div設置上背景顏色看看效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
}
#rside {
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="lside">我是左邊</div>
<div id="rside">我是右邊</div>
</body>
</html>
上文也說ddiv的內容會自動地開始一個新行，所以想將兩個div左右排列就要進行浮動布局
我們分別在CSS中加上float屬性
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 200px;
background: green;
float: right;
}
</style>效果如下圖：
清除浮動
當有浮動布局和普通div共同存在時，會發生如下覆蓋的情況
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 300px;
background: green;
float: right;
}
#normal {
height: 400px;
background: blue;
}
</style>
</head>
<body>
<div id="lside">我是左邊</div>
<div id="rside">我是右邊</div>
<div id="normal">我不設置浮動</div>
</body>
</html>
所以如果不想被覆蓋，就要清除浮動
在CSS中對普通元素設置clear屬性
當我們增加 clear: left; 時，代表不讓左邊浮動蓋著自己
#normal {
height: 400px;
background: blue;
clear: left;
}此時清除左浮的div就會貼著左浮的div下邊顯示，如圖：
同樣的還可設置 clear: right; 代表不讓右邊浮動蓋著自己；設置 clear: both; 代表不讓浮動蓋著自己。這里不做演示
關于“CSS如何設置每個div的寬高和背景色”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
