css入門筆記(上)

1 css引入與規範

1.1 導入式

導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。

<style type="text/css" media="screen"> @import url("CSS文件"); </style>
複製代碼

### 1.2 外鏈式 引入一個外部的css樣式表
語言:link標籤 href="css樣式路徑名稱" 能夠放在head標籤或者body標籤裏面

<link rel="stylesheet" type="text/css" href="index.css">
複製代碼

1.3 外鏈式和導入式的區別

• link和@import雖然都是引入外部的css文件，可是他們是有天差地別的區別的
• link是html標籤，@import徹底是css提供的方式，要寫在css文件或者style標籤中。
• 他們的加載順序也是有區別的，當一個頁面被加載的時間，link引用的css文件會被同時加載，而@import引入的css文件會等頁面所有下載完後再加載。
• 當使用JavaScript控制DOM去改變css樣式的時間，只能使用link標籤，由於import是不能被DOM控制的

1.4 行內式

經過style這個標籤屬性，將css鍵值對直接寫入標籤內

<p style="width:100px;height:100px;background-color:red;"</p>
複製代碼

1.5 內嵌式

能夠放在head或者body裏 建議放在head標籤裏面title標籤的下面

2 選擇器的世界

2.1 基本選擇器

2.1.1 標籤選擇器

直接使用元素標籤進行選擇

  p{color:red;}  權重1

2.1.2 類選擇器

經過元素的類名，來選擇元素，一個元素能夠有多個類名，都表明這個元素類名是元素class屬性中的屬性值，例如

  .sum{} => 此選擇器的權重爲10

2.1.3 id選擇器

經過元素的id名，來選擇元素，類名是元素id屬性中的屬性值，例如

#sum{} => 此選擇器的權重爲100

2.1.4 通配符選擇器

經過*選擇所有元素，包括根元素 *{} => 權重小於1，能夠被覆蓋

2.2 並集選擇器

你能夠對選擇器進行分組，這樣，被分組的選擇器就能夠分享想相同的聲明。用逗號被須要分組的選擇器分開。在下面的例子中，咱們對全部的標題元素進行了分組。全部的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6{
	color:green;
}
複製代碼

2.3 交集選擇器

兩種屬性同屬一個元素的時候，咱們可使用交集選擇器來進行元素的準確選擇

<p class='name1 name2' id='id1'></p>
p.name1{}
p#id1{}
.name1.name2{}
複製代碼

2.4 派生(後代)選擇器

• 經過依據元素在其位置的上下文關係來定義樣式，你可使標記更加簡潔，用空格隔開列表中的strong元素變爲斜體字，而不是一般的粗體字，能夠這樣定義一個派生選擇器
• 後臺選擇器儘可能不要超過3個，沒有必要把每個層級都寫出來，只須要寫出關鍵節點極客

li strong{
	font-style:italic;
  font-weight:normal;
}

<ol>
	<li>
  	<strong>我是斜體字。這個由於strong元素位於li元素內。</stong>
  </li>
</ol>
複製代碼

2.5 子代選擇器

與後代選擇器相比，子元素選擇器只有選擇做爲某元素子元素，符號爲大括號

h1 > strong {color:red;}

<h1>This is<strong>very</strong> important.</h1>
複製代碼

2.6 相鄰兄弟選擇器

相鄰兄弟選擇器可選擇緊接在另外一元素後的元素，且兩者有相同父元素

h1+p{
	margin-top:50px;
}
複製代碼

2.7 屬性選擇器

對帶有指定屬性的html元素設置樣式 權重10

能夠爲擁有指定html元素設置樣式，而不只限於class和id屬性

下面的例子爲title屬性的全部元素設置樣式

[title]{color:red;}
複製代碼

屬性和值選擇器
下面的例子爲title='wjw'的全部元素設置樣式

[title=wjw]{color:red;}
複製代碼

設置表單的樣式

input[type='text']{width:150px;display:block;background:yellow}
複製代碼

2.8 假裝選擇器

