CSS基礎(chǔ)

1. CSS盒模型

1.1 認(rèn)識盒模型

盒模型是CSS布局的最基本組成部分比默，它指定元素如何顯示及在某種方式上如何相互交互。頁面上的元素都是以一個矩形的表現(xiàn)形式存在的棕诵，每個矩形是由元素內(nèi)容纪蜒，內(nèi)補丁（padding）扰付，邊框（border）堤撵，外補丁（margin）組成的羽莺。內(nèi)補读６健（padding）無論有多大，元素內(nèi)容（content）的整體大小(寬高)卻不會增大禽翼。那么內(nèi)補锻篱稀（padding）族跛，邊框（border），外補度袂健（margin）之間的關(guān)系是什么呢礁哄？看下面我自己做的實例。
我先把內(nèi)補断薄（padding）桐绒，邊框（border），外補吨Α（margin）這三個屬性值設(shè)為0px茉继，不讓它們在盒模型中出現(xiàn)。代碼如下：

<!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>

就會出現(xiàn)這樣的結(jié)果：

接下來我修改內(nèi)補丁（padding）的屬性值吉挣，將其屬性值改為30px派撕，將會出現(xiàn)什么效果呢？

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

會發(fā)現(xiàn)文字內(nèi)容的空間增大睬魂，但是背景色還混在一起终吼。那么也就理解了，如果給一個元素加背景色或背景圖片氯哮，那么添加的背景色或背景圖片也會出現(xiàn)在內(nèi)補都使颉（padding）中。為了防止這種視覺上的混淆喉钢，我又改了邊框（border）的屬性值垫卤，改為邊框粗細(xì)為10px，邊框顏色為紅色的實線邊框出牧。代碼如下：

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

效果如下：

這次能夠用紅色邊框分開元素內(nèi)容穴肘，但是兩個div之間的邊框還是重合的。那我就用外邊框（margin）來改變效果舔痕，實現(xiàn)每個元素看起來獨立的效果评抚。改變外邊框（margin）的屬性值，改為50px伯复。代碼如下：

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

效果如下：

通過以上的實驗過程慨代，不難發(fā)現(xiàn)如果給任何一個元素加入背景色或背景圖片，都會在內(nèi)補缎ト纭（padding）區(qū)域出現(xiàn)侍匙，為了避免這種視覺的混淆，就利用邊框（border）和外補抖ｖā（margin）對元素的周圍創(chuàng)建一個隔離帶想暗，使用該元素的背景色或背景圖片可能與其他元素混淆妇汗。這就是內(nèi)補丁（padding）说莫，邊框（border）杨箭，外補丁（margin）這三個屬性出現(xiàn)在內(nèi)容周圍储狭，產(chǎn)生一個盒模型的基本作用互婿。

2. CSS常見塊元素內(nèi)聯(lián)元素其他可變元素

根據(jù)CSS規(guī)范的規(guī)定，每一個網(wǎng)頁都有一個display屬性辽狈，用于確定該元素的類型慈参，每一個元素都有默認(rèn)的display屬性值，比如div元素刮萌，它默認(rèn)display屬性值為“block”驮配，成為“塊級”元素；而span元素的默認(rèn)display屬性值為“inline”尊勿，為“內(nèi)聯(lián)”元素。
塊級元素會自動占據(jù)一定矩形空間畜侦，可以通過設(shè)置高度元扔、寬度、內(nèi)外邊距等屬性旋膳，來調(diào)整這個矩形的樣子澎语；內(nèi)聯(lián)元素則沒有自己的獨立空間，它是依附其他塊級元素存在的验懊，因此擅羞，對內(nèi)聯(lián)元素設(shè)置高度、寬度义图、內(nèi)外邊距等屬性减俏，都是無效的。

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

2.1 塊級元素和內(nèi)聯(lián)元素的轉(zhuǎn)化

前面說過CSS規(guī)范的規(guī)定怕篷，每個網(wǎng)頁都有一個display屬性历筝，用于確定該元素的類型，每一個元素都有默認(rèn)的display屬性值廊谓。為了方便直觀的了解塊元素和內(nèi)聯(lián)元素互相的轉(zhuǎn)化梳猪，我用簡單的代碼來實現(xiàn)效果。代碼如下：

