• 邊框樣式
  邊框樣式屬性指定要顯示什么樣的邊界。
  border-style屬性用來(lái)定義邊框的樣式

border-style 值:
none: 默認(rèn)無(wú)邊框
dotted: dotted:定義一個(gè)點(diǎn)線邊框
dashed: 定義一個(gè)虛線邊框
solid: 定義實(shí)線邊框
double: 定義兩個(gè)邊框。 兩個(gè)邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge: 定義3D脊邊框。效果取決于邊框的顏色值
inset:定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個(gè)3D突出邊框。 效果取決于邊框的顏色值

• 邊框?qū)挾?br> 您可以通過(guò) border-width 屬性為邊框指定寬度。
  為邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thick 、medium（默認(rèn)值） 和 thin。

• 邊框顏色
  border-color屬性用于設(shè)置邊框的顏色?？梢栽O(shè)置的顏色：
  name - 指定顏色的名稱，如 "red"
  RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  Hex - 指定16進(jìn)制值, 如 "#ff0000"
  您還可以設(shè)置邊框的顏色為"transparent"。
  注意： border-color單獨(dú)使用是不起作用的，必須得先使用border-style來(lái)設(shè)置邊框樣式。

• 邊框-單獨(dú)設(shè)置各邊
  在CSS中，可以指定不同的側(cè)面不同的邊框：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
    border-bottom-color: red;
}

• 邊框-簡(jiǎn)寫(xiě)屬性
  上面的例子用了很多屬性來(lái)設(shè)置邊框。
  T你也可以在一個(gè)屬性中設(shè)置邊框。
  你可以在"border"屬性中設(shè)置：
  border-width
  border-style (required)
  border-color

border:5px solid red;

2.CSS 輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度。

• outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性

p 
{
    border:1px solid red;
    outline:green dotted thick;
}

• outline-color 設(shè)置輪廓的顏色
• outline-style 設(shè)置輪廓的樣式
• outline-width 設(shè)置輪廓的寬度

p.one
{
    border:1px solid red;
    outline-style:solid;
    outline-width:thin;
}

3.CSS Margin(外邊距)
CSS Margin(外邊距)屬性定義元素周圍的空間。
margin沒(méi)有背景顏色，是完全透明的
margin可以單獨(dú)改變?cè)氐纳?，下，左，右邊距。也可以一次改變所有的屬性?br> Margin可以使用負(fù)值，重疊的內(nèi)容。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

4.CSS Padding（填充）
CSS Padding（填充）屬性定義元素邊框與元素內(nèi)容之間的空間。
當(dāng)元素的 Padding（填充）（內(nèi)邊距）被清除時(shí)，所"釋放"的區(qū)域?qū)?huì)受到元素背景顏色的填充。
單獨(dú)使用填充屬性可以改變上下左右的填充?？s寫(xiě)填充屬性也可以使用，一旦改變一切都改變。

p.ex1 {padding:2cm;}
p.padding {padding-bottom:2cm;}

5.所有CSS 尺寸屬性
height 設(shè)置元素的高度。
line-height 設(shè)置行高。
max-height 設(shè)置元素的最大高度。
max-width 設(shè)置元素的最大寬度。
min-height 設(shè)置元素的最小高度。
min-width 設(shè)置元素的最小寬度。
width 設(shè)置元素的寬度。

6.CSS Display(顯示) 與 Visibility（可見(jiàn)性）
display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏。

• 隱藏元素 - display:none或visibility:hidden
  隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。但是請(qǐng)注意，這兩種方法會(huì)產(chǎn)生不同的結(jié)果。
  visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了，但仍然會(huì)影響布局。
  display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。

• CSS Display - 塊和內(nèi)聯(lián)元素
  塊元素是一個(gè)元素，占用了全部寬度，在前后都是換行符。
  塊元素的例子：
  <h1>
  <p>
  <div>
  內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。
  內(nèi)聯(lián)元素的例子：
  <span>
  <a>
  如何改變一個(gè)元素顯示
  可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁(yè)面看起來(lái)是以一種特定的方式組合，并仍然遵循web標(biāo)準(zhǔn)。
  下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素：

li {display:inline;}

下面的示例把span元素作為塊元素：

span {display:block;}

注意：變更元素的顯示類型看該元素是如何顯示，它是什么樣的元素。例如：一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素。