本文內容：什麼是CSS CSS寫在哪樣式（CSS怎麼寫）盒子模型尺寸樣式字體文本邊框背景圖片 display樣式邊距浮動佈局定位佈局首發日期：2018-04-04 什麼是css: css全名是層疊樣式表(Cascading Style Sheets) CSS的作用：給htm... ...

本文內容：

什麼是CSS
CSS寫在哪
樣式（CSS怎麼寫）
- 盒子模型
- 尺寸樣式
- 字體
- 文本
- 邊框
- 背景
- 圖片
- display樣式
- 邊距
- 浮動佈局
- 定位佈局

首發日期：2018-04-04

什麼是css:

css全名是層疊樣式表(Cascading Style Sheets)
CSS的作用：給html標簽添加“樣式”，樣式定義瞭如何顯示 HTML 元素

CSS寫在哪：

CSS與html息息相關，
- 1.可以寫在html的標簽的style中。
- 2.可以寫在head標簽的<script></script>中。
- 3.可以單獨寫在一個文件中（一般文件類型為css，稱為樣式表），然後通過<link>來導入。

css的創建：

寫在style中時：
寫在<head>的<style>:
寫在樣式表中：，導入

CSS的覆蓋與優先順序：

層疊就是對一個標簽多次設置同一個樣式，這使最終的樣式將使用最後一次設置的屬性值。【相同的值覆蓋，不同的值保留】
當有多個css的時候：
- html是從上到下執行的，所以CSS的優先順序和標簽的最終效果可以根據css的位置來判斷
  - 一般來說，標簽內部style屬性裡面的是最高的
  - 另外的，<link>獲取的和<style>的位置誰在下麵，誰優先順序就高（然而規則上始終應該讓link在style之前，因為style是自己寫的，即使已經導入樣式，還是可能有些樣式我們需要重寫）

這裡不討論CSS選擇器，如果想要瞭解，可以參考我的另外一篇博文，我已經劃分明瞭了，

http://www.cnblogs.com/progor/p/8495520.html

考慮排版問題，所以下麵的演示都是在style中寫css,對比其他兩種方式，主要是css選擇器的區別而已。

盒子模型：

盒子模型可以把每一個標簽都看作一個盒子，並且占據一定的頁面空間，而這個盒子是由內容、外邊距、內邊距、邊框四個屬性組成，並且內容的大小受width寬度、height高度影響。

尺寸樣式：

尺寸樣式只對塊級標簽生效，樣式包括寬度和高度。

height:高度
min-height:最小高度
max-height:最大高度
width:寬度
min-width:最小寬度
max-height:最大寬度

設置最大高度、寬度之後，那麼標簽會隨內容增多而變大，但最大就那麼大，如果再大，則會超出。
最小高度、寬度就是即使沒有內容，標簽也會有最小的顯示的高度、寬度，（當然無法改變塊級標簽的最小寬度咯）
預設情況下，如果內容過大，那麼三種設置的大小都會隨內容而增大，他們的主要區別在於：如果一起使用，那麼max-height這些能限制height的設置，如果設置超過最大值就會失效。min-height就是設置最小值。

字體：

字體樣式是指標簽的內容的字體的樣式。（諸如表格中的字體、段落中的字體。。。）

常見的字體樣式有：字體粗細、斜體、字體系列、字體大小、字體顏色

字體粗細：font-weight：值可以為關鍵字值或100-900的數值
- 關鍵字：bold較粗的（相當於700），lighter較細的，（正常的相當於400）
```
<div style="font-weight: 200;">200的粗細</div>
<div style="font-weight: bold;">bold的粗細</div>
```
是否斜體：font-style：值為"italic" 代表使用斜體；obilique也是傾斜，但主要用於沒有斜體屬性的字體

