. 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鏈接的"下劃線"的顏色

為一個“小編”，每天碼字是基礎工作。然而，在查找資料的時候，總會時不時遇到不能復制文字，或者需要充值VIP才能復制文字的情況。

甚至，一些文字直接就是PDF圖片模式，根本沒有復制選項。

遇到這樣的問題，一般只能是無奈的逐字手打出來，或者乖乖的掏腰包充值VIP。

在遇到了N次類似的情況之后，小編終于決定想想辦法，看能否繞開這些文檔的限制，直接復制文字。

沒想到，方法不僅有，而且很多。

今天，就給大家羅列一下網友們總結出的完美規避充值VIP，直接復制文字的方法。

方法一，圖片轉文字。

現在，圖片轉文字的PC工具不要太多，一搜一大把，連手機相機都可以做到，截圖、拍照均可識別，簡單快捷，而且正確率非常高。

方法二，另存網頁。

在需要復制文字的網頁，點擊右鍵，“”網頁另存為”到桌面。然后雙擊打開網頁即可復制文字內容。

方法三，打印預覽。

在需要復制文字的網頁，點擊右鍵，然后選擇“打印”，在打印預覽界面即可復制文字內容。

方法四，控制臺操作。

在需要復制文字的網頁按下F12，或者點擊鼠標右鍵，打開審查元素。

然后按F1，找到Debugger，點擊第一個選項Disable JavaScript前的方框，即可開始復制文字內容。

除此之外，還有諸如切換IE內核、源代碼復制等方法亦可規模充值vip才能復制文字的限制，不過相較于前文這四種方法，操作過于繁瑣，想想還是算了。

當然，以上僅限于小編這種摳門用戶，如果你是土豪，直接氪金，那就是另外一種舒爽的體驗了~

印網頁資料，被禁用了右鍵不讓復制，這個方法可以簡單的幫我們解決。

今天來了一位客戶，想打印一些資料，內容是來自某個網站上的一些文字，當我去復制的時候，才發現不讓復制，被禁用了鼠標右鍵，無論你怎么點都沒反應，整個頁面像是一幅圖片，于是搜索各種解除辦法，但都是比較繁瑣的一些招數，看的頭暈眼花，有的還要讓你下載插件安裝，這些都不能快速解決，不是我想要的方法，弄了好一會，終于找到了有效還簡單的方法，現在分享出來，讓有需要的人不在走彎路，節省時間，收藏一下以備不時之需要。

首頁用瀏覽器打開不讓復制的頁面，這里可以用普通瀏覽器或是某60瀏覽器，打開頁面后，我們要按一下鍵盤上的F12，這時候就會在當前網頁右邊跳出一個小頁面，點一下上面的小齒輪，一般我們把它稱做“設置”

進入小齒輪后，默認是第一個分類，我們要滑動鼠標輪，往下走到最底部，找到調試程序下面的第一個選項，停用JavaScript，給前面的方框打上對溝，這個時候不要關閉這個小頁面， 要是關閉了就失效了，也就是從頭要再來一次。

這個時候你再去復制網頁上的內容，看看是不是可以復制了。

說到這里，我還找到了一個更簡單的辦法，這個方法也給大家分享出來，希望有更多的人知道和學會。

在不讓復制的頁面，我們直接按下鍵盤上的ctrl+p，試試效果，是不是非常輕松的就解決了不讓復制的問題，這個辦法更簡單，更快捷，還可以直接打印，也可以把內容復制出來。

尋找方法不容易，喜歡的就收藏一下，您的支持就是我的動力。