學習內容：
- 高和寬設置
- 邊框設置
- 內外邊距設置
- 盒子的計算
- 元素顯示方式
width:長度值|百分比|auto max-width:長度值|百分比|auto , min-width:長度值|百分比|auto
<style>
p{background-color: red;width: 400px}
.one{max-width: 300px}
.two{min-width: 250px}
</style>
<body>
<p>盒子模型寬度width:400px;</p>
<p class="one">盒子模型最大寬度max-width:300px;</p>
<p class="two">盒子模型最小寬度min-width:250px;</p>
</body>
<style>
p{background-color: red;width: 400px}
.one{max-width: 500px}
.two{min-width: 500px}
</style>
</head>
<body>
<p>盒子模型寬度width:400px;</p>
<p class="one">盒子模型最大寬度max-width:500px;</p>
<p class="two">盒子模型最小寬度min-width:500px;</p>
</body>
<style>
div{width: 600px; background-color: #acacac;}
p{background-color: red;width: 400px}
.one{max-width: 500px}
.two{min-width: 500px}
.three{min-width: 300px;max-width: 600px}
</style>
</head>
<body>
<div>
<p>盒子模型寬度width:400px;</p>
<p class="one">盒子模型最大寬度max-width:500px;</p>
<p class="two">盒子模型最小寬度min-width:500px;</p>
<p class="three">盒子模型最大小寬度min-width和max-width;</p><!--400px-->
</div>
height:同理。
如果width和height不在max和min之間並且大於max，則顯示max的值。
如果width和height不在max和min之間並且小於min，則顯示min的值。
哪些HTML元素可設置高和寬屬性：
- 塊級元素：p div h1-h6 ul li ol dl dt dd
- 替換元素：瀏覽器根據其標籤的元素與屬性來判斷顯示的具體內容 img input textarea
邊框屬性：
- 邊框寬度(border-width)
- 邊框顏色(border-color)
- 邊框樣式(border-style)
border-width:thin|medium|thick|長度值
border-color:顏色|transparent
border-style:
| none | 定義無邊框，默認值 |
| hidden | 與none相同，除非在表格元素中解決邊框衝突時 |
| dotted | 點狀邊框，大多數瀏覽器呈實線 |
| dashed | 虛線大多數瀏覽器呈實線 |
| solid | 實線 |
| double | 雙線 |
| groove | 3D凹槽邊框 |
| ridge | 3D壟狀邊框 |
| inset | 3Dinset邊框 |
| outset | 3Doutset邊框 |
| inherit | 規定應該從父元素繼承邊框樣式 |
三個值都有，border才能顯示出來。
4個不同方向來表示（上、下、左、右）border-[left | right | top | bottom]-width
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style
邊框縮寫：border:[寬度] | [樣式] | [顏色]
不同方向：border-top:[寬度] | [樣式] | [顏色] border-left border-right border-bottom
內邊距：padding。不可爲負。設置padding值會改變容器的長度。盒子在網頁中佔的控件，不單單與width和height屬性有關，還與padding有關。
內邊距屬性縮寫：
padding：值1;//四個方向都爲值1
padding：值1 值2//上下=值1 左右=值2
padding：值1 值2 值3//上=值1 左右=值2 下=值3
padding：值1 值2 值3 值4//上=值1 右=值2 下=值3 左=值4
margin：元素與元素之間的距離。
maigin-top:長度值|百分比|auto 值可爲負值。
- 默認情況下，相應HTML塊級元素存在外邊距 body h1-h6 p...
- 聲明margin屬性，覆蓋默認樣式
body,h1,h2,h3,h4,p{margin: 0}
margin值爲auto，實現水平方向居中顯示效果。
- 垂直方向，兩個相鄰元素都設置外邊距，外邊距會發生合併
- 合併後外邊距高度=兩個發生合併外邊距的高度中最大值。
width和height指的是內容區域的寬高。當我們增加了內邊距 邊框 外邊距不會影響內容區域尺寸，會影響整個盒子在網頁中所佔據中的尺寸。
display屬性:
inline：元素將顯示爲內聯元素，元素前後沒有換行符
block：元素將顯示爲塊級元素，元素前後有換行符
inline-block：行內塊元素，元素呈現爲inline，具有block相應特性。可以設置高寬padding margin值
none：此元素不會被顯示
- 相應內聯元素及使用display：inline設置成內聯元素的元素width和height屬性無效。水平方向margin-left/margin-right/padding-left/padding-right有效。垂直方向margin-top/margin-bottom/padding-top/padding-bottom無效。
- 塊級元素及使用display：block設置成塊級元素的元素width/height/margin/padding屬性都生效。
//鼠標經過超鏈接顯示span裏的內容
span{
display: none;
}
a:hover span{
display: block;/*inline*/
}
<a href="#">指我。。。<span>和你捉迷藏</span></a>