abstrait：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>世間萬物皆系于盒子之上(box)</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/* 可以簡寫:按順時針 */
padding: 50px 40px 30px 20px;
/* 上邊框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
/* 右邊框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
/* 下邊框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左邊框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
/* 以上樣式與可以簡寫 */
border-top: 10px solid red;
border-right: 10px dashed yellow;
border-bottom: 10px dotted blue;
border-left: 10px double black;
/* 如何每個方向的邊框?qū)挾?樣式與顏色是一樣的,還可以進(jìn)一步簡寫 */
border: 10px solid slateblue;
}
/*box2盒子是box1的內(nèi)容,會繼承box1的寬度*/
.box2 {
/*height: inherit;*/
background-color: salmon;
}
</style>
</head>
<body>
<h3 style="color: palevioletred">寫一個盒模型的簡單案例，體會padding/border的簡寫規(guī)則</h3>
<div>
<p>里面可以看到漢字嗎？</p>
<div>
<img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201406/2014063021281300.gif" alt="我會顯示提示嗎？" style="width: 200px">
</div>
</div>
</body>
</html>
個人總結(jié)：
div盒子不定義大小或者只定義大小，在界面上是看不到效果的，給div定義一個大小和背景色，就可以界面上看到效果，盒子里面可以增加子盒子，繼承父級盒子的寬度，可以定義屬性，CSS樣式的優(yōu)先級是id>class>標(biāo)簽
Professeur correcteur：天蓬老師Temps de correction：2019-04-27 17:28:39
Résumé du professeur：邊框的定義與內(nèi)外邊距不同, 它不是透明的, 除了寬度, 還可以定義樣式與顏色