. block(區塊)

block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。

(1)word-spacing：設置單詞之間的間距。可以設置負值。

默認值:normal

(2)letter-spacing：設置字符之間的間距。可以指定負值。因為中文也是字符, 這個參數可以設置文字間的間距。

默認值:normal

(3)vertical-align：指定元素的垂直對齊方式。針對<td>表格設置垂直對齊方法,但是對<div>設置無效,可以將display屬性設置為table-cell值;

可以指定sub(下標)、super(上標)、top(與頂端對齊)、middle(居中)、bottom(與底端對齊)等。適用于行內塊元素 img、input、td等

baseline 默認。元素放置在父元素的基線上。

sub 垂直對齊文本的下標。

super 垂直對齊文本的上標

top 把元素的頂端與行中最高元素的頂端對齊

text-top 把元素的頂端與父元素字體的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 把元素的頂端與行中最低的元素的頂端對齊。

text-bottom 把元素的底端與父元素字體的底端對齊。

% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit 規定應該從父元素繼承 vertical-align 屬性的值。

默認值: baseline

(4)text-align：設置文本的排列方式(適用于行內元素和行內塊元素, 如 a、span、input、img、label等元素)。left(左對齊)、right(右對齊)、center(居中)、justify(兩端對齊)。也可用于<hr/>下劃線對齊方式

默認值： 如果 direction 屬性是 ltr, 則默認值是 left；如果 direction 是 rtl，則為 right。(關于CSS direction 屬性看下面的內容介紹)

text-align 和margin auto 區別

text-align 可以讓塊級元素里面的文字內容居中對齊.

文字內容 == (圖片 input 行內元素 行內塊元素)

但是對于里面的塊級元素無效

讓一個塊級元素居中對齊 ： margin:0 auto;

(5)text-indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉, 主要給<p>設置首行。

要在每段前空兩格,可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。

默認值： not specified(沒有規定的)

p{font-size:12px;text-indent:2em;}

上述代碼就是可以實現段落首行縮進24px(也就是兩個字體大小的距離)。

(6)white-space：設置如何處理元素內的空白符。有三個選項可選：

normal 會將空白符全部壓縮；

pre 則會如同處理pre標簽內的文本一樣處理這些空白符,也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留；

nowrap 指定文本只有遇到br標簽時才換行。

默認值: normal

(7)display: none 此元素不會被顯示。

block 此元素將顯示為塊級元素，此元素前后會帶有換行符。

inline 默認值。此元素會被顯示為內聯元素，元素前后沒有換行符。

inline-block 行內塊元素。(CSS2.1 新增的值)

list-item 此元素會作為列表顯示。

run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。

table 此元素會作為塊級表格來顯示(類似 <table>)，表格前后帶有換行符。

inline-table 此元素會作為內聯表格來顯示(類似 <table>)，表格前后沒有換行符。

table-row-group 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。

table-header-group 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。

table-row 此元素會作為一個表格行顯示(類似 <tr>)。

table-column-group 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。

table-column 此元素會作為一個單元格列顯示(類似 <col>)

table-cell 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)

table-caption 此元素會作為一個表格標題顯示(類似 <caption>)

inherit 規定應該從父元素繼承 display 屬性的值。

默認值： inline

常用的屬性:

display:none; //隱藏
display:block //顯示(將行內元素轉換為塊元素)
dispaly:inline //將塊元素轉換行內元素
dispaly:inline-block //將塊元素轉換為行內塊元素
display:table-cell; //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) 用于多行文本、塊元素垂直居中

以上轉換涉及行內塊元素(img、input)轉換;

經過大量的測試證明：屬性display是不能用于轉換行內塊元素(img、input)

同義詞: 內聯元素(行內元素)

4. box(方框或盒子) 主要針對圖片、表格、層、段落(p)、標題(h1-h6)等

box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。

(1)width：定義元素的寬。

默認值:auto

(2)height：定義元素的高。

默認值:auto

以上width、height屬性如果是針對div標簽設置css樣式，則與定位設置窗口width、height屬性一致(Dreamweaver會自動填充數據)

在父元素和子元素都設置了高度和寬度的情況下：

如果子元素的寬度超出了它的父元素的寬度, 則會父元素不會限制其顯示寬度;

如果子元素的高度超出了它的父元素的高度, 則會父元素不會限制其顯示高度;

(3)float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。

默認值:none

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了。無論它原來是個div還是個span。

span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}

(4)clear：不允許元素的漂浮，相對于前一個<div>設置浮動時，下一個有清除設置的元素就會移到它的下面。

left表示不允許左邊有浮動對象 right表示不允許右邊有浮動對象

none 表示允許兩邊都可以有浮動對象 both 不允許有浮動對象。

默認值:none

浮動的主要作用是將塊元素排在同一行(span也可以設置浮動);

浮動元素它會向左或者向右進行浮動, 所謂浮動可以理解"飄";

浮動元素向它遇到父元素的邊框就停止浮動;

