1.width,height寬度高度。
<!DOCTYPE html>
<html>
<head>
<title>Width Height</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
div {
width: 400px;
height: 300px;
background-color: #ee3e80;}
p {
height: 75%;
width: 75%;
background-color: #e1ddda;}
</style>
</head>
<body>
<div>
<p>The Moog company pioneered the commercial manufacture of modular voltage-controlled analog synthesizer systems in the early 1950s.</p>
</div>
</body>
</html>
使用百分數時，盒子的大小與瀏覽器視窗的大小有關。如果是盒子套盒子，百分數就是相當於外部盒子而言。比如P就是300*75%=225
em值盒子大小以盒子中的文字為基準
2.寬度限制min-width,max-width
保證在不同的裝置上顯示的效果不會太窄，寬。
<html>
<head>
<title>Min Width Max Width</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
th {
border-bottom: 1px solid #0088dd;
text-align: left;
color: #0088dd;
font-weight: normal;}
td {
min-width: 150px;
min-height: 200px;
vertical-align: top;
line-height: 1.4em;}
td.description {
min-width: 450px;
max-width: 650px;
text-align: left;
padding: 5px;
margin: 0px;}
</style>
</head>
<body>
<table>
<tr>
<th>Photo</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="images/rhodes.jpg" width="200" height="150" alt="Fender Rhodes" /></td>
<td class="description">The Rhodes piano is an electro-mechanical piano, invented by Harold Rhodes during the fifties and later manufactured in a number of models, first in collaboration with Fender and after 1965 by CBS. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td>
<td>$1400</td>
</tr>
<tr>
<td><img src="images/wurlitzer.jpg" width="200" height="150" alt="Wurlitzer EP200" /></td>
<td class="description">The Wurlitzer electric piano is an electro-mechanical piano, created by the Rudolph Wurlitzer Company of Mississippi. The Wurlitzer company itself never called the instrument an "electric piano", instead inventing the phrase "Electronic Piano" and using this as a trademark throughout the production of the instrument. It employs a piano-like keyboard with hammers that hit small metal tines, amplified by electromagnetic pickups.</td>
<td>$1600</td>
</tr>
<tr>
<td><img src="images/clavinet.jpg" width="200" height="150" alt="Hohner Clavinet D6" /></td>
<td class="description">A Clavinet is an electronically amplified clavichord manufactured by the Hohner company. Each key uses a rubber tip to perform a hammer on a string. Its distinctive bright staccato sound is often compared to that of an electric guitar. Various models were produced over the years, including the models I, II, L, C, D6, and E7.</td>
<td>$1200</td>
</tr>
</table>
</body>
</html>
3.高度限制 min-height,max-height
<!DOCTYPE html>
<html>
<head>
<title>Min Height Max Height</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
h2, p {
width: 400px;
font-size: 90%;
line-height: 1.2em;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p {
min-height: 10px;
max-height: 30px;}
</style>
</head>
<body>
<h2>Fender Mustang</h2>
<p>The Fender Mustang was introduced in 1964 as the basis of a major redesign of Fender's student models then consisting of the Musicmaster and Duo-Sonic. It was originally popular in sixties surf music and attained cult status in the 1990s largely as a result of its use by a number of alternative rock bands.</p>
<h2>Fender Stratocaster</h2>
<p>The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p>
<h2>Gibson Les Paul</h2>
<p>The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p>
</body>
</html>
4.內容溢位overflow
告訴瀏覽器當盒子的內容超過盒子本身時如何顯示，它有像個屬性值可供選擇。
hidden溢位部分隱藏
scroll新增捲軸
<!DOCTYPE html>
<html>
<head>
<title>Overflow</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;
font-size: 90%;
line-height: 1.2em;
width: 200px;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p {
min-height: 30px;
max-height: 85px;}
p.one {
overflow: hidden;}
p.two {
overflow: scroll;}
</style>
</head>
<body>
<h2>Fender Stratocaster</h2>
<p class="one">The Fender Stratocaster or "Strat" is one of the most popular electric guitars of all time, and its design has been copied by many guitar makers. It was designed by Leo Fender, George Fullerton and Fredie Tavares in 1954.</p>
<h2>Gibson Les Paul</h2>
<p class="two">The Gibson Les Paul is a solid body electric guitar that was first sold in 1952. The Les Paul was designed by Ted McCarty in collaboration with popular guitarist Les Paul, whom Gibson enlisted to endorse the new model. It is one of the most well-known electric guitar types in the world.</p>
</body>
</html>
5.邊框，外邊距和內邊距
（1）每個盒子都有邊框，邊框將一個盒子的邊緣和另一個盒子隔開。
（2）外邊距位於邊框的邊緣之外。你可以透過設定外邊距的寬度在兩個相鄰盒子的邊緣之間建立空隙
（3）內邊距是指盒子邊框與盒子所包含內容之間的空隙。增加內邊距可以提高內容的可讀性。
5.邊框寬度border-width
該屬性可以是畫素值也可以是以下值之一thin,medium,thick。不能是百分數
也可以透過border-top-width,border-right-width,border-bottom-width,border-left-width控制
border-width:2px 1px 1px 2px；順時針上右下左
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 200px;
border-style: solid;}
p.one {
border-width: 2px;}
p.two {
border-width: thick;}
p.three {
border-width: 1px 4px 12px 4px;}
</style>
</head>
<body>
<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="two">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>
</body>
</html>
6.邊框樣式border-style
solid,實線。dotted方形點，dashed 虛線。double 雙實線 groove雕入頁面效果。ridge，凸起。inset嵌入，outset凸出螢幕。hidden/none不顯示
同樣可以用border-top-style,border-right-style,border-bottom-style,border-left-style;
<!DOCTYPE html>
<html>
<head>
<title>Border Style</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 250px;
border-width: 3px;}
p.one {
border-style: solid;}
p.two {
border-style: dotted;}
p.three {
border-style: dashed;}
p.four {
border-style: double;}
p.five {
border-style: groove;}
p.six {
border-style: ridge;}
p.seven {
border-style: inset;}
p.eight {
border-style: outset;}
</style>
</head>
<body>
<p class="one">Wurlitzer Electric Piano</p>
<p class="two">Wurlitzer Electric Piano</p>
<p class="three">Wurlitzer Electric Piano</p>
<p class="four">Wurlitzer Electric Piano</p>
<p class="five">Wurlitzer Electric Piano</p>
<p class="six">Wurlitzer Electric Piano</p>
<p class="seven">Wurlitzer Electric Piano</p>
<p class="eight">Wurlitzer Electric Piano</p>
</body>
</html>
7.邊框顏色。rgb,十六進位制，顏色名
border-top-color,border-right-color,border-bottom-color,border-left-color。
<!DOCTYPE html>
<html>
<head>
<title>Border Color</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
border-style: solid;
border-width: 3px;
width: 200px;}
p.one {
border-color: #0088dd;}
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
</style>
</head>
<body>
<p class="one">The ARP Odyssey was introduced in 1972.</p>
<p class="two">The ARP Odyssey was introduced in 1972.</p>
</body>
</html>
8.快捷方式寫在一起
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p {
width: 250px;
border: 3px dotted #0088dd;}