字體系列：font-family:值為各種字體，比如宋體，微軟雅黑；“為多個值時代表從左到右判斷到一個存在的字體就設置，如果不存在對應字體就繼續向右”

        <div style="font-family: '宋體';font-size: small;">宋體</div>
        <div style="font-family: '微軟雅黑';">微軟雅黑</div>
        <div style="font-family: '微軟雅黑C','宋體';">沒有微軟雅黑C,所以顯示宋體</div>

字體大小：font-size：值可為一些代表大小的關鍵字或px值

關鍵字：small（小字體），large(大號字體)

<div style="font-family: '微軟雅黑';font-size: small;">小號字體</div>
<div style="font-family: '微軟雅黑';font-size: 20px;">20px字體</div>

字體顏色：color：值為各種顏色（英文顏色字元串，RGB值，十六進位RGB顏色值）
- rgb值比如:rgb(250,250,250),顏色字元串比如blue,十六進位RGB顏色值比如#FFFFFF
```
<div style="color: purple;">紫色字體</div>
<div style="color: rgb(128,0,128);">紫色字體</div>
<div style="color: #800080;">紫色字體</div>
```

文本：

文本的樣式主要涉及多個文字之間的排版問題（以text打頭的樣式）

文本的常見樣式有劃線、大小寫、行高、字距、詞距、文本水平對齊方式、段落首行縮進、文本方向、文本內容溢出顯示

劃線：text-decoration:

underline：下劃線
line-through:刪除線

其他。。。

<div style="text-decoration: underline;">下劃線文本</div>
<div style="text-decoration: line-through;">刪除線文本</div>

行高：line-height:值為px值

<div style="line-height: 20px;background-color: red;">20px文字</div>
<div style="line-height: 40px;background-color: blue;">40px文字</div>

文本水平對齊方式：text-align:值可為left，center,right

<div style="text-align: right;">一段文字</div>
<div style="text-align: center;">一段文字</div>
<div style="text-align: left;">一段文字</div>

首行縮進：text-indent:值為px值

，也可以為%值，%為父標簽的%寬度

<p style="text-indent: 40px;">大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字大段文字
大段文字大段文字大段文字大段文字大段文字大段文字大段文字</p>

direction:文本方向，在一些版本不生效
- ltr：從左到右
- rtl:從右到左【所謂的從右到左，就是最後的文本始終在最右邊】

當文本內容超出標簽大小時怎麼顯示：overflow
- auto:使用滾動條顯示超出的內容
- hidden:隱藏，不顯示內容，忽略超出的內容
- 預設是超出大小來顯示內容，標簽大小被內容撐大了

補充：

text-shadow：給文本添加陰影效果,需要四個值(水平陰影的位置,垂直陰影的位置,[模糊的距離],[陰影的顏色])

邊框：

邊框樣式是對於能設置邊框的標簽的邊框的樣式。（div,img,table，span等）

邊框樣式主要有寬度，外觀，顏色，邊框

寬度：border-width:值為px值,或幾個關鍵字(thin細,thick粗)

<span style="border-style: solid;">實體線</span>
<span style="border-style: solid;border-width: 5px;">實體線</span>

外觀：border-style:值為幾個關鍵字

關鍵字:solid實線，dashed虛線，dotted點線，double雙線，ridge脊線，groove槽線

【可以有四個值，依次為“上右下左”的邊框外觀】

<span style="border-style: dashed;">虛線</span>
<span style="border-style: solid;">實體線</span>
<span style="border-style: dotted;">點線</span>
<span style="border-style: double;">雙線</span>
<span style="border-style: ridge;">脊線</span>
<span style="border-style: groove;">槽線</span>

顏色：border-color:值為各種顏色（英文顏色字元串，RGB值，十六進位RGB顏色值）
- 但註意，單純設置邊框顏色是無效的，因為預設沒有邊框
```
<span style="border-color: red;border-style: dotted;">紅線框</span>
<span style="border-color: red";>無邊框</span>
```

也可以設置一邊的邊框的樣式：border-XXXX-樣式,XXXX為bottom底部\left左邊\right右邊\top頂部，樣式為style,width,color

