CSS初識- 選擇器 &背景& 浮動& 盒子模型

時間  2020-04-29
標籤 css 選擇器 背景 浮動 盒子 模型 欄目 CSS 简体版
原文   原文鏈接

# CSS初識-目標:css

> 1. 學會使用CSS選擇器
> 2. 熟記CSS樣式和外觀屬性
> 3. 熟練掌握CSS各類基礎選擇器
> 4. 熟練掌握CSS各類複合選擇器
> 5. 熟練掌握CSS三種顯示模式(inline、block、inline-block)
> 6. 熟練掌握CSS背景屬性
> 7. 熟練掌握CSS三大特性(層級性、繼承性、優先性)
> 8. 熟練掌握CSS盒子模型(border、padding、margin)
> 9. 熟練掌握CSS浮動（left、right）
> 10.熟練掌握CSS定位
 

CSS初識

　　CSS:cascading style sheets，css樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。html

　　CSS以HTML爲基礎，提供豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還針對不一樣的瀏覽器設置不一樣的樣式。chrome

一、引入CSS樣式（書寫位置）

CSS能夠寫到那個位置？ 是否是必定寫到html文件裏面呢？

1.1 內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並用style標籤訂義，語法：瀏覽器

<head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} </style> </head>

1.2 行內式（內聯樣式）

　　內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式，是經過標籤的style屬性來設置元素的樣式，其基本語法格式以下：ide

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

1.3 外部樣式表（外鏈式）

鏈入式是將全部的樣式放在一個或多個以.css爲擴展名的外部樣式表文件中，經過link標籤將外部樣式表文件連接到HTML文檔中，其基本語法格式以下：工具

<head> <link href="CSS文件的路徑" rel="stylesheet" /> </head>

Link：單標籤，且必須指定link標籤的三個屬性：href、type、rel。佈局

  • href定義所連接外部樣式表文件的URL，能夠是相對路徑 ，也能夠是絕對路徑。
  • type:定義所連接文檔的類型，在這裏須要指定爲：type/css，表示連接的外部文件。
  • rel:定義當前文檔與被連接文檔之間的關係，在這裏須要指定爲：stylesheet,表示被連接的文檔是一個樣式表文件。 

CSS樣式規則

 

在上面的樣式規則中：字體

  1. 選擇器用於指定CSS樣式做用的HTML對象，花括號內是對該對象設置的具體樣式。
  2. 屬性和屬性值以「鍵值對」的形式出現
  3. 屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等
  4. 屬性和屬性值之間用英文「：」鏈接
  5. 多個「鍵值對」之間用英文「；」進行區分

二、選擇器（重點）

2.1 CSS基礎選擇器

每一條CSS樣式聲明（定義）由兩部分組成，以下：url

 

2.1.1 標籤選擇器（元素選擇器）spa

　　標籤選擇器就是html標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。好比div span,其基礎語法格式以下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

2.1.2 Class(類)選擇器

類選擇器使用「.」（英文點號）進行標識，後面緊跟類名，其基本語法格式以下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 標籤調用的時候用 class="類名" 
eg: <head> <style>  .blue { color: blue;
            } </style> </head> <body> <span class="blue">G</span> </body>

 類選擇器最大的優點是能夠爲元素對象定義單獨或相同的樣式,能夠選擇一個或多個標籤。

 2.1.3 多類名選擇器

　　樣式顯示效果跟HTML元素中的類名前後順序沒有關係，受css樣式書寫的上下順序有關。

且各個類名中間用空格隔開。

<div class="pink fontWeight font20">亞瑟</div> <div class="font20">劉備</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蟬</div>

2.1.4 id選擇器

 id選擇器使用「#」進行標識，後面緊跟id名，其基本語法格式以下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

 類和ID選擇器的區別

相同點：能夠應用於任何元素

不一樣點：ID選擇器只能在文檔中使用一次。而類選擇器可使用屢次：

 

可使用類選擇器詞列表方法爲一個元素同時設置多個樣式。

