CSS基礎

1. CSS盒模型

1.1 認識盒模型

盒模型是CSS布局的最基本組成部分，它指定元素如何顯示及在某種方式上如何相互交互。頁面上的元素都是以一個矩形的表現形式存在的，每個矩形是由元素內容，內補丁（padding），邊框（border），外補丁（margin）組成的。內補丁（padding）無論有多大，元素內容（content）的整體大小(寬高)卻不會增大。那么內補丁（padding），邊框（border），外補丁（margin）之間的關系是什么呢？看下面我自己做的實例。
我先把內補丁（padding），邊框（border），外補丁（margin）這三個屬性值設為0px，不讓它們在盒模型中出現。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
    width: 200px;
    height: 30px;
    padding: 0px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>
</head>
<body>
<div>我是Adolph，</div>
<div>我喜歡前端，</div>
<div>我是一位前端小白。</div>
</body>
</html>

就會出現這樣的結果：

接下來我修改內補丁（padding）的屬性值，將其屬性值改為30px，將會出現什么效果呢？

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

會發現文字內容的空間增大，但是背景色還混在一起。那么也就理解了，如果給一個元素加背景色或背景圖片，那么添加的背景色或背景圖片也會出現在內補丁（padding）中。為了防止這種視覺上的混淆，我又改了邊框（border）的屬性值，改為邊框粗細為10px，邊框顏色為紅色的實線邊框。代碼如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：

這次能夠用紅色邊框分開元素內容，但是兩個div之間的邊框還是重合的。那我就用外邊框（margin）來改變效果，實現每個元素看起來獨立的效果。改變外邊框（margin）的屬性值，改為50px。代碼如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 50px;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：

通過以上的實驗過程，不難發現如果給任何一個元素加入背景色或背景圖片，都會在內補丁（padding）區域出現，為了避免這種視覺的混淆，就利用邊框（border）和外補丁（margin）對元素的周圍創建一個隔離帶，使用該元素的背景色或背景圖片可能與其他元素混淆。這就是內補丁（padding），邊框（border），外補丁（margin）這三個屬性出現在內容周圍，產生一個盒模型的基本作用。

2. CSS常見塊元素內聯元素其他可變元素

根據CSS規范的規定，每一個網頁都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它默認display屬性值為“block”，成為“塊級”元素；而span元素的默認display屬性值為“inline”，為“內聯”元素。
塊級元素會自動占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整這個矩形的樣子；內聯元素則沒有自己的獨立空間，它是依附其他塊級元素存在的，因此，對內聯元素設置高度、寬度、內外邊距等屬性，都是無效的。

常見塊元素：
- address – 地址
- blockquote – 塊引用
- center – 舉中對齊塊
- dir – 目錄列表
- div – 常用塊級容易，也是css layout的主要標簽
- dl – 定義列表
- fieldset – form控制組
- form – 交互表單
- h1 – 大標題
- h2 – 副標題
- h3 – 3級標題
- h4 – 4級標題
- h5 – 5級標題
- h6 – 6級標題
- hr – 水平分隔線
- isindex – input prompt
- menu – 菜單列表
- noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
- noscript – 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
- ol – 排序表單
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 非排序列表
常見內聯元素：
- a – 錨點
- abbr – 縮寫
- acronym – 首字
- b – 粗體(不推薦)
- bdo – bidi override
- big – 大字體
- br – 換行
- cite – 引用
- code – 計算機代碼(在引用源碼的時候需要)
- dfn – 定義字段
- em – 強調
- font – 字體設定(不推薦)
- i – 斜體
- img – 圖片
- input – 輸入框
- kbd – 定義鍵盤文
- label – 表格標簽
- q – 短引用
- s – 中劃線(不推薦)
- samp – 定義范例計算機代碼
- select – 項目選擇
- small – 小字體文本
- span – 常用內聯容器，定義文本內區塊
- strike – 中劃線
- strong – 粗體強調
- sub – 下標
- sup – 上標
- textarea – 多行文本輸入框
- tt – 電傳文本
- u – 下劃線
- var – 定義變量
其他可變元素：
- applet – java applet
- button – 按鈕
- del – 刪除文本
- iframe – inline frame
- ins – 插入的文本
- map – 圖片區塊(map)
- object – object對象
- script – 客戶端腳本