浮動元素的層級會比普通元素要高, 并且它不會再占用原有的高度;

浮動元素只會影響后面的元素, 不會影響前面的元素：

浮動元素的后面的元素(可能是一個也可能是多個元素受到影響)也會繼承浮動元素的特性, 它也會浮動了要解決這個問題有兩辦法;

第一個：需要清除浮動

第二個：給父元素設置一個高度(子元素都設置了height高度條件下), 不建議使用

清除浮動后它不會影響到它后面的元素, 父元素會將所有的浮動元素包圍者

當然浮動元素對后面的元素的影響可以做首字母方法, 圖文混排(文字環繞圖片)等特效；

(5)padding：定義元素內容與其邊框的空距(如果元素沒有邊框就是指頁邊的空白)。

可以分別設置分別設置上、右、下、左內邊距。

padding-top

padding-right

padding-bottom

padding-left

p {padding:20px} 設置設置上、右、下、左內邊距都為20px

p {margin: 20px 30px 30px 20px;} 設置padding-top padding-right padding-bottom padding-left分別為20px 30px 30px 20px

默認值：0。

要懂得, 用小屬性層疊大屬性：

padding: 20px;

padding-left: 30px;

注意：大屬性要寫在前面, 小屬性寫在后面;

比如：

div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}

padding-left:10px和padding-right:20px沒用, 因為后面的padding大屬性, 層疊覆蓋了。

(6)margin：定義元素的邊框與其他元素之間的距離(如果沒有邊框就是指內容之間的距離)。

可以分別設置上邊界、右邊界、下邊界、左邊界的值。

margin-top

margin-right

margin-bottom

margin-left

p {margin:20px}

p {margin:10px 0px 15px 5px;}

默認值：0

marign：上邊界值 右邊界值 下邊界值 左邊界值

margin屬性值必須按照上面順序進行排列,以空格分開。如果僅輸入一個值,則4個邊界值會同時設置為此值。

如果僅輸入兩個的值,則缺少的值會以對邊的設置值進行替代。例如：

div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/

5. border(邊框) 針對段落(p標簽)、圖片、表格、標題(h1-h6)、form、input等(幾乎所有的元素都可以設置邊框)

border面板可以設置對象邊框的寬度、顏色及樣式。

(1)border-width：設置元素邊的寬度。可以分別設定top(上邊寬)、right(右邊寬)、bottom(下邊寬)、left(左邊寬)的值。

border-top-width border-right-width border-bottom-width border-left-width

thin 定義細的邊框。

medium 默認。定義中等的邊框。

thick 定義粗的邊框。

length 允許您自定義邊框的寬度。

inherit 規定應該從父元素繼承邊框寬度。

默認值: medium

(2)border-color：設置邊框的顏色。你可以分別對每條邊設置顏色。

注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。

border-top-color border-right-color border-bottom-color border-left-color

默認值: not specified(未規定的)

(3)border-style：設置邊框樣式。

border-top-style border-right-style border-bottom-style border-left-style

可以設置為none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、

groove(凹槽,3D凹線)、ridge(凸槽,3D凸線)、inset(凹邊,3D嵌入線)、outset(凸邊,3D浮出線)等邊框樣式。

默認值:none(無邊框)

推薦：表單輸入框：inset(凹邊) 按鈕：outset(凸邊)

兼容性問題

比如, border:10px ridge red; 在chrome和firefox、IE中有細微差別：

如果公司里面的設計師, 處女座的, 追求極高的頁面還原度, 那么不能使用css來制作邊框。

就要用到圖片, 就要切圖了。所以, 比較穩定的就幾個：solid、dashed、dotted, 其他的邊框樣式盡量不要用。

border可以沒有： border: none;

某一條邊沒有： border-left: none;

也可以調整左邊邊框的寬度為0px： border-left-width: 0px;

注意：border-bottom-style：可以修改a鏈接的"下劃線"的風格

border-bottom-width：可以修改a鏈接的"下劃線"的寬度(粗細)

border-bottom-color：可以修改a鏈接的"下劃線"的顏色

置邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規的方法了，今天再來說說其他兩種方法，

1. outline方式
2. background方式

outline方法

這也算是一種比較常規的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點區別的，同時對比下：

border: 1px dashed #333;
outline: 1px solid;

外部實線是outline，內部虛線是border，為了一致，可以設置outline-offset往內縮一點：

outline-offset: -1px;

background方法

這是本文的重點，我也是剛get到此項技能，之前一直不知道background居然如此強大，直接上代碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這里我們只設置了上面看，而且還是虛線的，做一說明這種方式的強大，再把其他邊框補上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可見，使用background非常的靈活，邊框的位置可以任意調整。

現在我們已經掌握這幾方式，但本文的重點是上面這種，我們現在來動手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滾動虛線邊框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滾動漸變

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是設置邊框的幾個小技巧。

參考：
https://www.cnblogs.com/coco1s/p/14291567.html