咱們能夠爲一個元素同時設多個樣式，但只能夠用類選擇器的方法實現，ID選擇器是不能夠的（不能使用 ID 詞列表）：

 

2.1.5 通配符選擇器

通配符   選擇器用「*」號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。其基本語法格式以下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
eg:
* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

2.2 複合選擇器

　　複合選擇器是由2個或多個基礎選擇器，經過不一樣的方式組合而成的，目的是能夠選擇更準確更精細的目標元素標籤。

2.2.1 交集選擇器

標籤連寫 div.one(表示類名爲one的div標籤) div#two

　　交集選擇器是而且的意思，既...又的意思，由2個選擇器構成，第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格。

 

2.2.2 並集選擇器

　　用逗號隔開，集體聲明，相一樣式。

　　並集選擇器是和的意思，只要逗號隔開的，全部選擇器都會執行後面樣式。

好比：.one, p , #test {color: #F00;}  表示.one和p和 #test 這三個選擇器都會執行顏色爲紅色。  一般用於集體聲明。

2.2.3 後代選擇器

　　用空格隔開，選取子孫後代的。

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就稱爲外層標籤的後代。

 

 包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。

 

 選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你能夠理解爲做用於子元素的第一代後代。然後代選擇器是做用於全部子後代元素。後代選擇器經過空格來進行選擇，而子選擇器是經過「>」進行選擇。

總結：>做用於元素的第一代後代，空格做用於元素的全部後代。

2.2.4 子元素選擇器

用>隔開，選取親兒子

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。

 

 Class=food下的子元素li加入紅色實線邊框

2.2.5 僞類選擇器

　　僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第一個，第n個元素。

連接僞類選擇器： 標籤選擇器:link /*未訪問的連接*/ 標籤選擇器:visited ：/*已訪問的連接*/ 標籤選擇器:hover /*鼠標移動到連接上*/ 標籤選擇器:active /*選定的連接*/ eg： a {   /* a是標籤選擇器 全部的連接 */ font-weight: 700; font-size: 16px; color: gray;
        } a:hover {   /* :hover 是連接僞類選擇器 鼠標通過 */ color: red; /* 鼠標通過的時候，由原來的 灰色 變成了紅色 */
}

注意寫的時候，順序不要寫反了，按照lv ha順序進行編寫。

2.2.6 屬性選擇器

選擇器

描述

[attribute]

用於選取帶有指定屬性的元素。

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute|=value]

用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每一個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每一個元素。

[attribute*=value]

匹配屬性值中包含指定值的每一個元素。

 

 2.2.7 緊鄰兄弟選擇器

 

 2.2.8 分組選擇符

當你想爲html中多個標籤元素設置同一個樣式時，可使用分組選擇符（，）

三、CSS字體樣式屬性

3.1 font-size:字號大小

font-size屬性用於設置字號，該屬性的值可使用相對長度單位，也可使用絕對長度單位。

相對長度單位

說明

em

相對於當前對象內文本的字體尺寸

px

像素、最經常使用，推薦使用

絕對長度單位

說明

in

英寸

cm

釐米

mm

毫米

pt

點


3.2 font-family:字體設置

font-family屬性用於設置字體。網頁中經常使用的字體有宋體、微軟雅黑、黑體等。

  1. 如今網頁中廣泛使用14px+
  2. 儘可能使用偶數的數字字號。
  3. 各類字體之間必須使用英文狀態下的逗號隔開
  4. 中文字體須要加英文狀態下的引號，英文字體通常不須要加引號。當須要設置英文字體時，英文字體必須位於中文字體以前。
  5. 若是字體名稱中包含空格、#、$等符號，則該字體必須加英狀態下的單引號或雙引號，例如：font-family、」times new roman」
  6. 儘可能使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

3.3 CSS Unicode字體

黑體

SimHei

\9ED1\4F53

微軟雅黑

Microsoft YaHei

\5FAE\8F6F\96C5\9ED1