• a:link{color:#ff000}  // 未訪問的連接
• a:visited{color::#ff000} // 已訪問的連接
• a:hover{color:#ff000} // 鼠標移動到連接上
• a:active{color:#ff000} //選定的連接

10<權重<11

選擇器	示例	示例描述	CSS版本
.class	.demo	選擇 class="demo" 的全部元素	1
#id	#firstname	選擇 id="firstname" 的全部元素	1
*	*	選擇全部元素	2
element	p	選擇全部 元素	1
element,element	div,p	選擇全部 元素和全部 元素	1
element element	div p	選擇 元素內部的全部 元素	1
element>element	div>p	選擇父元素爲 元素的全部 元素	2
element+element	div+p	選擇緊接在 元素以後的全部 元素	2
[attribute]	[target]	選擇帶有 target 屬性全部元素	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的全部元素	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部元素	2
[[attribute	=value]](www.html.cn/book/css/se…)	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的全部元素
:link	a:link	選擇全部未被訪問的連接	1
:visited	a:visited	選擇全部已被訪問的連接	1
:active	a:active	選擇活動連接	1
:hover	a:hover	選擇鼠標指針位於其上的連接	1
:focus	input:focus	選擇得到焦點的 input 元素	2
:first-letter	p:first-letter	選擇每一個 元素的首字母	1
:first-line	p:first-line	選擇每一個 元素的首行	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每一個 元素	2
:before	p:before	在每一個 元素的內容以前插入內容	2
:after	p:after	在每一個 元素的內容以後插入內容	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每一個 元素	2
element1~element2	p~ul	選擇前面有 元素的每一個 元素	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每一個 元素	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的全部 元素	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每一個 元素	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 元素的每一個 元素	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 元素的每一個 元素	3
:only-of-type	p:only-of-type	選擇屬於其父元素惟一的 元素的每一個 元素	3
:only-child	p:only-child	選擇屬於其父元素的惟一子元素的每一個 元素	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每一個 元素	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 元素的每一個 元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是從最後一個子元素開始計數	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每一個 元素	3
:root	:root	選擇文檔的根元素	3
:empty	p:empty	選擇沒有子元素的每一個 元素（包括文本節點）	3
:target	#news:target	選擇當前活動的 #news 元素	3
:enabled	input:enabled	選擇每一個啓用的 元素	3
:disabled	input:disabled	選擇每一個禁用的 元素	3
:checked	input:checked	選擇每一個被選中的 元素	3
:not(selector)	:not(p)	選擇非 元素的每一個元素	3
::selection	::selection	選擇被用戶選取的元素部分	3
:out-of-range	:out-of-range	匹配值在指定區間以外的input元素	3
:in-range	:in-range	匹配值在指定區間以內的input元素	3
:read-write	:read-write	用於匹配可讀及可寫的元素	3
:read-only	:read-only	用於匹配設置 "readonly"（只讀） 屬性的元素	3
:optional	:optional	用於匹配可選的輸入元素	3
:required	:required	用於匹配設置了 "required" 屬性的元素	3
:valid	:valid	用於匹配輸入值爲合法的元素	3
:invalid	:invalid	用於匹配輸入值爲非法的元素	3

3 CSS的三大特性（重疊性+優先級）

3.1 層疊性

瀏覽器解析CSS是從上至下，當CSS衝突時以最後定義的CSS爲準。
層疊性是指多種CSS樣式的疊加。例如，當使用內嵌式CSS樣式表定義

標記字號大小爲12像素，鏈入式定義

標記顏色爲紅色，那麼段落文本將顯示爲12像素紅色，即這兩種樣式產生了疊加

3.2 優先級

優先級順序爲：!important>style>權重值

權重記憶口訣:從0開始，一行內樣式+1000，一個id+100，一個屬性選擇器/class或者一個元素名+10，或者僞元素+1

規則:相同的權重:之後面出現的選擇器爲最後規則
  不一樣的權重，權重值生效

3.1.1 基本選擇器

類型	權重
標籤選擇器/div	1
class/類選擇器 .right	10
id	100
內聯	1000
*	0-1

• 後代
• 子代
• 交集
• 並集
• 相鄰兄弟
• 兄弟
• 屬性
• 僞類
• 僞元素

權重:每一個單獨的選擇器的權重相加之和

.header ul li{
	/* 權重 12 : 10+1+1 */
  backgournd:red;
}

.header .right li{
	/* 權重 21:10+10+1 */
  backgournd:#000;
}
複製代碼

• 權重相等的狀況下比較

id>class>標籤>*

1. 權重不相等的狀況下: 誰的權重大，聽誰的
2. 權重相等的狀況下:遵循就近原則，下面的覆蓋上面的
3. 權重相等,不遵循就近原則,就想聽上面的怎麼辦
4. !important 1000

3.2.1 權重算法

第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲0100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
繼承的樣式沒有權值。
優先級從高到低：行內選擇符、ID選擇符、類別選擇符、元素選擇符。

!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
important > 內聯 > ID > 僞類|類 | 屬性選擇 > 標籤 > 僞對象 > 通配符 > 繼承

4 CSS的三大特性 (繼承屬性)

4.2 無繼承性的屬性

4.2.1 display

• inline
• block
• inline-block
• table-cell
• none

規定元素應該生成的框的類型

4.2.2 文本屬性：

vertical-align：垂直文本對齊
text-decoration：規定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設置文本的方向

4.3.3 盒子模型的屬性：

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4.3.4 背景屬性

background、background-color、background-image、background-repeat、background-position、background-attachment

4.3.5 定位屬性

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

4.3.6 生成內容屬性

content、counter-reset、counter-increment

4.3.7 輪廓樣式屬性

outline-style、outline-width、outline-color、outline

4.3.8 頁面樣式屬性

size、page-break-before、page-break-after

4.3.9 聲音樣式屬性

pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

4.3 有繼承性的屬性

4.3.1 字體系列屬性

font：組合字體
font-family：規定元素的字體系列
font-weight：設置字體的粗細
font-size：設置字體的尺寸
font-style：定義字體的風格
font-variant：設置小型大寫字母的字體顯示文本，這意味着全部的小寫字母均會被轉換爲大寫，可是全部使用小型大寫字體的字母與其他文本相比，其字體尺寸更小。
font-stretch：對當前的 font-family 進行伸縮變形。全部主流瀏覽器都不支持。
font-size-adjust：爲某個元素規定一個 aspect 值，這樣就能夠保持首選字體的 x-height。

4.3.2 文本系列屬性

text-indent：文本縮進
text-align：文本水平對齊
line-height：行高
word-spacing：增長或減小單詞間的空白（即字間隔）
letter-spacing：增長或減小字符間的空白（字符間距）
text-transform：控制文本大小寫
direction：規定文本的書寫方向
color：文本顏色

4.3.3 元素可見性

visibility

4.3.4 表格佈局屬性

caption-side、border-collapse、border-spacing、empty-cells、table-layout

4.3.5 列表佈局屬性

list-style-type、list-style-image、list-style-position、list-style

4.3.6 生成內容屬性

quotes

4.3.7 光標屬性

cursor

4.3.8 頁面樣式屬性：

page、page-break-inside、windows、orphans

4.3.9 聲音樣式屬性：

speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

4.4 全部元素能夠繼承的屬性

一、元素可見性：visibility
二、光標屬性：cursor

4.5 內聯元素能夠繼承的屬性

一、字體系列屬性
二、除text-indent、text-align以外的文本系列屬性

4.6 塊級元素能夠繼承的屬性

一、text-indent、text-align

5 css盒子模型

5.1 css盒子模型圖解

• margin:外邊距
• border:邊框
• padding:內邊距

5.2 css盒子模型之寬度和高度

1. px 像素寫死
   2. % 動態計算的單位(自適應 響應式)
   

*{
	margin:0;
  padding:0;
}
.banner img{
	width:100%;
}
複製代碼

5.3 內邊距padding及簡寫

5.4 邊框線border的使用技巧

border:邊框的寬度 邊框線類型 邊框線的顏色

5.4.1 邊框線類型

5.4.2 邊框線類型

• solid 實線
• dashed 虛線
• dotted 點狀線

5.4.3 邊框線的顏色

	黑色	白色
顏色的英文	black	white
#	#000	#fff
rgb	rgb(0,0,0)	rgb(255,255,255)

border:10px solid #000
若是沒有知名方向的狀況下，表示四個方向都相等
border-top  上邊
border-right  右邊
border-bottom 下邊
border-left 左邊

5.4.4 去掉邊框

border:0
若是border屬性只有邊框段杜，沒有邊框的類型和顏色 致使border屬性失效

5.4.5 面試題(畫個三角形)

/* 
    三角箭頭原理：正方形的任意相鄰的兩條邊線
    而後旋轉必定的角度獲得咱們須要的任意方向的箭頭 
    deg 角度單位 rotate旋轉角度
    三角形的大小由正方形的寬高去控制
    三角形的粗細是有邊框線去控制
    三角形的顏色是有邊框線的顏色去控制
 */

<div class="arrow"></div>

<style> .arrow{ width: 0px; height: 0px; margin-top: 50px; margin-left: 50px; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333; transform: rotate(90deg);//控制角度 } </style>
複製代碼

5.5 padding

方向上和padding一致

5.6 margin的負值使用技巧

結構上不動，能夠調換div順序

5.7 padding和margin的區別

padding 是內邊距
會影響咱們在瀏覽器中看到的元素的實際大小內邊距會讓元素的內容增大和其它的元素沒有關係
margin 是外邊距
不會影響咱們在瀏覽器中看到的元素的實際大小外邊距不會讓元素的內容增大和另外一個元素的間距

5.8 盒子模型的計算公式及使用技巧

元素實際寬度

寬度width + padding-left/padding-right+border-left/border-right

元素實際高度

高度height+padding-top/padding-bottom+border-top/border-bottom

口號: 元素的實際大小智慧padding和border的影響跟margin沒有半毛錢的關係
若是加了padding和border的值要在width和height的值上減去padding和border的值 不然內容會溢出

6 BFC機制

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

6.1 BFC佈局規則

1. 內部的Box會在垂直方向，一個接一個地放置；
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊；
3. 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。；
4. BFC的區域不會與float box重疊，經常使用來清除浮動和佈局。；
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。；
6. 計算BFC的高度時，浮動元素也參與計算；

6.2 會生成BFC的元素

• 根元素或其它包含它的元素；
• 浮動 (元素的float不爲none)；
• 絕對定位元素 (元素的position爲absolute或fixed)；
• 行內塊inline-blocks(元素的 display: inline-block)；
• 表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
• overflow的值不爲visible的元素；
• 彈性盒 flex boxes (元素的display: flex或inline-flex)；

6.3 BFC的範圍

BFC的範圍在MDN中是這樣描述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一個BFC包含建立該上下文元素的全部子元素，但不包括建立了新BFC的子元素的內部元素。
插入一段代碼方便理解

<div class='div_1 BFC'>
     <div class='div_2'>
         <div class='div_3'></div>
         <div class='div_4'></div>
      </div>
      <div class='div_5 BFC'>
	       <div class='div_6'></div>
         <div class='div_7'></div>
     </div>
</div>
複製代碼

div_1建立了一個塊格式上下文，這個上下文包括了div_2、div_3、div_4、div_5。即div_2中的子元素也屬於div_1所建立的BFC。但因爲div_5建立了新的BFC，因此div_6和div_7就被排除在外層的BFC以外。
這就表明着一個元素不能同時存在於多個BFC中。
BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。這是利用BFC清除浮動所利用的特性。

6.4 BFC的經常使用方式：

6.4.1 子級浮動致使父級高度塌陷

<style type="text/css"> .box{ width: 900px; background: black; height: 300px; // 增長高度 } .box1{ height: 300px; width: 300px; background: red; float: left; } .box2{ height: 300px; width: 300px; background: blue; float: left; } </style>

......

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
複製代碼

上面的代碼定義了3個塊，一個父級包含了兩個子集，可是父級的背景顏色沒法顯示，是由於子集元素浮動致使了父級高度的塌陷。

在爲box設置BFC後，box的高度才能找回來。

從而顯示出正確的樣式。

6.4.2 子級margin-top將父級帶下 爲父級觸發BFC

一個盒子有上邊距 另外一個有下邊距 會出現margin邊距的重疊問題
並列盒子的margin重寫=>雙margin的重疊
-> 取大值 並非他們相加之和 也就是誰大聽誰的

要將黑色塊中的小紅塊下移一點，直接使用了margin-top，結果黑塊一塊兒下移了。

<style type="text/css"> .box{ width: 300px; height: 300px; background: black; } .box1{ height: 100px; width: 100px; background: red; margin-top: 50px; } </style>

......

<div class="box">
    <div class="box1"></div>
</div>
複製代碼

而設置了BFC後，就能正確的下浮紅色塊

margin的兼容問題:margin top的傳遞問題

大盒子裏面嵌套小盒子 給小盒子加margin-top 不但沒有實現和大盒子之間的間距 反而傳遞給大盒子身上 致使總體下移動
解決兼容性問題

1. overflow:hidden  解決margin-top的傳遞問題(此處並無溢出隱藏)
2. padding-方位:1px 這種方法影響最後實際寬高 須要在width/height上基礎上減掉纔不會影響最後實際的寬高
3. border-top:1px 這種方法會影響最後實際的高度 須要在高度height上基礎上減掉 纔不會影響最後實際的高度
4. 給子元素的margin-top的值改爲父元素的padding-top,這樣就避免使用margin-top值致使傳遞的問題

7 背景相關

7.1 背景屬性

背景縮寫縮寫能夠卸載一個聲明中設置全部的背景屬性
背景圖像支持引入多個圖像
主要屬性有:
background-color
background-image
background-repeat
background-position
backgournd-attchment
backgournd-size
backgournd-origin
backgournd-clip

7.2 背景顏色

background-color

• 指定要使用的背景顏色 例如:background-color:#ffcc00
• 能夠簡寫爲background
• backround-color 不能繼承，其默認值是trandsparent。trandsparent有透明之意。也就是說，若是一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。
• transparent 指定背景顏色應該是透明的，默認值。
• inherit 指定背景顏色，應該從父元素繼承

<style> .box{ width:650px; height:32px; background-color:orange;// 顏色 color:#fff; // 字體顏色 text-aligh:center;//字體內容水平居中 } div{ width:200px; height:200px; backgournd-color:darkbule; margin:0 auto;//上下0 左右auto 塊元素水平居中 line-height:200px;//垂直居中 } </style>
複製代碼

7.3 背景圖片

background-image

• url('圖像的url路徑地址')圖像的url
• none 表示北京上沒有防止任何圖像，這就是默認值
• inherit指定背景圖像應該從父元素繼承
• 一個元素能夠引入多張背景圖片，指定要使用的一個或者多個背景圖像，默認狀況下background-image放置在元素的左上角，並重復垂直的水平方向。
• backgournd image:url('pic.png'),url('pic2.png')... ...
• backgournd image 屬性不能繼承

7.4 背景重複

• 指定如何重複背景圖像，默認狀況下，重複background-image的垂直和水平方向
• repeat 背景圖像向垂直和水平方向垂直。這是默認
• repeat-x 只有水平位置會重複背景圖像
• repeat-y 只有垂直位置會重複背景圖像
• no-repeat background-image不會重複
• inherit 指定背景重複應該從父元素繼承

.logo{
	width:300px;
  height:300px;
  backgournd-image:url('../xxx/png');
  backgournd-repeat:repeat x;//平鋪的方式（重複）
}
複製代碼

7.5 背景定位

• backgournd-position屬性設置背景圖像的起始位置;
• xpos ypos 第一個值的水平位置，第二個值是垂直。左上角是0。單位能夠是長度值px，關鍵字和百分數值
• 關鍵字成對出現left right top bottom center，若是僅指定一個關鍵字，其餘值將會「center」
• x% y%第一個值水平位置，第二值是垂直。左上角是0%0%。
• inherit 指定background-position屬性設置應該從父元素繼承

.logo{
	width:400px;
	height:400px;
	backgournd-color:#3385ff;//背景顏色
  backgournd-image:url('./xxx.png');
	backgournd-repeat:no-repeat;
  backgournd-position:50px 50px;//x軸的座標(水平方向)y軸的座標方向(垂直方向) x軸越大 越往右 x軸越大 越往下
	//50% 50% > center center //中心位置

}
複製代碼

常用在雪碧圖中

7.6 背景關聯

backgournd-attachmen

• 設置背景圖像是否固定或者隨着頁面的其他部分滾動
• scroll 背景圖片隨頁面的其他部分滾動。這是默認
• fixed  背景圖像是固定的
• inherit 指定background-attachment的設置應該從父元素繼承

*{
	padding:0px;
  margin:0px;
}

.banner{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner01{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner02{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat
   backgournd-attachmen:fixed;// 能夠固定不動
}

複製代碼

7.7 設置對象的背景圖像的尺寸大小

background-size

• 用長度值指定背景圖像大小。不容許負值；
• 用百分比指定背景圖像大小。不容許負值。
• auto背景圖像的真實大小
• cover將背景圖等比例縮放到徹底覆蓋容器，背景圖像有可能超出容器；
• contain將背景圖像等比例縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內

.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x軸  y軸
}
複製代碼

7.8 設置對象的背景圖像向外裁剪的區域

background-clip

• padding-box:從padding區域(不含padding)開始想外裁剪背景;
• border-box:從border區域(不含border)開始向外裁剪背景
• bontent-box:從content區域開始向外裁剪背景
• text:從前景內容的形狀（好比文字）做爲裁剪區域向外裁剪，如此極客實現使用背景做爲填充色之類的遮罩效果。

.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x軸  y軸
  backgound-clip:border-box;
}
複製代碼

7.9 設置背景圖像的參考原點(位置)

background-orign

• padding-box:從padding區域(含padding)開始顯示背景圖像
• border-box:從border區域(含border)開始顯示背景圖像
• content-box:從content區域開始顯示背景圖像

8 voerflow:hidden

8.1 overflow溢出隱藏

超過內容以外的部分給隱藏起來

p{
	width:300px;
  height:10px;
  overfolw:hidden;
}

...
<p>xxxxxxxxxxxxxxxxxxxxxxxx......xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....</p>
複製代碼

2. 用來清楚浮動產生的影響
3. 解決margin-top的傳遞問題

9 讓多個元素的一行顯示的方法

9.1 讓多個元素的一行顯示的方法

• display:inline; // 轉換爲行內元素  可是設置寬高屬性以後不起做用
• display:inline-block;  // block可讓元素在一行顯示，可是他會受空格/換行建，會產生默認間距
  • 去掉空格和換行建的影響 讓標籤都在一行 (不推薦 閱讀性很差)
  • 給父元素增長一個 font-size:0，而後給子元素增長一個 font-size:14px;（可是咱們還會發現一個問題:元素裏面若是有文字 文字消失，而後在子元素增長一個屬性便可）
• float:left/rigjt; // 可是咱們清浮動

** [display:inline-block元素的特色]**

• 讓盒子橫向排列
• vertiacal-align 屬性會影響到inline-block元素，你可能會把他的值設置爲top
• 你須要設置每一列的寬度
• 若是html源代碼中元素之間有空格，那麼列與列之間會產生空隙

*{
	margin:0px;
  padding:0px;
}

.content1{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

.content2{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

...

<div class="content1">內容1</div>
<div class="content2">內容2</div>
複製代碼

inline-block 在ie7 不兼容

直接讓塊元素設置爲內聯對象呈遞（設置屬性display:inline），而後觸發塊元素的layout（如：zoom:1 或float屬性等）。代碼以下

/*推薦:IE六、7*/ 
div {
  display:inline-block;
  *zoom:1;
  *display: inline;
}

/*推薦*/
div {
   display:inline-block;
   _zoom:1;
   _display:inline;
} 
複製代碼

解釋: display:inline-block照顧的是ie8+的瀏覽器，這是正常的設置，在低版本的ie設置下行內塊有2個條件，一個行內，一個設置寬高，觸發layout便可設置寬度，而div設置了寬度後仍是會黃航，layout不是爲了水平而設置，因此爲了塊級元素轉行內塊上加上"display:inline"屬性，可是display:inline不會觸發layout，因而加上zoom:1從新觸發layout，因而造成了一個跨域設置寬高的行內元素

10 文本省略號

10.1 單行文本出現省略號必備的條件（面試題）

*{
	margin:0;
  padding:0;
}

h2:{
	width:600px;
  height:30px;
  /*單行文本出現省略好必備的條件*/
  overflow:hidden;/*溢出隱藏*/
  white-space:nowrap;/*強制文字不折行*/
  text-overflow:ellipsis;/*文字隱藏的方式:以省略號的方式隱藏*/
}

複製代碼

10.2 多行文本出現省略號必備的條件（面試題）

h2{
	width:600px;/*寬度*/
  display:-webkit-box;/*彈性盒子模型*/
  -webkit-line-orient:vertical;/*規定元素的排行方式:垂直排序*/
  -webkit-line-clamp:2;/*文字的行數 須要顯示幾行 值就寫幾行*/
  overflow:hidden;/*溢出隱藏*/
}
複製代碼

11 浮動元素的特色

11.1 float元素的特色

1. 浮動元素在一行顯示
2. 設置屬性值爲left時，浮動元素會依次從父級盒子的左側向右排布，設置屬性值爲right時，浮動元素會依次從父級盒子的右側想左排布
3. 浮動元素自動其有塊級元素的屬性
4. 浮動元素脫離文檔流
5. 浮動元素內的子元素，不會繼承浮動屬性
6. 浮動元素下面的元素不能識別浮動元素的高度和位置,因此不準display:block了

12 文檔流和脫離文檔流

12.1 介紹

• 文檔流:指的是元素排版佈局過程當中，元素會自動從左到右，從上往下的流式排版。最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素
• 每一個非浮動塊級元素都獨佔一行，浮動元素則按規定浮在行的一端。若當前行容不下則另起新行再浮動
• 內聯元素也不會獨佔一行;幾乎全部元素(包括塊級，內聯和列表元素)都可生成子行，用於擺放子元素
• 標準文檔流等級:分爲兩個等級，塊級元素和行內元素；
• 脫離文檔流：文檔流內的正常元素識別不到這個元素(脫離文檔的元素至關於平行漂浮在文檔流之上)

正常的文檔流:從左往右 從上往下
文檔流能夠分等級:行內元素和會計元素
行內元素  從左往右
塊級元素  從上往下

12.2 面試題:行內元素和塊級元素的特色，請列舉出標籤？

需求:須要塊級元素(好比:div)在一行顯示
脫離文檔流:元素的正常排列方式被打破

脫離文檔流的影響:

1. float
2. 定位

12.3 浮動參數的影響或負做用

1. 設置背景顏色屬性不起做用
2. 給父元素設置邊框border屬性沒有被撐開
3. 給父元素設置內邊距padding屬性也沒有被撐開

12.4 如何清浮動

1. 給浮動元素的父元素手動添加一個固定的高度(不推薦)
2. 給浮動元素的父元素設置overflow:hidden/auto
3. 給浮動元素的父元素結束標籤以前加一個具備元素特色的標籤(咱們通常用div)，給元素clear:both
4. clearFix僞元素去清楚浮動 (這種方法是項目中最經常使用的方法)

利用僞元素:after清浮動的固定代碼；只要清浮動咱們在浮動元素的父元素上加一個.clearfix便可

12.5 讓元素消失在咱們的視野中

1. 透明度opacity:0; [0~1]
2. display:node 隱藏
3. height:0和overflow:hidden
4. line-height:0和overflow:hidden(沒有設置高度的狀況下)
5. visbility:hidden;讓全部可見性的元素隱藏
6. margin/padding設置足夠大  只要能讓他消失
7. 利用transform 屬性 讓transform座標足夠大