css概述
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
一 css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3 鏈接式
將一個.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
二 css的選擇器（Selector）
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素
1 基礎選擇器
＊ ： 通用元素選擇器，匹配任何元素 * { margin:0; padding:0; } E ： 標簽選擇器，匹配所有使用E標簽的元素 p { color:green; } .info和E.info: class選擇器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; } #info和E#info id選擇器，匹配所有id屬性等於footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
2 組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 div,p { color:#f00; }
E F 后代元素選擇器，匹配所有屬於E元素后代的F元素，E和F之間用空格分隔 li a { font-weight:bold;
E > F 子元素選擇器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F div + p { color:#f00; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1>p{ background-color: aqua; color: deeppink; } .main2>div{ background-color: blueviolet; color: chartreuse; } </style> </head> <body> <div class="div1">hello1 <div class="div2">hello2 <div>hello4</div> <p>hello5</p> </div> <p>hello3</p> </div> <p>hello6</p> <hr> <div class="main2">1 <div>2 <div> 4 </div> </div> <div> 3 </div> </div> </body> </html>
注意嵌套規則：
- 塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內可以包含div
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [suoning]{ color: blueviolet; } .he>div{ color: bisque; } </style> </head> <body> <div class="he">111 <p class="fr">222 <div>333</div> </p> <div>444</div> </div> *************************** <div suoning="sb">ddd <p>pppp</p> </div> <p suoning="sb2">ddd2 <p>pppp2</p> </p> </body> </html>
3 屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
4 偽類(Pseudo-classes)
CSS偽類是用來給選擇器添加一些特殊效果。
anchor偽類：專用於控制鏈接的顯示效果
a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。 a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。 a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。 a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。 偽類選擇器 : 偽類指的是標簽的不同狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
補充：
.outer:hover .right{color: red}
before after偽類 ：
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之后插入內容
p:before 在每個 <p> 元素的內容之前插入內容 p:before{content:"hello";color:red} p:after 在每個 <p> 元素的內容之前插入內容 p:after{ content:"hello"；color:red}
5 css優先級和繼承
CSS優先級:
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""-------------------1000； 2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100 3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10 4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-1
按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。
<style>
#p{
color: rebeccapurple;
}
.p{
color: #2459a2;
}
p{
color: yellow;
}
</style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
附加說明:
1、文內的樣式優先級為1,0,0,0，所以始終高於外部定義。這里文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。
2、有!important聲明的規則高於一切。
3、如果!important聲明沖突，則比較優先權。
4、如果優先權一樣，則按照在源碼中出現的順序決定，后來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。
三 CSS的常用屬性
1 顏色屬性
<div style="color:blueviolet">ppppp</div> <div style="color:#ffee33">ppppp</div> <div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>
2 字體屬性
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ <h1 style="font-style: oblique">老男孩</h1>
3 背景屬性
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平鋪滿) background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom) 簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果將背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；另外，如果此時要設置一個width＝100px，你也看不出效果，除非你設置出html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background-color: antiquewhite; } body{ width: 100px; height: 600px; background-color: deeppink; background-image: url(1.jpg); background-repeat: no-repeat; background-position: center center; } </style> </head> <body> </body> </html>
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; width: 18px; height: 20px; background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13"); background-position: 0 -100px; } </style> </head> <body> <span></span> </body> </html>
4 文本屬性
font-size: 10px; text-align: center; 橫向排列 line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比 vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效 text-indent: 150px; 首行縮進 letter-spacing: 10px; word-spacing: 20px; text-transform: capitalize;
思考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer .item {
width: 300px;
height: 200px;
background-color: chartreuse;
display: inline-block;
}
</style>
</head>
<body>
<div class="outer">
<div class="item" style="vertical-align: top">ll
</div>
<div class="item">
</div>
</div>
<script>
</script>
</body>
</html>
5 邊框屬性
border-style: solid; border-color: chartreuse; border-width: 20px; 簡寫：border: 30px rebeccapurple solid;
6 列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none;
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
7 dispaly屬性
none block inline
display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決：
#outer{
border: 3px dashed;
word-spacing: -5px;
}
8 外邊距和內邊
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框) 圍繞在內邊距和內容外的邊框。
- Content(內容) 盒子的內容，顯示文本和圖像。
元素的寬度和高度:
重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.
margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左
下面的例子中的元素的總寬度為300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
練習： 300px*300px的盒子裝着100px*100px的盒子，分別通過margin和padding設置將小盒子 移到大盒子的中間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ background-color: aqua; width: 300px; height: 300px; } .div2{ background-color: blueviolet; width: 100px; height: 100px; } </style> </head> <body> <div class="div1"> <div class="div2"></div> <div class="div2"></div> </div> </body> </html>
思考1:
邊框在默認情況下會定位於瀏覽器窗口的左上角，但是並沒有緊貼着瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
>>>>解決方法：
body{
margin: 0;
}
思考2：
margin collapse（邊界塌陷或者說邊界重疊）
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場
1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值
2父子div
if 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content 中的其中一個，然后按此div 進行margin ；
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px; } .div1{ background-color: aqua; width: 300px; height: 300px; } .div2{ background-color: blueviolet; width: 100px; height: 100px; margin: 20px; } </style> </head> <body> <div style="background-color: cadetblue;width: 300px;height: 300px"></div> <div class="div1"> <div class="div2"></div> <div class="div2"></div> </div> </body> </html>
解決方法：
1: border:1px solid transparent 2: padding:1px 3: over-flow:hidden;
9 float屬性
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文檔流。
---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對於使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
浮動的表現
定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。
現象1:
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。
現象2:
(1)左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。
解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。
(2)上下結構div盒子重疊現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </body> </html>
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
2、要么清除浮動。
清除浮動：
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
方式1(推薦):
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；
line-height: 0; <----行高為0；
height: 0; <----高度為0；
font-size:0; <----字體大小為0；
}
.clearfix { *zoom:1;} <----這是針對於IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。
整段代碼就相當於在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。
話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。
只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。
如：
<div class="head clearfix"></div>
方式2：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
10 position(定位)
1 static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
2 position: relative／absolute
relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
4 僅使用margin屬性布局絕對定位元素
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對定位元素。
層級關系為：
<div ——————————— position:relative;
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
11 關於css的拾遺
11.1 inline-block 的間隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: inline-block;
background-color: #2459a2;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a>111</a>
<a>222</a>
<a>333</a>
</body>
</html>
inline-block默認的空格符就是標簽與標簽之間的空隙造成的。
(1) 我們可以通過margin:-3px來解決，但是
1.我們布局肯定很多元素，不可能每個都添加margin負這樣維護成本太大了
2.我們線上代碼如果壓縮，那么我們就不存在哪個4px的問題了，那么我們的margin負就回造成布局混亂！
(2)我們可以給幾個標簽加一個父級div，然后：
div{word-spacing: -5px;}
11.2 word-wrap & word-break:
word-wrap:
the word-wrap CSS property is used to specify whether or not the browser is allowd to
break lines within words in order to prevent overflow when an otherwise unbreakable
string is too long to fit.
The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.
word-break:
The word-break CSS property is used to specify how (or if) to break lines within words
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
width: 100px;
background-color: #84a42b;
word-wrap: break-word;
word-break: break-all;
}
.p2{
width: 100px;
background-color: darkgoldenrod;
word-wrap: break-word;
word-break: break-all;
}
</style>
</head>
<body>
<p class="p1">hello yuan hello yuan hello yuan hello yuan hello yuan</p>
<p class="p2">helloyuanhelloyuanhelloyuanhelloyuanhelloyuanhelloyuan</p>
</body>
</html>
1.3
一旦給元素加上absolute或float就相當於給元素加上了display:block;。什么意思呢？比如內聯元素span默認寬度是自適應的，你給其加上width是不起作用的。要想width定寬，你需要將span設成display:block。但如果你給span加上absolute或float，那span的display屬性自動就變成block，就可以指定width了。
1.4 快寫
div tab
a tab
div.main>ul>li.c*4 tab
1.5 display:flex
1.6 響應式布局
參考文獻：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.jianshu.com/p/a3da5e27d22b