标签：style 盒子 electric color height width border CSS
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;}
标签：style,
盒子,
electric,
color,
height,
width,
border,
CSS
From： https://www.cnblogs.com/zhongta/p/18449926