楷體_GB2312

KaiTi_GB2312

\6977\4F53_GB2312

隸書

LiSu

\96B6\4E66

幼園

YouYuan

\5E7C\5706

華文細黑

STXihei

\534E\6587\7EC6\9ED1

細明體

MingLiU

\7EC6\660E\4F53

新細明體

PMingLiU

\65B0\7EC6\660E\4F53

3.4 font-weight:字體粗細

　　字體加粗除了用b和strong標籤以外，可使用CSS來實現。

Font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900(100的整數倍)

font-weight:400 /*400 = normal*字體粗細/ font-weight:700 /*700 = bold*/

3.5 font-style：字體風格

　　字體傾斜除了用i 和 em標籤以外，可使用CSS來實現，可是CSS是沒有定義的。

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值以下：

normal:默認值，瀏覽器會顯示標準的字體樣式

Italic:瀏覽器會顯示斜體的字體樣式

Oblique:瀏覽器會顯示傾斜的字體樣式

3.6 font：綜合設置字體樣式（重點）

　　font屬性用於對字體樣式進行綜合設置，其基本語法格式以下：

選擇器{font: font-style font-weight font-size/line-height  font-family;} #使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。 #注意：其中不須要設置的屬性能夠省略（取默認值），但必須保留font-size和font-family屬性，不然font屬性將不起做用。

四、CSS外觀屬性

4.1 color:文本顏色

　　color屬性用於定義文本的顏色，其取值方式有以下3種：

  1. 預約義的顏色值，如red,green,blue等
  2. 十六進制，如#FF0000
  3. RGB代碼，如紅色能夠表示rgb（255,0,0）

4.2 line-height:行間距

　　line-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，通常稱爲行高。Line-height經常使用的屬性主要有3種，像素px,相對值em和百分比%，最經常使用的是px，通常狀況下，行距比字號大7.8個像素左右就能夠了。

4.3 text-align:水平對齊方式

　　text-align屬性用於設置文本內容的水平對齊，至關於html中的align對齊屬性，其可用屬性值以下：

Left:左對齊（默認值）

right：右對齊

Center：居中對齊

text-aline是讓盒子裏面的內容水平居中，而不是讓盒子居中對齊

4.4 text-indent:首行縮進

　　text-indent屬性用於設置首行文本的縮進，其屬性值可爲不一樣單位的數值、em字符寬度的倍數，或相對於瀏覽器窗口寬度的百分比%，容許使用負值，建議使用em做爲設置單位。

1em就是一個字的寬度，若是是漢字的段落，1em就是一個漢字的寬度。

4.5 text-decoration:文本的裝飾

　　text-decoration:一般咱們用於給連接修改裝飾效果。

值

描述

none

默認，定義標準的文本，取消刪除線

underline

定義文本下的一條線，下劃線也是咱們連接自帶的，下劃線

overline

默認文本上的一條線，上劃線

line-though

定義穿過文本下的一條線,刪除線

 

五、開發者工具（chrome）

　　左邊是HTML元素結構，右邊是CSS樣式。CSS+滾輪能夠放大開發者工具代碼大小。

六、標籤顯示模式(display)

　　HTML標籤通常分爲塊標籤和行內標籤兩種類型，也稱爲塊元素和行內元素。

6.1 塊級元素(block)

　　每一個塊元素一般獨自佔一整行或多整行，能夠對其設置寬度、高度、對其等屬性，經常使用語網頁佈局和網頁結構的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素的特色：

  1. 老是重新行開始
  2. 高度，行高、外邊距以及內邊距均可以控制
  3. 寬度默認是容器的100%
  4. 能夠容納內聯元素和其餘塊元素

6.2 行內元素(inline)

　　行內元素（內聯元素）不佔有獨立的區域，靠自身字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用語控制頁面中文本的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素特色：

  1. 和相鄰行內元素在一行
  2. 高、寬無效，但水平方向的padding和margin能夠設置，垂直方向無效
  3. 默認寬度就是它自己內容的寬度
  4. 行內元素只能容納文本或則其餘行內元素。