<!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>

出現(xiàn)的效果如下：

接下來改變width和height呛哟，會發(fā)生什么？代碼和效果如下：

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

以上的實驗可以發(fā)現(xiàn)惕稻，塊級元素能夠改變寬高竖共，而內(nèi)聯(lián)元素不能改變寬高。那么怎么樣互相轉(zhuǎn)換呢俺祠？以下還是用代碼實現(xiàn)效果公给。代碼和效果如下：

<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. 關(guān)于CSS Reset和Normalize.Css

對于CSS Reset應(yīng)該說它很早就出現(xiàn)了，根據(jù)網(wǎng)上大牛的介紹第一份CSS Reset是Tantek的undohtml.css蜘渣。然而它的出現(xiàn)是為了清除所有瀏覽器的默認(rèn)樣式淌铐。它出現(xiàn)的原因也是由于早期的瀏覽器支持和理解的CSS規(guī)范不同，導(dǎo)致渲染頁面時效果不一致蔫缸，會出現(xiàn)很多兼容性問題腿准。所以Reset就很粗暴的改變了瀏覽器默認(rèn)樣式。
Normalize.Css是Rest的替代品拾碌。我就運用一下大牛們的解釋：

Normalize.css 只是一個很小的CSS文件吐葱，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS Reset校翔，Normalize.css是一種現(xiàn)代的弟跑、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap防症、HTML5 Boilerplate孟辑、GOV.UK、Rdio蔫敲、CSS Tricks 以及許許多多其他框架饲嗽、工具和網(wǎng)站上。

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

4.CSS選擇符

CSS的選擇符的分類：通配符裙犹，類選擇符酝惧，包含選擇符，子選擇符伯诬，相鄰選擇符晚唇，屬性選擇符，ID選擇符盗似。

4.1 通配選擇符

通配選擇符其實就是一個星號哩陕，一般是用來對頁面所有元素應(yīng)用樣式。實現(xiàn)代碼如下：

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

}/*將頁面中所有內(nèi)外補丁設(shè)置為10*/

在特殊情況下,通配符對特元素的所有后代元素應(yīng)用樣式。例如悍及，將頁面中strong標(biāo)簽內(nèi)span標(biāo)簽的文字顏色改為紅色闽瓢。代碼如下：

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

4.2 類選擇符

類指的就是將一段程序編寫成一個類，需要的時候就拿來調(diào)用心赶，也可以重復(fù)調(diào)用扣讼。它的出現(xiàn)就可以在一個頁面中重復(fù)使用，減少樣式定義缨叫。在CSS中也一樣椭符，可以將一段樣式定義為一個類，在需要的位置直接調(diào)用耻姥。實例代碼如下：

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

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

4.3 包含選擇符

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

<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內(nèi)外補丁設(shè)置為10*/
/*strong *{
    color: #9d0000;
}*//*將strong標(biāo)簽內(nèi)的span標(biāo)簽顏色改為紅色*/
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;
}/*將頁面中所有內(nèi)外補丁設(shè)置為10*/
strong *{
    color: #9d0000;
}/*將strong標(biāo)簽內(nèi)的span標(biāo)簽顏色改為紅色*/
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 相鄰選擇符

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內(nèi)外補丁設(shè)置為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>我熱愛這個行業(yè)...<span>我喜歡網(wǎng)頁制作,</span></strong>我熱愛這個行業(yè)</p>
<strong>1、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
<strong>2汤求、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
<strong>3俏险、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
<strong>4、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
<strong>5扬绪、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
</body>

4.6 ID選擇符

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*將頁面中所有內(nèi)外補丁設(shè)置為10*/
/*strong *{
    color: #9d0000;
}*//*將strong標(biāo)簽內(nèi)的span標(biāo)簽顏色改為紅色*/
#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>我熱愛這個行業(yè)...<span>我喜歡網(wǎng)頁制作,</span></strong>我熱愛這個行業(yè)</p>
<strong id="contact">1竞膳、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
<strong>2航瞭、我是ADOLPHHAN,我喜歡網(wǎng)頁制作,我熱愛這個行業(yè)</strong>
</body>