<span style="border-left-style: dotted;border-left-color: #008000;">單左邊框</span>
<span style="border-left-style: dotted;border-left-width: thick;">單左邊框</span>

border:可以統一設置上面的三個屬性

同樣的，也有border-XXXX來統一設置單邊邊框的三個屬性,XXXX為bottom底部\left左邊\right右邊\top頂部

<span style="border: dotted thin green;">border屬性</span> 
  <span style="border: dotted green;">border屬性</span> 
  <span style="border-right: dotted thin green;">border屬性</span>

補充：

border-radius:向 div 元素添加圓角邊框（圓框頭像的實現）

背景：

背景樣式主要包括背景圖像，背景顏色，背景圖像是否重覆、背景起始位置，背景透明度、

背景顏色background-color：設置標簽的背景顏色

背景圖片background-image:將圖片設置為背景,url()為圖片路徑，也可以為網頁路徑

<div style="background-image: url(123.gif);height: 65px;">背景圖片</div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 30px;">背景圖片</div>

背景圖像是否重覆background-repeat：設置背景圖像是否重覆及如何重覆，值可為no-repeat不重覆，repeat-x水平重覆，repeat-y垂直重覆

水平重覆

，不重覆

<div style="background-image: url(123.gif);height: 65px;background-repeat: no-repeat;">背景圖片</div>
<div style="background-image: url(123.gif);height: 65px;background-repeat: repeat-x;">背景圖片</div>

背景起始位置background-position(比如center就是顯示圖片的中間圖片，然後根據標簽的大小來顯示圖片)：值可以為px值，百分值，或一些關鍵字(top,center,bottom,left,right)

可以有兩個值，順序是x,y，也可以使用background-position-x\background-position-y來單獨設置水平\垂直方向的。

<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position:center;"></div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position:20px 20px;"></div>
<div style="background-image: url(https://www.baidu.com/img/baidu_jgylogo3.gif);height: 20px;width:20px;background-position-y: 20px;"></div>

背景透明度：opacity，值為0-1,0為完全透明

<div style="background-color: bisque;">透明度測試,無透明度</div>
<div style="background-color: bisque;opacity: 0.2;">透明度測試，0.2</div>
<div style="background-color: bisque;opacity: 0.5;">透明度測試，0.5</div>

補充：

background-position可以用來節省資源，只需要下載一張圖片，然後依靠background-position截取下自己想要的部分即可。比如從百度的圖片中截取出一個B

圖片：

圖片的樣式有圖片大小、圖片邊框、圖片對齊方式、圖片過大的顯示方式

圖片大小：
- width:值可以為px值，也可以為百分值
- height:值可以為px值，也可以為百分值
圖片邊框：參考上面的"邊框"
圖片水平對齊：text-align也對圖片對齊有效，可以參考上面的"文本"
圖片垂直對齊：vertical-align,值可以為關鍵字(top頂部對齊、middle中間對齊、bottom底端對齊，baseline對齊等待)或百分值
- middle:把此標簽放置在父標簽的中部。
- top:把標簽的頂端與行中最高標簽的頂端對齊
- 。。。
如果圖片過大，超過width,height如何顯示：overflow:
- auto:使用滾動條顯示
- hidden:超出大小的圖片內容忽略，只顯示可顯示的大小

display樣式：

display樣式可以改變標簽的“塊級或行內”，也可以使隱藏標簽

display:

inline:將塊級變成行內標簽
block：將行內標簽變成塊級標簽
inline-block:相容行內-塊級的屬性【比如div變成行內後，想給div標簽設置高度，就需要設置這個】
none:隱藏標簽【一些標簽是需要進行某些操作之後才顯示的，比如模態對話框，那麼可以在之前先設置為display:none】

邊距：

邊距樣式有內邊距和外邊距

外邊距就是元標簽與標簽的距離。
內邊距就是標簽內容與邊框的距離。