6.3 行內塊元素(inline-block)

　　在行內元素中有幾個特殊的標籤：<img />、<input>、<td>，能夠對它們設置寬高和對齊屬性。

行內塊元素特色：

  1. 和相鄰行內元素（行內塊）在一行上，可是之間會有空白縫隙
  2. 默認寬度就是它自己內容的寬度
  3. 高度，行高、外邊距以及內邊距均可以控制 

6.4 標籤顯示模式轉換display

塊轉行內：display:inline; 行內轉塊：display：block; 塊、行內元素轉換爲行內塊：display:inline-block;

6.5 行高的測量

　　行高利用最多的一個地方是：可讓一行文本在盒子中垂直居中對齊

作法就是：文字的行高等於盒子的高度

若是行高 = height 高度  文字會 垂直居中

若是行高 > 高度   文字會 偏下

若是行高 < 高度   文字會  偏上

 

 七、CSS三大特性

7.1 CSS層疊性

所謂的層疊性是指多種CSS樣式的疊加,是瀏覽器處理衝突的一個能力，若是一個屬性經過兩個相同選擇器設置到同一個元素上，那麼這個屬性就會將另外一個屬性層疊掉。

通常出現衝突後，會按照CSS書寫的順序，以最後的樣式爲準

一、樣式衝突，就近原則，哪一個樣式離結構近，就執行那個樣式

二、樣式不衝突，不會層疊

7.2 CSS繼承性

　　子標籤會繼承父標籤的某些樣式，如文本顏色和字號。

　　子元素能夠繼承父元素的text- font- line- color等

7.3 CSS優先級

繼承或者*的貢獻值

0，0,0，0

每一個元素（標籤）貢獻值爲

0，0，0，1

每一個類，僞類貢獻值爲.class 

0，0，1，0

每一個ID貢獻值爲#id

0，1，0，0

每一個行內樣式貢獻值

1，0，0，0

每一個!important貢獻值 重要的

∞

權重以下：

div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1 #數位之間沒有進制 eg：0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 因此不會存在10個div能遇上一個類選擇器的狀況。

八、CSS背景

CSS能夠添加背景顏色和背景圖片，以及來進行圖片設置。

background-color

背景顏色

background-image

背景圖片地址

background-repeat

是否平鋪

background-position

背景位置

background-attachment

背景固定仍是滾動

背景的合寫（複合屬性）

 

background：背景顏色、背景圖片地址、背景平鋪、背景滾動、背景位置

 

背景平鋪：background-repeat

background-repeat：repeat | no-repeat| repeat-x| repeat-y| repeat: 背景圖像在縱向和橫向上平鋪 no-repeat: 背景圖像不平鋪 repeat-x: 背景圖像在橫向上平鋪 repeat-y: 背景圖像在縱向平鋪

背景圖片地址：backgroun-image

background-image : none | url (url) 
none : 　無背景圖（默認的） url : 　使用絕對或相對地址指定背景圖像 background-image 屬性容許指定一個圖片展現在背景中（只有CSS3才能夠多背景）能夠和 background-color 連用。 
若是圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 若是有背景圖片平鋪，則會覆蓋背景顏色。

背景位置:backgroud-position

backgroud-position:length || position

  1. position後面能夠跟方位名詞，他們之間能夠沒有上下順序
  2. Position若是隻寫一個方位名詞，另一個默認是居中的
  3. Position 後面也能夠跟 值px 可是 必須有順序 x 在前面， y後面  不能顛倒
 background-position:left; #top 上 bottom 下 left 左 right 右 background-position:bottom; #top 上 bottom 下 left 左 right 右 background-position:12px 50px; background-position:50px 12px;

背景附着:background-attachment

background-attachment：scroll | fixed scroll:背景圖像是隨對象內容滾動 fixed:背景圖像固定

 說明：設置或檢索背景圖像是隨對象內容滾動仍是固定的。

