css樣式

• checkbox 設定width和height設定：auto;恢復初始狀態。

• text-indent縮排

該屬性是用於“行內元素”設定每個段落首行縮排數量值的屬性，
CSS字型大小（font-size）可以設定的數值和單位在該屬性的值中都可以使用（除了百分比）。
如果是用於中文佈局，一般會使用“2em”的數值和單位來為每個段落的首行縮排“兩個字元”。

 p{
    text-indent: 2em;
    }
    預設的是pb標籤的大小，預設狀態的rem也可以。

• 文字裝飾線“text-decoration”
  該屬性是為文字上新增一根裝飾線，帶"href"屬性的標籤預設會帶有一根下劃線，就是由該屬性的值“underline”設定的。

“text-decoration”屬性有以下值：

none（預設）不顯示任何裝飾線

underline 在文字下方顯示裝飾線

overline 在文字上方顯示裝飾線

line-through在文字中間顯示裝飾線，相當於刪除線

• 英文字母大小寫轉“text-transform”

該屬效能將“行內元素”中的英文文字進行大小寫轉換，以滿足網站對規範性的要求。

該屬性有以下屬性值：

1. none（預設）保持文字中英文單詞的預設大小寫
   

2. capitalize將每個英文單詞首字母為大寫字母（不論原本是大寫還是小寫），其它為小寫字母（大駝峰寫法）
    
   

3. uppercase將所有英文單詞轉換為大寫字母
   

4. lowercase將所有英文單詞轉換為小寫字母
   

• 文字的陰影“text-shadow”

該屬性的作用是給文字新增陰影效果。

該屬性有4個值，具體如下：

1.   水平方向陰影偏移（h-shadow）
   

“0”表示維持原位，正數為向右偏移，負數為向左偏移。單位為畫素“px”。

2. 垂直方向陰影偏移（v-shadow）
   

“0”表示維持原位，正數為向上偏移，負數為向下偏移。單位為畫素“px”。

3.  陰影模糊距離（blur）
   

用正數表示陰影模糊的單位距離，距離越大模糊程度越高，單位為畫素“px”。

4.  陰影的顏色（color）
   

支援Web技術中的常用顏色模式：“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。
和“行內塊元素”和“塊元素”所用的“box-shadow”（以後會學習）有所不同，文字陰影的屬性值裡沒有“inset”（設定為內陰影）和“spread”（陰影的擴充套件，單位畫素“px”），以後在使用中需要加以區分。

• 段落文字行高“line-height”

該屬性是用於設定“行內元素”中文字元素在一行中所佔據的高度，（可實現單行文字垂直居中的效果）
使用場景如：表格、導航按鈕、自定義樣式按鈕、標題欄等。

• 單詞的間距“word-spacing”

該屬性用於設定英文單詞之間的間距。
注意
他區分單詞時是按照單詞兩邊是否含有空格來判斷的，所有如果你的內容是中文，

1.當你的文字間沒有空格時，整體就會被當做一個單詞。

2.當你的每個漢字兩邊都有空格時，每個漢字才會被當做是一個單詞。
3.其值可以為負數，距離會減小

• 字元的間距“letter-spacing
  

和“word-spacing”有所不同，該屬性是用於控制字元間的間距。

一個字母，一個漢字，甚至一個空格都是一個字元。

注意：
1.在html中，多個空格最終會變為一個空格的。
2.其值可以為負數，距離會減小

• 空格換行處理“white-space”
  

該屬性設定如何處理元素內的空格符和換行符，它主要有以下值

1. normal（預設）由瀏覽器處理空格和換行

2. pre段落裡所有的空格符和換行符都會被保留（類似於<pre>標籤）

3. nowrap段落內的文字不會換行（類似於沒有設定過換行的“notepad”）

4. pre-wrap段落裡所有的空格符序列和換行符序列都會被保留，這點類似於pre

5.但是他不會去更改瀏覽器的預設行為（當內容的寬度小於了窗體的寬度時會出現滾動條的行為）

6. pre-line保留換行符，但是多個空格還是會按照瀏覽器的預設行為處理（多個合併為一個）

注意：
如果你當前的內容是無空格分隔的一連串的英文，那麼他會被瀏覽器當作是一個單詞，不會讓他換行，只會出現水平滾動條去適應他。

• 設定文字方向“direction”

ltr 預設值,文字方向從左到右
rtl 文字方向從右向左

•  設定文字溢位時的處理“overflow
  

  overflow : hidden,scroll,auto

•  文字的裁切“text-overflow”
  

• clip裁剪文字（從屬性意義不大，通過overflow：hidden可實現此效果）

• ellipsis顯示省略符號來代表被裁剪的文字，不過該屬性不能單獨使用，必須要配合“white-space”和“overflow”來使用

舉例
div {
width: 5rem;
height: 5rem;
border: 0.1rem solid red;

white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}