4.7 選擇符的組合關(guān)系

選擇符的組合方式主要有針對性使用類選擇符或者ID選擇符，選擇符群組及選擇符組合這3種方式坦辟。
針對性使用類選擇符或者ID選擇符不用多說刊侯，前面已經(jīng)很詳細(xì)。選擇符群組就是將多個相同定義的選擇符合并锉走。下面我用代碼實現(xiàn)效果：

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

5.偽類與偽對象

5.1 偽類

偽類就是指定一個或者多個與其相關(guān)的選擇符的狀態(tài)滨彻，偽類的形式是：**選擇符：偽類{屬性：屬性值}。代碼和效果如下：

<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的文檔指定的信息之外挠日，創(chuàng)建了文檔的額外信息疮绷。偽對象的形式為：選擇符：偽對象{屬性：屬性值}。代碼和效果如下：

<style>
p[id^='mycode']{
    color: red;
}
p[value='1']{
    color: green;
}
p[class='b']{
    color: blue;
}
.b:before{
    content:'我是一個兵嚣潜，來自老百姓'
}
</style>
<body>
<p id="mycode111">代碼是一種工具冬骚，亦是思想的體現(xiàn)。</p>
<p value="1">越是在寫前對代碼的 整體結(jié)構(gòu) 和 需求 越有清晰的認(rèn)識懂算，寫出的代碼越就是 可維護性高只冻、更健壯。</p>
<p class="b">计技，發(fā)現(xiàn)粒子較多的時候CPU占用很高喜德，</p>

6. CSS的單位和顏色

6.1 CSS單位

關(guān)于CSS單位,我從網(wǎng)上了解到，國內(nèi)的設(shè)計師喜歡用PX垮媒，而國外的設(shè)計師通常用EM舍悯，那么PX和EM的區(qū)別在哪里：

PX特點
- IE無法調(diào)整那些使用px作為單位的字體大小睡雇；
- 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位萌衬；
- Firefox能夠調(diào)整px和em，rem它抱，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)秕豫。
- px像素（Pixel）。相對長度單位观蓄。像素px是相對于顯示器屏幕分辨率而言的混移。(引自CSS2.0手冊)
- em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸侮穿。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置歌径，則相對于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊)
- 任意瀏覽器的默認(rèn)字體高都是16px亲茅。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px回铛。那么12px=0.75em,10px=0.625em金矛。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%勺届，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10驶俊，然后換上em作為單位就行了。

EM特點
- em的值并不是固定的免姿；
- em會繼承父級元素的字體大小饼酿。
  所以我們在寫CSS的時候，需要注意兩點：
- body選擇器中聲明Font-size=62.5%胚膊；
- 將你的原來的px數(shù)值除以10故俐，然后換上em作為單位；
- 重新計算那些被放大的字體的em數(shù)值紊婉。避免字體大小的重復(fù)聲明药版。
- 也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em喻犁，那么在聲明p的字體大小時就只能是1em槽片，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px肢础。

6.2 CSS顏色

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

可以用以下方法來規(guī)定 CSS 中的顏色：
- 十六進制色
- RGB 顏色
- RGBA 顏色
- HSL 顏色
- HSLA 顏色
- 預(yù)定義/跨瀏覽器顏色名
十六進制顏色
所有瀏覽器都支持十六進制顏色值还栓。
十六進制顏色是這樣規(guī)定的：#RRGGBB，其中的 RR（紅色）传轰、GG（綠色）剩盒、BB（藍(lán)色）十六進制整數(shù)規(guī)定了顏色的成分。所有值必須介于 0 與 FF 之間慨蛙。
RGB 顏色
所有瀏覽器都支持 RGB 顏色值辽聊。
RGB 顏色值是這樣規(guī)定的：rgb(red, green, blue)。每個參數(shù) (red期贫、green 以及 blue) 定義顏色的強度跟匆，可以是介于 0 與 255 之間的整數(shù)，或者是百分比值（從 0% 到 100%）唯灵。
舉例說贾铝，rgb(0,0,255) 值顯示為藍(lán)色隙轻，這是因為 blue 參數(shù)被設(shè)置為最高值（255）埠帕，而其他被設(shè)置為 0。
同樣地玖绿，下面的值定義了相同的顏色：rgb(0,0,255) 和 rgb(0%,0%,100%)敛瓷。