背景簡寫:background

background屬性的值的書寫順序官方並無強制標準的。

background：背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明:background：rgba

background：rgba(0,0,0,0.3)

最後一個參數是alpha透明度，取值0-1之間

注意：背景半透明是指盒子背景半透明，盒子裏面的內容不受影響。

九、盒子模型（CSS重點）

CSS就3個大模塊：盒子模型、浮動、定位，其他都是細節。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每一個矩形都由元素的內容、內邊距（padding）、邊框(border)、外邊距(margin)組成。

看透網頁佈局的本質

本質：把網頁元素好比文字圖片等等，放入盒子裏面，而後利用CSS擺放盒子的過程，就是網頁佈局。

盒子模型（Box Model）

 

盒子邊框（border）

邊框就是那層皮。

語法以下：

border:border-width || border-style || border-color

邊框屬性-設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，經常使用屬性值以下：

None：沒有邊框即忽略全部邊框的寬度（默認值）

Solid:邊框爲單實線（最經常使用）

Dashed:邊框爲虛線

Dotted:邊框爲點線

Double：邊框爲雙實線

掌握以下： /*border: 1px solid blue;*/ border-top: 1px solid red; /*上邊框*/ border-bottom: 2px solid green;/*下邊框*/ border-left: 1px solid blue;/*左邊框*/ border-right: 5px solid pink; /*右邊框*/

盒子邊框寫法總結表

邊框 寬度、邊框 顏色設置 、邊框 綜合設置（按順時針進行展現：上 右 下 左）

 /*border-width: 1px; border-color: red;*/ /*border-style: solid; 實線*/ /*border-style: dashed; 虛線 大使的 */ /*border-style: dotted; 點線 大使的 */ /*border: 1px solid blue;*/ border-top: 1px solid red; /*上邊框*/ border-bottom: 2px solid green; border-left: 1px solid blue; border-right: 5px solid pink; border: 1px solid blue;

表格的細線邊框

Table {border-collapse:collapse;}collapse單詞是合併的意思，表示相鄰邊框合併在一塊兒。

園角邊框（CSS3）

radius半徑（距離），語法格式：

border-radius: 50%

內邊距(padding)

padding屬性用於設置內邊距，是指邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

掌握以下： /*padding: 20px; 上下左右都是 20px*/ /*padding: 10px 20px; 上下 10 左右 20*/ /*padding: 10px 20px 30px; 上 10 左右 20 下 是 30 */ padding: 10px 20px 30px 40px; /* 上 10 右20 下 30 左 40*/

 外邊距（margin）

外邊距實現盒子居中,可讓一個盒子實現水平居中，須要知足一下兩個條件：

  1. 必須是塊級元素
  2. 盒子必須指定了寬度（width）

而後就給左右的外邊距都設置爲auto,就可以使塊級元素水平居中。

實際工做中經常使用這種方式進行網頁佈局，示例代碼以下：

.header{ width:960px; margin:0 auto;}

 文字盒子居中圖片和背景區別

  1. 文字水平居中是text-align:center
  2. 盒子水平居中 左右margin 改成auto 
    text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中 左右margin 改成 auto 就闊以了 */

 　　3.插入圖片 咱們用的最多 好比產品展現類

　　 4.背景圖片咱們通常用於小圖標背景或者超大背景圖片

section img { width: 200px;/* 插入圖片更改大小 width 和 height */ height: 210px; margin-top: 30px;  /* 插入圖片更改位置 能夠用margin 或padding 盒模型 */ margin-left: 50px; /* 插入當圖片也是一個盒子 */
    } aside { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun.jpg) no-repeat; background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */ background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
    }

 

 清除元素的默認內外邊距

製做網頁時，使用以下代碼清除元素的默認內外邊距：

* { padding:0;         /* 清除內邊距 */ margin:0;          /* 清除外邊距 */
}

 外邊距（margin）合併

　　使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

