本章内容的关键是要结合第1章的Box的示意图，正确理解Margin、border、Padding、Context的概念。
margin-top: 上边界
margin-bottom: 下边界
margin-left: 左边界
margin-right: 右边界
margin: 上下左右边界(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
s07_01.htm 【CSS】 body { margin: 0 } p { text-align: center; font-weight: bold; padding: 0.5em; border: solid 3px #000000; color: #ffffff; background: #ff3300 } #sample1 { margin: 0 } #sample2 { margin: 20px } #sample3 { margin: 40px } #sample4 { margin-right: 50% } #sample5 { margin-left: 50% } 【HTML】 <p id="sample1">上下左右Margin:0px</p> <p id="sample2">上下左右Margin:20px</p> <p id="sample3">上下左右Margin:40px</p> <p id="sample4">右Margin:50%</p> <p id="sample5">左Margin:50%</p>
padding-top: 上边界
padding-bottom: 下边界
padding-left: 左边界
padding-right: 右边界
padding: 上下左右边界(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
s07_02.htm 【CSS】 p { font-weight: bold; border: solid 3px #000000; color: #ffffff; background: #ff3300 } #sample1 { padding: 0 } #sample2 { padding: 20px } #sample3 { padding: 40px } #sample4 { padding-right: 50% } #sample5 { padding-left: 50% } 【HTML】 <p id="sample1">本段内容与边框之间的Padding的上下左右设置为：0px</p> <p id="sample2">本段内容与边框之间的Padding的上下左右设置为：20px</p> <p id="sample3">本段内容与边框之间的Padding的上下左右设置为：40px</p> <p id="sample4">本段内容与边框之间的Padding的上下左右设置为：50%</p> <p id="sample5">本段内容与边框之间的Padding的右面设置为：50%</p>
border-top-width: 上边框
border-bottom-width: 下边框
border-left-width: 左边框
border-right-width: 右边框
border-width: 上下左右边框(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
s07_03.htm 【CSS】 p { text-align: center; font-weight: bold; padding: 0.5em; border: solid #000000; color: #ffffff; background: #ff3300 } #sample1 { border-width: 1px } #sample2 { border-width: thin } #sample3 { border-width: medium } #sample4 { border-width: thick } #sample5 { border-width: 1em } #sample6 { border-left-width: 100px; border-right-width: 0; } 【HTML】 <p id="sample1">本段边框的border的上下左右设置为：1px</p> <p id="sample2">本段边框的border的上下左右设置为：thin</p> <p id="sample3">本段边框的border的上下左右设置为：medium</p> <p id="sample4">本段边框的border的上下左右设置为：thick</p> <p id="sample5">本段边框的border的上下左右设置为：1em</p> <p id="sample6">本段边框的border的左边框设置为：100px设置为：0px</p>
border-top-color: 上边框
border-bottom-color: 下边框
border-left-color: 左边框
border-right-color: 右边框
border-color: 上下左右边框(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
s07_04.htm 【CSS】 body { margin: 2em } p { text-align: center; font-weight: bold; padding: 1em; border: solid 6px; } #sample1 { border-color: #ff3300 } #sample2 { border-color: #ffcc00 } #sample3 { border-color: #339933 } #sample4 { border-color: #333399 } #sample5 { border-top-color: #339933; border-bottom-color: #ff3300; border-left-color: #333399; border-right-color: #ffcc00 } 【HTML】 <p id="sample1">border-color: #ff3300</p> <p id="sample2">border-color: #ffcc00</p> <p id="sample3">border-color: #339933</p> <p id="sample4">border-color: #333399</p> <p id="sample5">上:#339933 下:#ff3300 左:#333399 右:#ffcc00</p>
border-top-style: 上边框
border-bottom-style: 下边框
border-left-style: 左边框
border-right-style: 右边框
border-style: 上下左右边框(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
线型的值：none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset
s07_05.htm 【CSS】 body { margin: 2em } p { text-align: center; font-weight: bold; padding: 0.5em; border: solid 8px #ff3300; } #sample1 { border-style: none } #sample2 { border-style: solid } #sample3 { border-style: double } #sample4 { border-style: dashed } #sample5 { border-style: dotted } #sample6 { border-style: groove } #sample7 { border-style: ridge } #sample8 { border-style: inset } #sample9 { border-style: outset } 【HTML】 <p id="sample1">none</p> <p id="sample2">solid</p> <p id="sample3">double</p> <p id="sample4">dashed</p> <p id="sample5">dotted</p> <p id="sample6">groove</p> <p id="sample7">ridge</p> <p id="sample8">inset</p> <p id="sample9">outset</p>
border-top: 上边框
border-bottom: 下边框
border-left: 左边框
border-right: 右边框
border: 上下左右边框(说明如下：)
只有1个值时，指：上下左右
只有2个值时，第1个值：上下， 第2个值：左右
只有3个值时，第1个值：上 ， 第2个值：左右， 第3个值：下
只有4个值时，第1个值：上 ， 第2个值：右， 第3个值：下， 第3个值：左
s07_06.htm 【CSS】 p { text-align: center; font-weight: bold; margin: 2em; padding: 1em } #sample1 { border: double 3px #ff3300 } #sample2 { border: dashed 2px #ffcc00 } #sample3 { border: dotted 7px #339933 } #sample4 { border: ridge 10px #3366cc } 【HTML】 <p id="sample1">border: double 3px #ff3300</p> <p id="sample2">border: dashed 2px #ffcc00</p> <p id="sample3">border: dotted 7px #339933</p> <p id="sample4">border: ridge 10px #3366cc</p>
weight: 宽度
height: 高度
宽度和高度：带单位的数值，百分比%，auto
s07_07.htm 【CSS】 img.small { width: 50px; height: 50px } img.normal { width: auto; height: auto } img.large { width: 200px; height: 200px } .half { width: 50%; color: #ffffff; background: #ff3300 } 【HTML】 <p> 中间图象的大小是：（100px×100px） </p> <p> <img src="orange.jpg" alt="" class="small"> <img src="orange.jpg" alt="" class="normal"> <img src="orange.jpg" alt="" class="large"> </p> <hr> <p class="half"> 本段落的宽度(width)被设置为50%,请改变浏览器的宽度来看效果。 </p> <p> select元素：<br> <select class="half"> <option selected>选择项目1</option> <option>选择项目2</option> </select> </p> <p> input元素：<br> <input type="text" class="half" value="文本输入框"> </p> <p> textarea元素：<br> <textarea rows="5" cols="30" class="half"> 多行文本输入框 </textarea> </p>