盒子

1.1 盒子大小的控制

自定义的盒子的大小,就需要用到width和height属性.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Width Height</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             div {
10                 width: 400px;
11                 height: 300px;
12                 background-color: #ee3e80;}
13             p {
14                 height: 75%;
15                 width: 75%;
16                 background-color: #e1ddda;}
17         </style>
18     </head>
19     <body>
20         <div>
21         <p>The Moog company pioneered the commercial manufacture of modular voltage-controlled analog synthesizer systems in the early 1950s.
22                 </p>
23         </div>
24     </body>
25 </html>

指定盒子的大小的最常用的方法就是像素,百分数或em值.

宽度限制

min-width属性指定一个盒子在浏览器窗口较窄时可以显示的最小宽度,max-width属性指定一个盒子在浏览器较窄时所能延伸的最大宽度.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Min Width Max Width</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             th {
10                 border-bottom: 1px solid #0088dd; 
11                 text-align: left; 
12                 color: #0088dd;
13                 font-weight: normal;}
14             td {
15                 min-width: 150px;
16                 min-height: 200px;
17                 vertical-align: top;
18                 line-height: 1.4em;}
19             td.description {
20                 min-width: 450px;
21                 max-width: 650px;
22                 text-align: left;
23                 padding: 5px;
24                 margin: 0px;}
25             </style>
26     </head>
27     <body>
28         <table>
29             <tr>
30                 <th>Photo</th>
31                 <th>Description</th>
32                 <th>Price</th>
33             </tr>
34             <tr>
35                 <td><img src="images/rhodes.jpg" width="200" height="150" alt="Fender Rhodes" /></td>
36                 <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>
37                 <td>$1400</td>
38             </tr>
39             <tr>
40                 <td><img src="images/wurlitzer.jpg" width="200" height="150" alt="Wurlitzer EP200" /></td>
41                 <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>
42                 <td>$1600</td>
43             </tr>
44             <tr>
45                 <td><img src="images/clavinet.jpg" width="200" height="150" alt="Hohner Clavinet D6" /></td>
46                 <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>
47                 <td>$1200</td>
48             </tr>
49         </table>
50     </body>
51 </html>

高度限制

min-height,max-height可以用来控制盒子的大小.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Min Height Max Height</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             h2, p {
10                 width: 400px;
11                 font-size: 90%;
12                 line-height: 1.2em;}
13             h2 {
14                 color: #0088dd;
15                 border-bottom: 1px solid #0088dd;}
16             p {
17                 min-height: 10px;
18                 max-height: 30px;}
19         </style>
20     </head>
21     <body>
22         <h2>Fender Mustang</h2>
23         <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>
24         <h2>Fender Stratocaster</h2>
25         <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>
26         <h2>Gibson Les Paul</h2>
27         <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>
28     </body>
29 </html>

内容溢出

overflow属性告诉浏览器当盒子的内容超过盒子本身时该如何显示.它有两个值可供选择

hidden属性会直接把溢出盒子空间的内容进行隐藏.

scroll属性会在盒子上添加一个滚动条,这样用户可以通过滚动条来查看其余的内容.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Overflow</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;
 9                 font-size: 90%;
10                 line-height: 1.2em;
11                 width: 200px;}
12             h2 {
13                 color: #0088dd;
14                 border-bottom: 1px solid #0088dd;}
15             p {
16                 min-height: 30px;
17                 max-height: 85px;}
18             p.one {
19                 overflow: hidden;}
20             p.two {
21                 overflow: scroll;}
22         </style>
23     </head>
24     <body>
25         <h2>Fender Stratocaster</h2>
26         <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>
27         <h2>Gibson Les Paul</h2>
28         <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>
29     </body>
30 </html>

边框宽度

使用border-width来控制边框的宽度,该属性的值可以是像素值,也可以选择以下值之一:

thin,medium,thick

该属性值不可以使用百分数

可以通过下面4种属性分别对各个边框大小进行控制:

border-top-width

border-right-width

border-bottom-width

border-left-width

还可以在一个属性中为四个边框指定不同的宽度值,就像下面这样:

border-2px 1px 1px 2px;

上面的属性值按顺时针顺序出现:上方,右侧,下方,左侧.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Border Width</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             p {
10                 width: 200px;
11                 border-style: solid;}
12             p.one {
13                 border-width: 2px;}
14             p.two {
15                 border-width: thick;}
16             p.three {
17                 border-width: 1px 4px 12px 4px;}
18         </style>
19     </head>
20     <body>
21         <p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
22         <p class="two">Hohner's "Clavinet" is essentially an electric clavichord.</p>
23         <p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>
24     </body>
25 </html>

边框样式

可以使用border-style来控制边框的样式,该属性可以取以下值:

solid:一条实线

dotte:一串方形点

dashed:一条虚线

double:两条实线

边框颜色

border-color:用来属性可以用来控制一个盒子不同方向上的边框的颜色

border-top-color

border-right-color

border-bottom-color

border-left-color

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Border Color</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             p {
10                 border-style: solid; 
11                 border-width: 3px;
12                 width: 200px;}
13             p.one {
14                 border-color: #0088dd;}
15             p.two {
16                 border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
17         </style>
18     </head>
19     <body>
20         <p class="one">The ARP Odyssey was introduced in 1972.</p>
21         <p class="two">The ARP Odyssey was introduced in 1972.</p>
22     </body>
23 </html>

快捷方式

border属性允许你在一个属性中同时指定边框的宽度,样式和颜色(不过属性值应该按照这个顺序编写)

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Border Shorthand</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             p {
10                 width: 250px;
11                 border: 3px dotted #0088dd;}
12         </style>
13     </head>
14     <body>
15         <p>Here is a simple chord sequence played on a Hammond organ through a Leslie speaker.</p>
16     </body>
17 </html>

内边距

padding属性用来指定元素的内容与元素的边框之间保持多大的空隙.

可使用以下属性分别指定各个方向上的内边距

padding-top

padding-right

padding-bottom

padding-left

或者,也可以使用下面的快捷方式(其属性按照顺时针顺序出现:上方,右侧,下方,左侧)

padding:10px 5px 3px 1px;

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Padding</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             p {
10                 width: 275px;
11                 border: 2px solid #0088dd;}
12             p.example {
13                 padding: 10px;}
14         </style>
15     </head>
16     <body>
17         <p>Analog synths produce a wave sound, whereas the sounds stored on a digital synth have been sampled and then turned into numbers.</p>
18         <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>
19     </body>
20 </html>

外边距

margin属性用来控制盒子与盒子之间的空隙.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Margin</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             p {
10                 width: 200px;
11                 border: 2px solid #0088dd;
12                 padding: 10px;}
13             p.example {
14                 margin: 20px;}
15         </style>
16     </head>
17     <body>
18         <p>Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.</p>
19         <p class="example">Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.</p>
20     </body>
21 </html>

内联元素与块级元素的转换

display属性

该属性有以下值:

inline:该值可以使一个块级元素变现地像一个内敛元素

block:该值可以使一个内联元素变现得像一个块级元素

inline-block:该值可以使得一个块级元素像内联元素那样浮动并保持其他的块级元素特征.

none:该值将一个元素从页面上隐藏

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Display</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             li {
10                 display: inline; 
11                 margin-right: 10px;}
12             li.coming-soon {
13                 display: none;}
14         </style>
15     </head>
16     <body>
17         <ul>
18             <li>Home</li>
19             <li>Products</li>
20             <li class="coming-soon">Services</li>
21             <li>About</li>
22             <li>Contact</li>
23         </ul>
24     </body>
25 </html>

盒子的隐藏

visibility属性用来设置盒子的可视度

该属性可以选用以下值之一:

hidden:该值用于隐藏元素

visible:该值用于显示元素

如果一个元素的visibility属性值被设置为hidden,那么在该元素的位置会显示空白.

例如:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Visibility</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             li {
10                 display: inline; 
11                 margin-right: 10px;}
12             li.coming-soon {
13                 visibility: hidden;}
14         </style>
15     </head>
16     <body>
17         <ul>
18             <li>Home</li>
19             <li>Products</li>
20             <li class="coming-soon">Services</li>
21             <li>About</li>
22             <li>Contact</li>
23         </ul>
24     </body>
25 </html>

完