PS:行內元素只有左右邊距，沒有上下邊距。

相鄰塊元素垂直外邊距的合併

　　當上下相鄰的兩個塊元素相遇時，若是上面的元素有下邊距margin-bottom,下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和，而是二者中的較大者。這種現象被稱爲相鄰塊元素垂直外邊距的合併。（也成爲外邊距塌陷）

 

 嵌套塊元素垂直外邊距的合併

　　對於兩個嵌套關係的元素，若是父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲二者中的較大者，即便父元素的上外邊距爲0，也會發生合併。

 

content寬度和高度

　　使用寬度屬性width和高度屬性height能夠對盒子的大小進行控制。

width和height的屬性值能夠爲不一樣單位的數值或相對於父元素的百分比%，實際工做中最經常使用的是像素值。

大多數瀏覽器，符合CSS規範的盒子模型的總寬度和總高度的計算原則：

/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內盒尺寸計算（元素實際大小）*/ Element Height = content height + padding + border （Height爲內容高度） Element Width = content width + padding + border （Width爲內容寬度）

 

 一、寬度屬性width和高度屬性height僅適應於塊級元素，對行內元素無效（img和input除外）

二、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的狀況

三、若是一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding不會影響本盒子大小。

盒子模型佈局穩定性

按照 優先使用 寬度（width） 其次 使用內邊距（padding） 再次 外邊距（margin）

 width > padding > margin

 緣由：

  1. margin會有外邊距合併 還有ie6下面margin加倍的bug 因此最後使用
  2. Padding會影響盒子大小，須要進行加減計算其次使用
  3. Width 沒有問題 咱們常用寬度剩餘法 高度剩餘法來作

圓角邊框（CSS3）

讓一個正方形，變成圓圈。

border-radius: 50%; #讓一個正方形 變成圓圈

盒子陰影（CSS3）

值

描述

h-shadow

必需。水平陰影的位置，容許負值

v-shadow

必需。垂直陰影的位置，容許負值

blur

可選，模糊距離

spread

可選，陰影的尺寸

color

可選，陰影的顏色

inset

可選，將外部陰影（outset）改成內部陰影
  1. 前2個屬性是必須寫的，其他能夠省略。
  2. 外陰影（outset）可是被改寫 默認 想喲 
    div { width: 200px; height: 200px; border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
            /* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內/外陰影； */ box-shadow: 0 15px 30px rgba(0, 0, 0, .4);            
}

十、浮動（float）

普通流(normal flow)

　　文檔流，CSS定位機制有3種：普通流（標準流）、浮動和定位。

普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，好比塊級元素會獨佔一行，行內元素會按順序依次先後排列；按照這種大前提的佈局排列之下絕對不會出現例如的狀況叫作普通流佈局。

 

什麼是浮動？

　　元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。其語法格式以下：

選擇器{float:屬性值;}

 

屬性值

描述

left

元素向左浮動

right

元素向右浮動

none

元素不浮動（默認值）


浮動詳細內幕特性

　　浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

一、浮動首先建立包含塊的概念（包裹）。就是說，浮動的元素老是找離他最近的父級元素對齊，可是不會超出內邊距的範圍。

 

　　浮動的元素排列位置，跟上一個元素（塊級）有關係。若是上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；若是上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

  

二、一個父盒子裏面的子盒子，若是其中一個子級有浮動的，則其餘子級都須要浮動。這樣才能一行對齊顯示。

三、元素添加浮動後，元素會具備行內塊元素的特性。元素的大小徹底取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

浮動的目的就是爲了讓多個塊級元素同一行上顯示。 最核心的關鍵點就是怎麼排列的，是否佔有位置。

 Float 浮 漏 特

浮：加了浮動的元素盒子是浮起來的，漂浮在其餘的標準流盒子上面。

漏：加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子

特：特別注意，首先浮動的盒子須要和標準流的父級搭配使用， 其次 特別的注意浮動可使元素顯示模式體現爲行內塊特性。