2.1 塊級元素和內聯元素的轉化

前面說過CSS規范的規定，每個網頁都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值。為了方便直觀的了解塊元素和內聯元素互相的轉化，我用簡單的代碼來實現效果。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 200px;
    height: 100px;
    border: 10px solid #9d0000;
}
.a{
    width: 500px;
    height: 500px;
    border: 5px solid #A770EF;
}
</style>
</head>
<body>
<div class="div">我是AOLPH,我喜歡前端很久了。</div>
<span class="a">我是AOLPH,我喜歡前端很久了。</span>
</html>

出現的效果如下：

接下來改變width和height，會發生什么？代碼和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 200px;
    border: 10px solid #9d0000;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
}
</style>

以上的實驗可以發現，塊級元素能夠改變寬高，而內聯元素不能改變寬高。那么怎么樣互相轉換呢？以下還是用代碼實現效果。代碼和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 100px;
    border: 10px solid #9d0000;
    display: block-inline;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
    display: inline-block;
}
</style>

效果如下:

3. 關于CSS Reset和Normalize.Css

對于CSS Reset應該說它很早就出現了，根據網上大牛的介紹第一份CSS Reset是Tantek的undohtml.css。然而它的出現是為了清除所有瀏覽器的默認樣式。它出現的原因也是由于早期的瀏覽器支持和理解的CSS規范不同，導致渲染頁面時效果不一致，會出現很多兼容性問題。所以Reset就很粗暴的改變了瀏覽器默認樣式。
Normalize.Css是Rest的替代品。我就運用一下大牛們的解釋：

Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS Reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。

對于我這個小白來說，我就是一點一點在大牛們的博客上了解CSS Reset和Normalize.CSS。關于CSS Reset和Normalize.CSS這里有大牛的博客，地址如下：https://segmentfault.com/a/1190000003021766

4.CSS選擇符

CSS的選擇符的分類：通配符，類選擇符，包含選擇符，子選擇符，相鄰選擇符，屬性選擇符，ID選擇符。

4.1 通配選擇符

通配選擇符其實就是一個星號，一般是用來對頁面所有元素應用樣式。實現代碼如下：

*{
    margin: 10px;
    padding: 10px;

}/*將頁面中所有內外補丁設置為10*/

在特殊情況下,通配符對特元素的所有后代元素應用樣式。例如，將頁面中strong標簽內span標簽的文字顏色改為紅色。代碼如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
strong *{
    color: #9d0000;
}/*將strong標簽內的span標簽顏色改為紅色*/
p{
    color: #A770EF;
}
</style>
<body>
<p>我是ADOLPHHAN,<strong><span>我喜歡網頁制作,</span></strong>我熱愛這個行業</p>
</body>

4.2 類選擇符

類指的就是將一段程序編寫成一個類，需要的時候就拿來調用，也可以重復調用。它的出現就可以在一個頁面中重復使用，減少樣式定義。在CSS中也一樣，可以將一段樣式定義為一個類，在需要的位置直接調用。實例代碼如下：