盒子模型

一個盒子是由四個部分組成

1. “內容–content”（盒子內的物件）、
2. “內間距–padding”（物件和盒子的距離）、
3. “邊框–border”（盒子壁）、
4. 外間距–margin”（盒子和其它物體的距離）

IE瀏覽器盒子模型：
“width”和“height == content
標準的盒子模型：
“width”和“height”== conent、padding和border；

我們在實際的開發工作中，都是將標準的盒子模型轉換為IE的盒子模型。轉換方式如下：

是將CSS的樣式屬性“box-sizing”的值設為“border-box”。

盒子寬度，盒子高度，內間距，邊框，外邊距

基本含義:

•  padding/margin設定
  

四個方向單獨進行控制

div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
組合值控制
div {
margin: 1rem;
padding: 1rem;
}

組合值控制

div {
margin: 1rem;
padding: 1rem;
}

當為組合值時的含義：

一個值: 上右下左同時設定
兩個值：上下，左右
三個值：上，左右，下
四個值：上右下左分別設定

• Border設定
  

邊框的三大屬性

邊框的三大屬性

1. border-width 設定邊框的寬度。
2. border-style 設定邊框的型別，主要有以下可以設定的值
3. border-color 設定邊框的顏色.

單獨設定各屬性（所有方向）

div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}

只設置某個方向上的border，單獨控制

div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}

邊框可選型別如下：

• none，無邊框
• solid，實現邊框
• dotted，點線邊框
• dashed，虛線邊框
• double，雙線邊框
• groove，3D凹槽邊框
• ridge，3D凸槽邊框
• inset，內浮雕邊框
• outset，外浮雕邊框

組合值

用組合值設定各屬性（所有方向）
div {
  border: 0.05rem red solid; 
}

 各個屬性的位置可以調整改變

只設置某個方向上的border，組合值控制

div {
  border-right:1rem solid red;
}

• 圓角的盒子“border-radius”
  

給每個角進行設定圓角

div {
   border-top-left-radius: 5px;
   border-bottom-right-radius: 10px;
}

給所有角進行設定圓角

div {
border-radius: 5px;
}

• 元素的輪廓“outline”

outline的分支屬性

1. outline-width 設定輪廓線的寬度
2. outline-style 設定輪廓線的樣式
3. outline-color 設定輪廓線的顏色
4. outline-offset設定輪廓線相對元素邊框的距離

div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 組合值寫法 */
outline-offset: 20px; /* 這個值只能單獨寫 */

div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 組合值寫法 */
outline-offset: 20px; /* 這個值只能單獨寫 */

• 可調整元素大小的“resize”
  

(1)預設情況textarea能夠進行元素標籤大小的調整

(2)resize的使用

resize這個屬性就是用來專門定義這種大小調整的行為的，使用方式如下：

1)resize應該配合overflow這個css屬性進行使用,
然後overflow值一般為下者之一即可：hidden/auto/scroll

2)resize應該使用到塊級元素與行內塊元素上。【通過display屬性修改的也算】

3)resize主要有三個值
①　允許垂直改變大小：vertical
②　允許水平改變大小：horizontal
③　允許垂直水平同時改變大小：both

4)resize屬性在大部分ie系列裡面的瀏覽器中都是無效的。

resize使用示例
div {
/* 設定div的大小和邊框 */
border: 0.1rem solid red;
width: 3rem;
height: 3rem;
/* 設定以下樣式，讓此元素大小可變 */
resize:both;
overflow:hidden;

5)<textarea>預設能夠改變大小，就是預設設定了值為both,如果我們想讓他只能水平改變大小或者垂直改變大小，或者不能改變大小，我們直接使用設定相應的resize值就可以了，並且無需顯示的去設定“overflow”屬性。

• 元素的陰影“box-shadow”
  

基本值
h-skewing（必要）
陰影在水平方向的偏移，負數是向左偏移，正數是向右偏移，單位為“px”。
v-skewing（必要）
陰影在垂直方向的偏移，負數是向上偏移，正數是向下偏移，單位為“px”。
blur（可選）
陰影的“模糊距離”或“模糊程度”，單位為“px”。
color（可選）
陰影的顏色，支援Web技術中的常用顏色模式：“顏色英文單詞”、“HEX”、“RGBa”、“HSLa”。

和文字陰影的不同（多了兩個值）
inset（可選）
將預設向外的陰影方向改為向內，然後inset一般是放在陰影顏色的後面。

spread（可選）
陰影的擴充套件範圍,值為數值，其單位可以使用常用單位。rem,em,px.
它應該放在陰影顏色的前面

給某個元素設定margin-top時，如果他上方元素含有“margin-bottom”，則這兩個值會重疊，並且取較大值作為間距值。如果為水平方向都設定margin則相加。