內邊距
- padding-bottom:下內邊距，值為px值或百分值
- padding-top:上內邊距，值為px值或百分值
- padding-left:左內邊距，值為px值或百分值
- padding-right:右內邊距，值為px值或百分值
- padding:邊距，可統一設置四個方向的邊距，值為px值或百分值
  - 只有一個值時，是統一設置四個方向的內邊距，比如padding: 5px相當於設置其他四個方向的邊距都為5px
  - 兩個參數時，第一個參數是上下內邊距，第二個參數是左右內邊距
  - 有四個值時，為依次設置“上右下左”（順時針）的內邊距

<span style="background-color: cornflowerblue;padding: 15px;">內容1</span>
<span style="background-color: cornflowerblue;padding: 15px;border: dashed;">內容1</span>
<span style="background-color: cornflowerblue;padding-left: 15px;border: dashed;">內容1</span>

外邊距
- margin-bottom：下外邊距，值為px值或百分值
- margin-left:左外邊距，值為px值或百分值
- margin-right:右外邊距，值為px值或百分值
- margin-top:上外邊距，值為px值或百分值
- margin:統一設置四個方向的外邊距
  - 只有一個值時，是統一設置四個方向的外邊距，比如margin: 5px相當於設置其他四個方向的外邊距都為5px
  - 兩個參數時，第一個參數是上下外邊距，第二個參數是左右外邊距
  - 四個參數時，分別為“上、右、下、左”（順時針）

<span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">內容1</span>
<span style="background-color: cornflowerblue;padding: 15px;margin-left:20px;border: dashed;">內容1</span>
<span style="background-color: cornflowerblue;padding: 15px;margin:10px;border: dashed;">內容1</span>        
<span style="background-color: cornflowerblue;padding: 15px;margin:5px 6px 7px 8px;border: dashed;">內容1</span>

補充：

使用auto值時會預設居中父元素，比如左右auto的話就會變成水平居中
使用auto參數問題:如果本身內容的大小不確定的話是無法auto的，（比如兩個標簽是float的時候，那麼此時內容的寬度是無法確定的）
- 例子：

浮動佈局：

談浮動佈局之前要談一下html標準文檔流，標準文檔流的標簽佈局從上到下，從左到右，依次排列，塊級標簽獨占一行。

而浮動佈局是“脫離”標準文檔流的，根據給定的屬性left\right來向父標簽貼靠（據說float設計初衷是做成圖片環繞）,

float：可以使標簽“漂浮”起來
- left:漂浮起來靠左
- right:漂浮起來靠右

由於初衷是圖片環繞，所以float的標簽的內容會影響其他標簽的文本顯示，而不是“漂浮起來後會掩蓋下麵的內容”，但可以掩蓋非內容部分（即使div是塊級的，沒有內容的時候依舊可以漂浮在上面）（重點），下麵是例子

效果演示：

將222漂浮向右後：

示例代碼：

<div style="background-color: coral;border:dashed black">
            
    <div style="background-color: blue;">111</div>
    <div style="background-color: chartreuse;float: right;top: 0px;">3333</div>
    <div style="background-color: blueviolet;">222</div>
    <div style="background-color: chartreuse;float: left;top: 0px;">33333</div>
    <div style="background-color: blueviolet;">222</div>
    <div style="background-color: blueviolet;">222</div>
            
</div>

補充：

任何標簽漂浮起來後，都會變成“塊級“的，不會占整行。
float會造成父標簽塌陷,我們知道的是一個標簽如果內容，是不會顯示出來的，而當子標簽都float的時候（假設父標簽沒有子標簽以外的內容），可以說子標簽已經脫離父標簽了，所以這時候父標簽相當於是沒有內容的。
- 解決方法一：在父標簽中增加一個div標簽，並且style屬性為"clear:both"即可
- 方法二：BFC法，這裡不解釋，想知道的可以百度。。。。
清除浮動：clear 屬性規定元素的哪一側不允許其他浮動元素。
- 加clear:both之前

html之CSS樣式學習筆記