<style>
*{
    margin: 10px;
    padding: 10px;

}/*將頁面中所有內外補丁設置為10*/
strong *{
    color: #9d0000;
}/*將strong標簽內的span標簽顏色改為紅色*/
p{
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定義一個類*/
</style>

4.3 包含選擇符

包含選擇符又稱為后代選擇器，該選擇符類型是作用于某個元素中的子元素的。并且包含選擇符不只限用兩層標簽元素。下面我用實例證明，代碼和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
/*strong *{
    color: #9d0000;
}*//*將strong標簽內的span標簽顏色改為紅色*/
p strong span{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷體;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定義一個類*/
</style>

4.4 子選擇符

子選擇符也稱為子對象選擇符，主要定義子元素對象，無法定義子元素以外的對象。選擇符與選擇符之間是用“>”符號連接的，否則不算是選擇符。下面用實例證明，代碼和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
strong *{
    color: #9d0000;
}/*將strong標簽內的span標簽顏色改為紅色*/
body>strong{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷體;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定義一個類*/
</style>

4.5 相鄰選擇符

相鄰選擇符只是將">"換成了"+"，和子選擇符相似。但是它有著自己獨特的特性，和子選擇符又有著很大的不同。相鄰選擇符是定義父級以下某個元素之后的元素，并且相鄰選擇符定義的樣式只會是緊緊相鄰的兩個標簽元素。那么相鄰選擇符與子選擇符相似又有很大的不同在哪呢？我可以用實例證明，代碼和效果如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
strong+strong+strong{
    font-family: 宋體;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定義一個類*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我熱愛這個行業...<span>我喜歡網頁制作,</span></strong>我熱愛這個行業</p>
<strong>1、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
<strong>2、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
<strong>3、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
<strong>4、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
<strong>5、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
</body>

4.6 ID選擇符

ID選擇符是以"#"為前綴的，它與類選擇符類似。但是要注意，一個頁面中使用ID選擇符建議不要出現同名的ID，因為ID在JavaScript等腳本語言中運用較多，出現同名的ID容易導致JavaScript等腳本語言的判斷錯誤。
下面我用代碼實現效果：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
/*strong *{
    color: #9d0000;
}*//*將strong標簽內的span標簽顏色改為紅色*/
#contact{
    font-family: 宋體;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定義一個類*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我熱愛這個行業...<span>我喜歡網頁制作,</span></strong>我熱愛這個行業</p>
<strong id="contact">1、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
<strong>2、我是ADOLPHHAN,我喜歡網頁制作,我熱愛這個行業</strong>
</body>

4.7 選擇符的組合關系

選擇符的組合方式主要有針對性使用類選擇符或者ID選擇符，選擇符群組及選擇符組合這3種方式。
針對性使用類選擇符或者ID選擇符不用多說，前面已經很詳細。選擇符群組就是將多個相同定義的選擇符合并。下面我用代碼實現效果：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內外補丁設置為10*/
p,.class, #contact{
    font-family: 宋體;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
</style>

5.偽類與偽對象

5.1 偽類

偽類就是指定一個或者多個與其相關的選擇符的狀態，偽類的形式是：**選擇符：偽類{屬性：屬性值}。代碼和效果如下：

<style type="text/css">
input:hover{
    background-color: #9d0000;
}
</style>
<form method="post" action="">
<input type="text" value=""/> <input type="text" value=""/>
</form>

5.2 偽對象

偽對象是指HTML的文檔指定的信息之外，創建了文檔的額外信息。偽對象的形式為：選擇符：偽對象{屬性：屬性值}。代碼和效果如下：

<style>
p[id^='mycode']{
    color: red;
}
p[value='1']{
    color: green;
}
p[class='b']{
    color: blue;
}
.b:before{
    content:'我是一個兵，來自老百姓'
}
</style>
<body>
<p id="mycode111">代碼是一種工具，亦是思想的體現。</p>
<p value="1">越是在寫前對代碼的 整體結構 和 需求 越有清晰的認識，寫出的代碼越就是 可維護性高、更健壯。</p>
<p class="b">，發現粒子較多的時候CPU占用很高，</p>

6. CSS的單位和顏色

6.1 CSS單位

關于CSS單位,我從網上了解到，國內的設計師喜歡用PX，而國外的設計師通常用EM，那么PX和EM的區別在哪里：

PX特點
- IE無法調整那些使用px作為單位的字體大小；
- 國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；
- Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
- px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
- em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
- 任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

EM特點
- em的值并不是固定的；
- em會繼承父級元素的字體大小。
  所以我們在寫CSS的時候，需要注意兩點：
- body選擇器中聲明Font-size=62.5%；
- 將你的原來的px數值除以10，然后換上em作為單位；
- 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
- 也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

6.2 CSS顏色

CSS顏色大全：http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

可以用以下方法來規定 CSS 中的顏色：
- 十六進制色
- RGB 顏色
- RGBA 顏色
- HSL 顏色
- HSLA 顏色
- 預定義/跨瀏覽器顏色名
十六進制顏色
所有瀏覽器都支持十六進制顏色值。
十六進制顏色是這樣規定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規定了顏色的成分。所有值必須介于 0 與 FF 之間。
RGB 顏色
所有瀏覽器都支持 RGB 顏色值。
RGB 顏色值是這樣規定的：rgb(red, green, blue)。每個參數 (red、green 以及 blue) 定義顏色的強度，可以是介于 0 與 255 之間的整數，或者是百分比值（從 0% 到 100%）。
舉例說，rgb(0,0,255) 值顯示為藍色，這是因為 blue 參數被設置為最高值（255），而其他被設置為 0。
同樣地，下面的值定義了相同的顏色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

7. CSS布局

7.1 CSS相對定位

如果將元素框設置為相對定位，那么設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。
更為簡單的理解就比如對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。實現效果和代碼如下：

<style>
*{
  margin: 0px;padding: 0px;
}
.a{
  width: 200px;
  height: 200px;
  background-color: #9d0000;
  position:relative;
  top: 200px;
  left: 200px;
}
.b{
  width: 200px;
  height: 200px;
  background-color: #4cae4c;
}
</style>

7.2 CSS絕對定位

如果設置為絕對定位，那么設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。實現效果和代碼如下：

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
</style>

7.3 固定定位

設置為固定定位的效果和代碼如下:

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
.d{
    position:fixed;
    right:100px;
    bottom:100px;
    background:indigo;
    width:50px;
    height:50px;
}
</style>

固定定位可以隨著窗口的縮放移動：

8. C/S和B/S的區別

C/S結構就是最早使用客戶機和服務器的軟件系統體系結構。
B/S結構是隨著Internet技術的發展,對C/S結構的一種變化或者改進結構。它的用戶界面是通過WWW瀏覽器實現的，主要的事物邏輯在服務器端實現。B/S結構主要利用了發展的WWW瀏覽器技術,結合了瀏覽器的多種語言(JS、Server、JAVA、PHP、C++、Nodejs、C#）和ActiveX技術。
了解更多的區別，去看看大牛的博客：http://www.cnblogs.com/xiaoshuai/archive/2010/05/25/1743741.html

最后編輯于：2018.01.09 19:43:49

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,002評論 6贊 542
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,400評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,136評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,714評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,452評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,818評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,812評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,997評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,552評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,292評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,510評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,035評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,721評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,121評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,429評論 1贊 294
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,235評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,480評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS基礎

CSS基礎

1. CSS盒模型

1.1 認識盒模型

2. CSS常見塊元素內聯元素其他可變元素

2.1 塊級元素和內聯元素的轉化

3. 關于CSS Reset和Normalize.Css

4.CSS選擇符

4.1 通配選擇符

4.2 類選擇符

4.3 包含選擇符

4.4 子選擇符

4.5 相鄰選擇符

4.6 ID選擇符

4.7 選擇符的組合關系

5.偽類與偽對象

5.1 偽類

5.2 偽對象

6. CSS的單位和顏色

6.1 CSS單位

6.2 CSS顏色

7. CSS布局

7.1 CSS相對定位

7.2 CSS絕對定位

7.3 固定定位

8. C/S和B/S的區別

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS基礎

1. CSS盒模型

1.1 認識盒模型

2. CSS常見塊元素 內聯元素 其他可變元素

2.1 塊級元素和內聯元素的轉化

3. 關于CSS Reset和Normalize.Css

4.CSS選擇符

4.1 通配選擇符

4.2 類選擇符

4.3 包含選擇符

4.4 子選擇符

4.5 相鄰選擇符

4.6 ID選擇符

4.7 選擇符的組合關系

5.偽類與偽對象

5.1 偽類

5.2 偽對象

6. CSS的單位和顏色

6.1 CSS單位

6.2 CSS顏色

7. CSS布局

7.1 CSS相對定位

7.2 CSS絕對定位

7.3 固定定位

8. C/S和B/S的區別

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

2. CSS常見塊元素內聯元素其他可變元素