版心和佈局流程

　　版心（可視區）是指網頁中主體內容所在的區域。通常在瀏覽器窗口中水平居中顯示，常見的寬度值爲960px,980px,1000px,1200px等。

佈局流程

　　爲了提升網頁製做的效率，佈局時一般須要遵照必定的佈局流程，具體以下：

一、肯定頁面的版心（可視區）

二、分析頁面中的行模塊，以及每一個行模塊中的列模塊

三、製做HTML結構

四、CSS初始化，而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊

通常固定寬度且居中

 <style> .box { width: 900px; border: 1px dashed #ccc; margin: 0 auto;
    } .top { height: 80px;   
    } .banner { height: 120px;
        /*margin: 0 auto;*/ margin: 5px auto;
    } .main { height: 500px;
    } .footer { height: 100px;
        /*margin: 0 auto; margin-top:5px;*/ margin: 5px auto 0;
    } </style> <div class="top box">top</div> <div class="banner box">banner</div> <div class="main box"></div> <div class="footer box"></div>
View Code

兩列左窄右寬型

 <style> .top { width: 900px; height: 80px; margin: 0 auto;
    } .banner { width: 900px; height: 150px; margin: 0 auto;
    } .main { width: 900px; height: 500px; margin: 0 auto;
    } .left { width: 288px; height: 500px; float: left; border: 1px solid red;
    } .right { width: 600px; height: 500px; float: right;
    } .footer { width: 900px; height: 120px; margin: 0 auto;
    } </style> <div class="top"></div> <div class="banner"></div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div>
View Code

 通欄平均分佈型

<style> * { margin: 0; padding: 0;
    } .top { height: 80px;
    } .top-inner { width: 900px; height: 80px; margin: 0 auto;
    } .banner { width: 900px; height: 150px; margin: 0 auto;
    } .banner li { float: left; width: 217px; height: 150px; margin-right: 10px;
    } .one {
    } .two {
    } .three {
    } .banner .four { margin-right: 0; float: right;
    } .main { width: 900px; height: 500px; margin: 0 auto;
    } .left { width: 288px; height: 500px; float: left; border: 1px solid red;
    } .right { width: 600px; height: 500px; float: right;
    } .footer { width: 900px; height: 120px; margin: 0 auto;
    } </style> <div class="top"> <div class="top-inner">123</div> </div> <div class="banner"> <ul> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> </ul> </div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div>
View Code

 清除浮動

爲何要清除浮動

　　浮動本質是用來作一些文字混排效果的，可是被拿來用佈局後，會出現問題。浮動元素再也不暫用原文檔流的位置，會對後面的元素排版產生影響，爲了解決這個問題，就須要在該元素中清除浮動，即清除浮動後形成的影響。

清除浮動本質

清除浮動主要是爲了解決父級元素由於子級浮動引發內部高度爲0的問題。

 

  

 清除浮動的方法

清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其餘元素。在CSS中，clear屬性用於清除浮動，其基本格式爲：

 

 

屬性值

描述

left

不容許左側有浮動元素（清除左側浮動的影響）

right

不容許右側有浮動元素（清除右側浮動的影響）

both

同時清除左右兩側浮動的影響


額外標籤法

　　在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，或則其餘標籤br等.

父級添加overflow屬性方法

給添加浮動的父級元素添加overflow.

能夠給父級添加： overflow爲 hidden|auto|scroll 均可以實現。

優勢:代碼簡潔

缺點:內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

 使用after僞元素清除浮動

　　:after 方式爲空元素的升級版，好處是不用單獨加標籤了,使用方法：

 .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;  } .clearfix {*zoom: 1;}   /* IE六、7 專有 */

 使用before和after雙僞元素清除浮動

.clearfix:before,.clearfix:after { content:""; display:table;  /* 這句話能夠出發BFC BFC能夠清除浮動,BFC咱們後面講 */
} .clearfix:after { clear:both;
} .clearfix { *zoom:1;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程