7. CSS布局

7.1 CSS相對定位

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

<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絕對定位

如果設(shè)置為絕對定位苏章，那么設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位奏瞬，包含塊可能是文檔中的另一個元素或者是初始包含塊枫绅。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣硼端。元素定位后生成一個塊級框并淋，而不論原來它在正常流中生成何種類型的框。
絕對定位使元素的位置與文檔流無關(guān)珍昨，因此不占據(jù)空間县耽。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分镣典，因為元素的位置相對于它在普通流中的位置酬诀。實現(xiàn)效果和代碼如下：

<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 固定定位

設(shè)置為固定定位的效果和代碼如下:

<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的區(qū)別

C/S結(jié)構(gòu)就是最早使用客戶機和服務(wù)器的軟件系統(tǒng)體系結(jié)構(gòu)。
B/S結(jié)構(gòu)是隨著Internet技術(shù)的發(fā)展,對C/S結(jié)構(gòu)的一種變化或者改進結(jié)構(gòu)骆撇。它的用戶界面是通過WWW瀏覽器實現(xiàn)的瞒御，主要的事物邏輯在服務(wù)器端實現(xiàn)。B/S結(jié)構(gòu)主要利用了發(fā)展的WWW瀏覽器技術(shù),結(jié)合了瀏覽器的多種語言(JS神郊、Server肴裙、JAVA、PHP涌乳、C++蜻懦、Nodejs、C#）和ActiveX技術(shù)夕晓。
了解更多的區(qū)別宛乃，去看看大牛的博客：http://www.cnblogs.com/xiaoshuai/archive/2010/05/25/1743741.html

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市蒸辆，隨后出現(xiàn)的幾起案子征炼，更是在濱河造成了極大的恐慌，老刑警劉巖躬贡，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件谆奥，死亡現(xiàn)場離奇詭異，居然都是意外死亡拂玻，警方通過查閱死者的電腦和手機酸些，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門宰译，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人魄懂，你說我怎么就攤上這事沿侈。” “怎么了市栗？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵肋坚，是天一觀的道長。經(jīng)常有香客問我肃廓，道長智厌，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任盲赊，我火速辦了婚禮铣鹏，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘哀蘑。我一直安慰自己诚卸，他們只是感情好，可當(dāng)我...
茶點故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布绘迁。她就那樣靜靜地躺著合溺，像睡著了一般。火紅的嫁衣襯著肌膚如雪缀台。梳的紋絲不亂的頭發(fā)上棠赛，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天，我揣著相機與錄音膛腐，去河邊找鬼睛约。笑死，一個胖子當(dāng)著我的面吹牛哲身，可吹牛的內(nèi)容都是我干的辩涝。我是一名探鬼主播，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼勘天，長吁一口氣：“原來是場噩夢啊……” “哼怔揩！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起脯丝，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤商膊，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后巾钉，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體翘狱，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡秘案，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年砰苍，在試婚紗的時候發(fā)現(xiàn)自己被綠了潦匈。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,100評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡赚导，死狀恐怖茬缩，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情吼旧，我是刑警寧澤凰锡，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站圈暗，受9級特大地震影響掂为，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜员串，卻給世界環(huán)境...
茶點故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一勇哗、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧寸齐，春花似錦欲诺、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案扰法，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至毅厚，卻和暖如春塞颁，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背吸耿。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工殴边，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人珍语。一個月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓锤岸，卻偏偏與公主長得像，于是被迫代替她去往敵國和親板乙。傳聞我的和親對象是個殘疾皇子是偷，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,834評論 2贊 345