min-width：最小宽度
max-width：最大宽度
hidden：该属性会把溢出盒子的内容进行隐藏
scroll：该属性会在盒子上添加一个滚动条，这样用户可以查看其余内容。
border-top- 调节上边框大小
border-right-width：调节右边框大小
border-bottom-width：调节下边框大小
border-left-width：调节左边框大小
border-style
solid：实线
dotted：一串方形点（如果边框宽度为2px，那么这些点就是边长为2px的正方形，个点之间的间隙也是2px）
dashed：一条虚线
double：两条实线（border-width属性的值是这两条实线宽的和）
groove： 显示为雕入页面的效果
ridge： 显示为在页面上凸起的效果
inset： 显示为嵌入页面的效果
outset：看起来像是要凸出屏幕
hidden/none：不显示任何边框
可以用下面的属性对个边框的样式单独进行设置：
border-top-style 上
border-left-style 左
border-right-style 右
border-bottom-style 下
dsp1dy 属性允许你将一个内联元素转换成一个块级元素,反之亦然,而且该属性还可以用于从页上隐藏元素
inline：该值可以使一个块级元素表现得像一个内联元素。
block：该值可以使一个内联元素表现得像一个块级元素。
inline-block：该值可以使一个块级元素像内联元素那样浮动并保持其他的块级元素特征。
none：该值将一个元素从页面上隐藏。此种情况下,页面上就像没有这个元素一样(如果用户使用浏览器中的“查看源码”选项,
那他仍然可以看到盒子中的内容)使用这个属性时一定要注意,不应该在内联盒子中创建块级元素。
visibility：属性允许从用户的视线中隐藏盒子,但它保留了元素原来占用的空间。该属性可以选用以下值之一
hidden:该值用于隐藏元素。
visible:该值用于显示元素。
盒子的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的大小</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
div{
400px;
height: 300px;
background: #ee3e80;}
p{
height: 75%;
75%;
background: #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>
宽度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽度限制</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- 150px;
min-height: 200px;
vertical-align: top;
line-height: 1.4em}
td.description{
min- 450px;
max- 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" </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>
</body>
</html>
高度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度限制</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
h2,p{
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>
内容溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容溢出</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;
font-size: 90%;
line-height: 1.2em;
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>
边框宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框宽度</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p{
200px;
border-style: solid;}
p.two{
broder- thick;}
p.three{
border- 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>
边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p{
250px;
border- 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>
边框颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框颜色</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111}
p{
border-style: solid;
border- 3px;
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>
快捷方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快捷方式</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
colro: #111111;}
p{
250px;
border: 3px dotted #0088dd;}
</style>
</head>
<body>
<p>Here is a simple chord sequence played on a Hammond organ through a Leslie speaker.</p>
</body>
</html>
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p{
275px;
border: 2px solid #0088dd;}
p.example{
padding:10px;}
</style>
</head>
<body>
<p>Analog synths produce a wave sound,
whereas the sounds stored on a digital synth have been sampled
and then turned into numbers.</p>
<p class="example">Analog synths produce a wave sound,
whereas the sounds stored on a digital synth have been sampled
and then turned into numbers.</p>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
p{
200px;
border: 2px solid #0088dd;
padding: 10px;}
p.example{
margin: 20px;}
</style>
</head>
<body>
<p>Analog synthesizers are often said
to have a "warmer" sound than their digital counterparts.</p>
<p class="example">Analog synthesizers are often said
to have a "warmer" sound than their digital counterparts.</p>
</body>
</html>
内容居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容居中</title>
<style type="text/css">
body{
text-align: center;}
p{
300px;
padding: 50px;
border: 20px solid #0088dd;}
p.example{
margin: 10px auto 10px auto;
text-align: left;}
</style>
</head>
<body>
<p>Analog synthesizers are often said to
have a "warmer" sound than their digital counterparts.</p>
<p class="example">Analog synthesizers are often said to
have a "warmer" sound than their digital counterparts.</p>
</body>
</html>
内联元素与块级元素的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联元素与块级元素的转换</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color: #111111;}
li{
display: inline;
margin-right: 10px}
li.coming-soon{
display: none;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Products</li>
<li class="coming-soon">Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
盒子的隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的隐藏</title>
<style type="text/css">
body{
font-family: Arial, Verdana, sans-serif;
color:# 111111;}
li{
display: inline;
margin-right: 10px;}
li.coming-soon{
visibility: hidden;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Products</li>
<li class="coming-soon">Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
CSS3：边框图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3:边框图像</title>
<style type="text/css">
p{
197px;
height: 54px;
border: 11px solid #ffffff;}
p.one{
-moz-border-image: url("images/dots.gif") 11 11 11 11 stretch;
-webkit-border-image: url("images/dots.gif") 11 11 11 11 stretch;
border-image: url("images/dots.gif") 11 11 11 11 stretch}
p.two{
-moz-border-image: url("images/dots.gif") 11 11 11 11 round;
-webkit-borter-image: url("images/dots.gif") 11 11 11 11 round;
border-image: url("images/dots.gif") 11 11 11 11 round;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
</body>
</html>
CSS3：盒子的投影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3:盒子的投影</title>
<style type="text/css">
p{
100px;
height: 100px;
background-color: #e1ddda;
margin: 20px;
display: inline-block;}
p.one{
-moz-box-shadow: -5px -5px #777777;
-webkit-box-shadow: -5px -5px #777777;
box-shadow: -5px -5px #777777;}
p.two{
-moz-box-shadow: 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px #777777;
box-shadow: 5px 5px 5px #777777;}
p.three{
-moz-box-shadow: 5px 5px 5px #777777;
-webkit-box-shadow: 5px 5px 5px 5px #777777;
box-shadow: 5px 5px 5px 5px #777777;}
p.four{
-moz-box-shadow: 0 0 10px #777777;
-webkit-box-shadow: 0 0 10px #777777;
box-shadow: 0 0 10px #777777;}
p.five{
-moz-box-shadow: inset 0 0 10px #777777;
-webkit-box-shadow: inset 0 0 10px #777777;
box-shadow: inset 0 0 10px #777777;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<br />
<p class="four"></p>
<p class="five"></p>
</body>
</html>
CSS3：圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3:圆角</title>
<style type="text/css">
p{
border: 5px solid #ee3e80;
padding: 20px;
275px;
border-radius: 10px;
-moz-box-radius; 10px;
-webkit-border-radius: 10px;}
</style>
</head>
<body>
<p>Pet Sounds featured a number of unconventional instruments such as bicycle bells,
buzzing organs, harpsichords, flutes, Electro-Theremin,
dog whistles, trains, Hawaiian-sounding string instruments,
Coca-Cola cans and barking dogs.</p>
</body>
</html>
CSS3：椭圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3：椭圆形</title>
<style type="text/css">
p{
border: 5px solid #ee3e80;
padding: 10px;
100px;
height: 100px;
display: inline-block;
margin: 20px;}
p.one{
border-top-left-radius: 50px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
p.two{
border-radius: 1em 4em 1em 4em /2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em/ 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;}
p.three{
padding: 0px;
border-radius: 100px;
-moz-border-radous: 100px;
-webkit-border-radius: 100px;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
</html>