前端學習之CSS

目錄

• 一. CSS引入方式
• 二. CSS選擇器
• 三. CSS繼承性和層疊性
• 四. 盒模型
• 五. 清除默認樣式
• 六. 標準文檔流
• 七. 浮動
• 八. 清除浮動
• 九. margin中的坑
• 十. 字體圖標的使用
• 十一. 文本屬性和字體屬性(經常使用的)
• 十二. background
• 十三. 定位

一. CSS引入方式

如今的互聯網前端分爲三層:

• HTML: 超文本標記語言. 從語義的角度描述頁面結構.

• CSS: 層疊樣式表. 從審美的角度負責頁面樣式.

• JS: JavaScript. 從交互的角度描述頁面行爲.

1. CSS優勢:

• 使數據和顯示分開
• 下降網絡流量
• 使整個網站視覺效果一致
• 使開發效率提升了(耦合性下降, 一我的負責寫html,一我的負責寫CSS)

好比說,有一個樣式須要在100個頁面上顯示,若是是html來實現,那要寫100遍,如今有了CSS,只要寫一遍. 如今,html只提供數據和一些控件,至於其餘的各類各樣的樣式則徹底由CSS來提供.

2. CSS引入方式:

(1)行內樣式

在元素(標籤)內部直接寫屬性(顏色,大小等樣式)

<p style="color: green">我是一個段落</p>

(2)內接樣式

​ 在head標籤中,在style標籤的內部寫入CSS

<style type="text/CSS">
        /*如下是CSS代碼*/
        span{
               color: yellow;
        }
</style>

(3)外接樣式

• 鏈入式

在head標籤中用link標籤鏈入CSS

<link rel="stylesheet" href="./index.CSS">

• 導入式

在style標籤內部使用 @import url("#"); 導入CSS

<style type="text/CSS">
        @import url('./index.CSS');
</style>

二. CSS選擇器

1. 基本選擇器

• (1)標籤選擇器

標籤選擇器能夠直接選中全部的標籤元素, 好比div, ul, li, p等等, 無論標籤藏得多深, 都能選中, 選中的是全部的標籤, 而不是某一個, 因此說選擇的是"共性"而不是"特性".

用法:

標籤名:{color: red;}

• (2)id選擇器

經過#加id名來選中某個元素. 同一個頁面中的id毫不可能重複, 任何標籤均可以設置id. id的命名規範, 大小寫都是嚴格區分的, 如aa和AA就是兩個徹底不一樣的屬性值.

用法:

#id名{color: red;}

• (3)類選擇器

所謂類就是指class, class與id很是類似, 任何的標籤均可以添加類, 可是類是能夠重複的, 屬於歸類的概念. 同一個標籤中能夠攜帶多個類, 用空格隔開.類選擇器經過.加類名來選中某個元素.

用法:

.類名{color: red;}

• 總結:
  • a. 不要試圖用一個類將咱們的頁面寫完. 這個標籤要攜帶多個類, 共同設置樣式
  • b. 每一個類要儘量的小, 要有公共的概念, 可以讓更多的標籤使用
  • c. 儘可能用class, 除非特殊的狀況能夠用id, 由於id通常是用在js中的, 即js是經過id來獲取到元素的

2. 高級選擇器

• (1)後代選擇器

使用空格表示後代選擇器. 後代選擇器, 顧名思義, 即父元素的後代(包括兒子, 孫子, 重孫子).

用法:

.container p{color: red;}

• (2)子代選擇器

使用>表示子代選擇器, 好比div>p, 僅僅表示的是當前div元素選中的(相鄰)子元素p(即:不包括孫子).

用法:

.container>p{color: red;}

• (3)並集選擇器

多個選擇器之間使用逗號,隔開, 表示選中頁面中的多個標籤, 一些共性的元素, 可使用並集選擇器.

用法:

h3,content{color: red;}

• (4)交集選擇器

使用.表示交集選擇器. 同時用兩種選擇器選擇一個標籤元素, 例如div.active表示選中的是active和div都擁有的元素

3. 屬性選擇器

屬性選擇器, 字面的意思就是根據標籤中的屬性, 選中當前的標籤.

用法:

[for]{color: red;}

input[type='text']{background: red;}

4. 僞類選擇器

僞類選擇器通常用在超連接<a>標籤中,使用<a>標籤的僞類選擇器, 咱們必定要遵循愛恨準則----LoVe HAte.

用法:

a:link{color: #666;}                /*沒有被訪問過的a標籤樣式*/
a:visited{color: yellow;}           /*訪問事後的a標籤樣式*/
a:hover{color: green;}              /*鼠標懸停時a標籤的樣式*/
a:active{color: #yellowgreen;}      /*鼠標按下時a標籤的樣式*/

注意: link, visited, active這三個只有a標籤有, 而horver其餘元素也能夠用.

5. 僞元素選擇器

• (1)設置第一個首字母的樣式:

p:first-letter:{color:red; font-size:30;}

• (2)在...以前添加內容:

p:before{content: 'alex';}

這個屬性使用很少, 瞭解便可, 使用此僞元素選擇器必定要結合content屬性.

• (3)在...以後添加內容:

p:after{content: '&'; color: red; font-size: 40px;}

這個屬性使用很是頻繁, 一般與佈局有很大的關聯(清除浮動).

三. CSS繼承性和層疊性

CSS有兩大特性: 繼承性和層疊性

1. 繼承性

面嚮對象語言都會存在繼承的概念, 在面嚮對象語言中, 繼承的特色是: 派生類繼承父類的屬性和方法.

CSS中的繼承: 給父級設置一些屬性, 子元素繼承了父級該屬性.

• 注意:
  • 有一些屬性是能夠繼承下來: color, font-*, text-*, line-*, 它們主要是一些文本級的標籤元素;
  • 可是像一些盒子元素屬性, 定位的元素(浮動, 絕對定位, 固定定位)不能繼承.

2. 層疊性和權重問題

CSS中的層疊性: 權重大的標籤覆蓋掉了權重小的標籤.

權重: 誰的權重大,瀏覽器就會顯示誰的屬性.

• 總結:
  • a. 先看標籤元素有沒有被選中, 若是選中了, 就計算元素(id, class, 標籤數量)的權重. 誰的權重大, 就顯示誰的屬性, 權重同樣大, 後來者居上.
  • b. 若是沒有被選中的標籤元素, 權重爲0.
  • c. 若是屬性都是被繼承下來的, 權重都是0. 若是權重都是0, 則遵循"就近原則"(誰描述的近, 就顯示誰的屬性)

3. !important 的使用

!important: 設置權重爲無限大(IE不支持)

!important: 不影響繼承來的權重, 隻影響選中的元素. 不要隨便使用!important,由於使用它會影響頁面佈局.

用法:

選擇器(樣式: 值!important;)

四. 盒模型

在CSS中, "box model"這一術語是用來設計和佈局時使用的, 在網頁中基本上都會顯示一些方方正正的盒子. 咱們稱這種盒子叫盒模型.

盒模型有兩種: 標準模型和IE模型. 咱們重點學習標準模型.

1.盒模型示意圖:

2. 盒模型的屬性

• width: 內容的寬度
• height: 內容的高度
• padding: 內邊距,邊框到內容的距離
• border: 邊框,盒子的寬度
• margin: 外邊距,盒子邊框到附近最近盒子的距離

3. 盒模型的計算

若是一個盒子設置了width, height, padding, border (先不設置margin, margin有坑),那麼:

盒子的真實寬度 = width + 2*padding + 2*border

盒子的真實高度 = height + 2*padding + 2*border

4. padding(內邊距)

padding解釋內邊距的意思, 它是邊框到內容之間的距離. 另外, padding的區域是有背景顏色的, 而且背景顏色和內容的顏色同樣, 也就是說background-color這個屬性將填充滿全部的border之內的區域.

padding有四個方向, 分別描述四個方向的padding.

• (1)寫單獨屬性, 分別設置不一樣方向的padding, 以下:

padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

• (2)寫綜合屬性, 用空格隔開, 以下:

/*上 右 下 左*/
padding: 20px 30px 40px 50px;

/*上 左右 下*/
padding: 20px 30px 40px;

/*上下 左右*/
padding: 20px 30px;

/*上下左右*/
padding: 20px;

5. border(邊框)

border: 邊框的意思, 描述盒子的邊框. 邊框有三要素: 粗細, 線性樣式, 顏色.

若是顏色不寫, 默認是黑色.

若是粗細不寫, 默認不顯示邊框.

若是隻寫線性樣式, 默認的有: 上下左右3px的寬度, 實體樣式, 黑色邊框.如:

border: solid;

分別設置三要素, 以下:

border-width: 3px;

border-style: solid;    /*還有dotted、double、dashed*/

border-color: red;

注意: 值能夠是1個, 2個, 3個, 4個, 對應關係跟上面介紹的padding綜合屬性是同樣的.

設置一個方向的三要素, 以下:

border-top-width: 10px;
border-top-style: solid;
border-top-color: red;

上面三行代碼至關於下面這一行:

border-top: 10px solid red;

注意: border: none或者border: 0都表示沒有設置樣式.

應用: 使用border來製做小三角

/*小三角 箭頭指向上方*/
div{
    width: 0;
    height: 0;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

6. margin(外邊距)

margin: 外邊距的意思, 表示邊框到最近盒子的距離. margin也有四個方向, 而且也能夠設置1, 2, 3, 4個值.

/*表示四個方向的外邊距離爲20px*/
margin: 20px;

/*表示盒子向下移動了30px*/
margin-top: 30px;

/*表示盒子向右移動了50px*/
margin-left: 50px;
margin-bottom: 100px;

五. 清除默認樣式

有一些標籤會默認自帶樣式, 好比<ul>標籤默認有padding-left值, 有些默認有margin值, <ul>,<ol>和<a>標籤也自帶一些樣式, 可是咱們通常在作網頁的時候不想用那些默認的樣式, 因此須要清除頁面標籤中默認的樣式, 以便咱們更好的去調整元素的位置.

雖然通配符選擇器*能夠解決問題, 可是這種方法效率不高, 不推薦. 咱們要使用並集選擇器來選中頁面中應有的標籤, 以下代碼就是清除默認樣式的一種寫法, reset.css:

參考網址: https://meyerweb.com/eric/tools/css/reset/

參考代碼:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

六. 標準文檔流

宏觀的講, 咱們的web頁面和ps等設計軟件有本質的區別, web網頁的製做, 是個"流", 從上而下, 像"織毛衣". 而設計軟件, 想往哪裏畫東西, 就去哪裏畫.

標準文檔流下, 有一些現象, 好比: 空間摺疊現象, 高矮不齊底邊對齊現象等.

標準文檔流等級森嚴, 標籤分爲兩種等級: 行內元素和塊級元素.

1. 行內元素和塊級元素的區別

• 行內元素:
  • a. 與其餘元素並排
  • b. 不能設置寬和高, 默認的寬度就是文字的寬度
• 塊級元素:
  • a. 獨佔一行, 不能與其餘的任何元素並列
  • b. 能進行寬和高的設置. 若是不設置寬度, 那麼寬度將默認變爲父級的100%

2. 標籤的分類

在之前的HTML學習中, 咱們已經將標籤分過類了, 當時分爲: 文本級和容器級.

• a. 從HTML的角度來說, 標籤分爲:
  • 文本級標籤: <p>, <span>, <a>, <b>, <i>, <u>, <em>
  • 容器級標籤: <div>, <h1>~<h6>, <li>, <dt>, <dd>

PS: 爲何說<p>是文本級標籤呢? 由於<p>裏面只能放"文字","圖片"和"表單"元素, <p>裏面不能放<h1>~<h6>和<ul>, <p>裏面也不能放<p>.

• b. 從CSS的角度來說, CSS的分類和HTML很相像, 可是就<p>不同:
  • 行內元素: 除了<p>以外, 全部的文本級標籤, 都是行內元素. 而<p>雖是個文本級標籤, 但它倒是個塊級元素
  • 塊級元素: 全部的容器級標籤都是塊級元素, <p>標籤也是塊級元素.

3. 塊級元素和行內元素的相互轉換

咱們能夠經過display屬性將塊級元素和行內元素進行相互之間的轉換.display即"顯示模式".

• a. 塊級元素轉換爲行內元素, 經過設置: display: inline;
• b. 行內元素轉換爲塊級元素, 經過設置: display: block;

4. 脫離標準文檔流

標準文檔流裏面的如今很是多, 致使不少頁面效果沒法實現, 若是咱們如今就要設置並排和寬高, 那該怎麼辦呢? 辦法就是: 移民! 即脫離標準文檔流.

• CSS中一共有三種手段來使一個元素脫離標準文檔流:
  • 浮動
  • 絕對定位
  • 固定定位

七. 浮動

浮動是CSS裏面佈局最多的一種屬性, 也是很重要的一個屬性. float表示浮動的意思, 它有以下屬性值:

• none: 表示不浮動, 默認
• left: 表示左浮動
• right: 表示右浮動

想要學好浮動, 必定要知道它的四大特性:

• a. 浮動的元素是脫標(脫離標準文檔流)的, 標籤一旦設置浮動, 就可以並排, 而且再也不區分行內元素,塊級元素, 也就可以設置寬高了

• b. 浮動的元素互相貼靠
• c. 浮動的元素有"字圍"效果

• d. 浮動的元素有收縮的效果, 即: 一個浮動元素, 若是沒有設置width, 那麼就會自動收縮爲文字的寬度

注意: 關於浮動, 咱們要遵循一個原則: 永遠不要設置一個盒子單獨浮動.要浮動就一塊兒浮動; 有浮動就必定要清除浮動.

八. 清除浮動

1. 浮動帶來的不良影響

首先來觀察以下HTML和CSS代碼:

• HTML代碼:

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<div class="father2"></div>

• CSS代碼:

.father{
    width: 1126px;
}
.box1{
    width: 200px;
    height: 500px;
    float: left;
    background-color: red;
}
.box2{
    width: 300px;
    height: 200px;
    float: left;
    background-color: green;
}
.box3{
    width: 400px;
    height: 100px;
    float: left;
    background-color: blue;
}
.father2{
    width: 1126px;
    height: 600px;
    background-color: purple;
}

從執行效果中發現: 若是不給父盒子設置一個高度, 那麼浮動子元素是不會填充父盒子的高度的, 此時.father2的盒子就會跑到第一個位置上, 影響頁面佈局.

浮動元素的確能實現頁面元素的並排效果, 這既是它的優勢也是它的缺點. 因爲它同時也會形成頁面佈局的極大混亂, 因此咱們要清除浮動.

2. 清除浮動的四種方法

清除浮動的方法有不少種, 在這裏只介紹四種:

• a. 給父盒子設置高度
• b. 內牆法: 給浮動元素的後面加一個空的塊級標籤, 再給該標籤設置clear:both屬性
• c. 僞元素清除法(經常使用)
• d. overflow:hidden(經常使用)

3. 僞元素清除浮動

爲元素清除浮動的寫法以下:

給浮動元素的父盒子, 也就是不浮動的元素, 添加一個clearfix類, 而後做以下設置:

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

4. 關於overflow

overflow屬性規定當前內容溢出元素框時發生的事件.

值	描述
visible	默認值, 內容不會被修剪, 會呈如今元素框以外
hidden	內容會被修剪, 超出元素框以外的部分不可見
scroll	無論內容是否超出元素框都出現滾動條
auto	若是內容超出元素框, 則瀏覽器會顯示滾動條以便查看其他內容
inherit	規定繼承父元素的overflow屬性的值

這些事件逐漸演變成overflow:hidden清除法, 其實它是一個BFC區域, 具體參見: http://www.javashuo.com/article/p-ezyacvwn-v.html

九. margin中的坑

1. margin塌陷問題

當給兩個標準文檔流下的兄弟盒子設置垂直方向上的margin時, 那麼以較大的爲準, 咱們稱這種現象爲塌陷. 記住這種現象, 在佈局垂直方向盒子的時候要注意margin的用法. 水平方向上沒有塌陷現象.

當咱們給標準文檔流下的兄弟盒子設置浮動以後, 就不會出現margin塌陷的問題.

2. margin: 0 auto;

當一個<div>元素設置margin: 0 auto;時就會使盒子居中. 咱們知道margin: 0 auto;表示上下外邊距距離爲0, 左右爲auto的距離, 那麼auto是什麼意思呢? 若設置margin: 0 auto;, 咱們發現盒子儘量大的左右兩邊有很大的距離, 由於此時的盒子是居中的.

• 注意:
  • a. 使用margin: 0 auto;時, 水平居中盒子必須有width, 要有明確的width值
  • b. 若是給盒子設置"浮動"或"固定定位"或"絕對定位",那麼margin: 0 auto;失效
  • c. margin: 0 auto;使盒子居中,而不是使文本居中, 文字水平居中可使用text-align: center

3. margin和padding的區別

margin屬性描述的是兄弟盒子的關係, 而padding屬性描述的是父子盒子的關係.

先看以下兩段代碼:

• CSS代碼:

.father{
    width: 300px;
    height: 300px;
    background-color: blue;
}
.son{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 30px;
}

• HTML代碼:

<div class="father">
    <div class="son"></div>
</div>

運行上面代碼, 發現兩個盒子總體下移了30px, 其實咱們只是想讓子盒子下移30px, 父盒子不要動,可是父盒子由於沒有設置border, 因此父盒子也掉下來了, 一旦給父盒子設置一個border就行了, 那麼問題來了, 咱們不可能在頁面中平白無故的去給盒子加一個border, 因此此時的解決辦法只有一個, 就是使用父盒子的padding, 讓子盒子向下走.

• 修改後的CSS代碼:

.father{
    width: 300px;
    height: 270px;
    background-color: blue;
    padding: 30px
}
.son{
    width: 100px;
    height: 100px;
    background-color: orange;
}

十. 字體圖標的使用

阿里巴巴矢量圖標庫: http://www.iconfont.cn/

十一. 文本屬性和字體屬性(經常使用的)

1. 文本屬性

/*對齊方式*/
text-align: left|right|center|justify(兩端對齊,只適合英文);

/*文本顏色*/
color: 色值;

/*首行縮進, 建議使用單位em*/
text-indent: 2em;

/*文本修飾:  無|下劃線|上劃線|中劃線(刪除線)*/
text-decoration: none|underline|overline|line-through;

/*設置行高*/
line-height: 高度值;

2. 字體屬性

font-weight: normal|bold|lighter|100~900|inhert;  
/*100~300沒有區別*/

• font-family: 字體;
  • a. 網頁中不是全部字體都能顯示, 由於這個字體要看用戶的電腦裏面裝沒裝, 好比你設置: font-family:」華文彩雲」;, 若是用戶電腦裏面沒有這個字體, 那麼就會變成宋體.
  • b. 爲了防止用戶電腦裏面沒有你設置的那個字體, 咱們一般寫多用個逗號隔開的備選字體, 如: font-family: "Times New Roman","微軟雅黑", 備選字體能夠有無數個, 默認顯示第一個, 沒有安裝第一個就顯示第二個, 以此類推, 都沒安裝就顯示宋體.
  • c. 咱們要將英文字體放在最前面, 這樣全部的中文, 就不能匹配英文字體, 就自動的變爲後面的中文字體.
  • d. 全部的中文字體, 都有英語別名, 微軟雅黑的英語別名是: Microsoft YaHei, 宋體的英語別名是SimSun
  • e. font屬性可以將font-size(字體大小),line-height(行高),font-family(字體類型)合三爲一: font:12px(大小)/30px(行高) "Times New Roman","Microsoft YaHei","SimSun";
  • f. 行高能夠用百分比, 表示字號的百分之多少, 也能夠用em單位, 表示字號的幾倍. 通常來講, 都是大於100%的, 由於行高必定要大於字號. 例如:
    • font: 12px/200% "宋體"; 或者 font: 12px/2em "宋體"; 等價於 font: 12px/24px "宋體";
    • 反過來, 好比: font: 16px/48px "宋體"; 等價於 font: 16px/300% "宋體"; 或者 font: 16px/3em 宋體"";

十二. background

1. 顏色表示法

顏色一共有三種表示方法: 單詞, rgb表示法, 十六進制表示法.

• rgb表示法: rgb(紅色 綠色 藍色)三原色

光學顯示器, 每一個像素都是由三原色的發光原件組成的, 靠明亮度不一樣調成不一樣的顏色.

用法: rgb(111,234,123); , r, g, b的每一個值的取值範圍是0~255

• 十六進制表示法: 全部用#開頭的值, 都是十六進制的

用法: #a0a0a0; #112233; 能夠簡寫成 #123;

2. background-color 屬性表示設置背景顏色

用法: background-color: #0f0;

3. background-image 表示設置該元素的背景圖片

用法: background-image: url('paper.gif');

4. background-repeat:repeat 表示設置該元素的平鋪方式

用法: background-repeat:repeat(默認)|repeat-x|repeat-y|no-repeat|inherit;

5. background-position 表示設置背景圖片的位置

/*第一個值是水平位置,第二個值是垂直位置*/
background-position: x% y%|Xpx Ypx;
/*第一個值若是是*/

6. 圖片精靈圖技術

CSS雪碧, 即CSS Sprite, 也有人叫它CSS精靈, 是一種CSS圖像合併技術, 該方法是將小圖標和背景圖像合併到一張圖片上, 而後利用CSS的背景定位來顯示須要顯示的圖片部分.

• CSS精靈圖應用原理:

只有一張大的合併圖, 每一個小圖標節點如何顯示單獨的小圖標呢? 其實就是截取大圖一部分顯示, 而這部分就是一個小圖標.

• 使用精靈圖的好處:
  • (1) 利用CSS Sprites能很好地減小網頁的http請求, 從而大大的提升頁面的性能, 這也是CSS Sprites最大的優勢, 也是其被普遍傳播和應用的主要緣由
  • (2) CSS Sprites能減小圖片的字節, 曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的額字節總和
  • (3) 解決了網頁設計師在圖片命名上的困擾, 只需對一張集合的圖片上命名就能夠了, 不須要對每個小元素進行命名, 從而提升了網頁的製做效率
  • (4) 更換風格方便, 只需在一張或少張圖片上修改圖片的顏色或樣式, 整個網頁的風格就能夠改變. 維護起來更加方便
• 使用精靈圖的不足:
  • (1) CSS精靈圖的最大問題是內存使用
  • (2) 拼圖維護比較麻煩
  • (3) 精靈圖技術使CSS的編寫變得困難
  • (4) CSS精靈圖調用的圖片不能被打印

7. 應用

咱們可使用background綜合屬性製做通天banner, 什麼是通天banner呢? 就是通常咱們電腦屏幕都是1439, 可是設計師給咱們的banner圖都會比這個大, 那麼咱們能夠以此屬性製做通天banner, 以下:

background: red url(images/banner.jpg) no-repeat center top;

十三. 定位

定位3種: 相對定位, 絕對定位, 固定定位

1. 相對定位(至關於本身原來的位置定位)

• 現象和使用:
  • a. 若是對當前元素僅僅設置了相對定位, 那麼與標準文檔流的盒子沒有什麼區別
  • b. 設置相對定位以後, 咱們纔可使用四個方向的屬性: top, bottom, left, right
• 特性:
  • a. 不脫離標準文檔流
  • b. 形影分類
  • c. 老家留坑, 就是原來的位置還在(佔着茅坑不拉翔)

注意: 以上特性能夠證實: 相對定位在頁面中沒有什麼太大的做用, 它會影響咱們的頁面佈局, 咱們不要使用相對定位來作壓蓋效果.

• 用途:
  • a. 微調元素位置
  • b. 作絕對定位的參考(父相子絕), 絕對定位中會介紹此內容
• 參考點: 以本身原來位置作參考點

2. 絕對定位

• 特性:
  • a. 脫離標準文檔流
  • b. 作遮蓋效果, 提高了層級, 設置絕對定位以後, 不區分行內元素和塊級元素, 都能設置寬高
• 參考點:
  • (1) 單獨設置一個絕對定位的盒子:
    • a. 當咱們使用top屬性描述的時候, 是以頁面的左上角(跟瀏覽器的左上角區分)爲參考點來調整位置的
    • b. 當咱們使用bottom屬性描述的時候, 是以首屏頁面左下角爲參考點來調整位置的
  • (2) 以父輩盒子做爲參考點(經常使用):
    • a. 父輩元素設置相對定位, 子元素設置絕對定位, 那麼會以父輩元素左上角爲參考點, 這個父輩能夠是父親,爺爺,曾爺爺
    • b. 若是父親設置了定位, 則會以父輩元素左上角爲參考點; 若是父親沒有設置定位, 則會以設置了定位的父輩元素爲參考點
    • c. 不只僅是父相子絕, 父絕子絕和父固子絕都是以父輩元素爲參考點

注意: 父絕子絕沒有實際意義, 作網站的時候不會出現父絕子絕, 由於絕對定位脫離標準文檔流, 影響頁面的佈局. 相反, "父相子絕"在咱們的頁面佈局中, 是經常使用的佈局方案, 由於父親設置相對定位, 不脫離標準文檔流, 子元素設置絕對定位, 僅僅的是在當前父輩元素內調整該元素的位置.

還要注意, 絕對定位的盒子無視父輩的padding.

做用: 頁面佈局常見的"父相子絕"很是重要, 必須掌握!

3. 固定定位(當前已固定的元素不會隨着頁面滾動而滾動)

• 特性:
  • a. 脫標現象
  • b. 壓蓋現象
  • c. 提高層級
  • d. 固定不變
• 參考點:
  • a. 設置固定定位, 若是用top描述, 那麼是以瀏覽器的左上角爲參考點
  • b. 若是用bottom描述, 那麼是以瀏覽器的左下角爲參考點
• 做用:
  • a. 返回到頂部
  • b. 固定導航欄
  • c. 設置小廣告

4. z-index

這個東西很是簡單, 它有如下四大特性, 只要記住了每一個特性, 頁面佈局時就不會找不到盒子的狀況了:

• a. z-index值表示誰壓着誰, 數值大的壓蓋住數值小的
• b. 只有定位了的元素, 纔能有z-index, 也就是說, 無論是相對定位,絕對定位仍是固定定位, 它們均可以使用z-index, 而浮動元素不能使用z-index
• c. z-index值沒有單位, 就是一個正整數, 默認的z-index值爲0, 若是你們都沒有z-index值, 或者z-index值同樣, 那麼誰寫在HTML後面, 誰就在上面壓着別人. 定位了的元素, 永遠壓住沒有定位的元素
• d. 從父現象: 父親慫了, 兒子再牛逼也沒用. 即父親的z-index值較小, 兒子的z-index再大也沒用

5. 應用: 絕對定位的盒子居中

能夠看成公式記下來:

position: absolute;
left: 50%;
margin-left: -width/2;  /*即自身寬度的一半*/