第二篇 CSS快速入門
學CSS 和 JS的路線：css
1. 首先，學會怎麼找到標籤。只有找到標籤，才能操做標籤——CSS經過選擇器去找標籤html
2. 其次，學會怎麼操做標籤對象。api
CSS概述
CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，功能是用來控制網頁數據的表現，可使網頁的表現與數據內容分離。瀏覽器
一 css的四種引入方式
1. 行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。ide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body > <!--經過style引入css; 1. 找標籤：已經在div標籤裏引入了，固然就是對該div起做用 2. 操做標籤："color: red; background-color: aquamarine; width: 50px; height: 50px" 這些就是css代碼，操做標籤呈現的內容獲得渲染後的結果 3. 可是，儘可能別這麼用。由於代碼量若是很龐大的時候，一旦這麼寫，你會後悔的。 --> <div style="color: red; background-color: aquamarine; width: 50px; height: 50px" > hello world~ </div> </body> </html>
2.嵌入式（內聯）
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1. 在 head標籤裏引入css樣式,必定要在head標籤裏引入--> <style> <!-- 2. 經過標籤名字找到標籤，而後操做標籤 --> p{ color: red; font-size: 40px; } div{ color: blue; } </style> </head> <body > <!--內容標籤要寫在body標籤內--> <div>hello div</div> <p>hello p</p> <a href="">點我</a> </body> </html>
3 連接式 ---推薦（外聯，就是從外部引入的css文件）
將一個.css文件引入到HTML文件中，在<head>標籤中引入。字體
連接式是經過HTML語言規範引入的，屬於HTML的範疇；連接式的引入次數不限，能夠引入任意多個文件；網站
p{ color: red; font-size: 40px; } div{ color: blue; } a{ color: blueviolet; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 連接式 1. 引入.css文件要在<head>標籤裏 2. .css文件必須經過link標籤引入，rel="stylesheet" 屬性是說明這是個css樣式，是必需要有的； 3. type="text/css" 寫不寫無所謂 --> <link href="csstest.css" rel="stylesheet" type="text/css"> </head> <body > <div>hello div</div> <p>hello p</p> <a href="">點我</a> </body> </html>
4. 導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中；url
導入式是經過CSS的語言規範引入的；導入式引入文件的次數有限制的；spa
使用的語法以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 導入式 --> <style> @import "csstest.css"; </style> </head> <body > <div>hello div</div> <p>hello p</p> <a href="">點我</a> </body> </html>
注意：
導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。
連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢，也是推薦的引入方式。
二 css的選擇器（Selector）
「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。
1 基礎選擇器
＊ ： 通用元素選擇器，匹配任何元素 * { margin:0; padding:0; } E ： 標籤選擇器，匹配全部使用element標籤的元素 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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*<!--*通用選擇器： 影響範圍是 body裏的全部內容都能-->*/ *{ color: red; } /*經過E，即element標籤的名字選擇*/ div{ background-color: blue; } </style> </head> <body> hello body <div>hello div</div> <p>hello p</p> <a href=""> hello a </a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* #和id是親兄弟，永遠在一塊兒；id具備惟一性————最重要*/ #littlep0{ background-color: aquamarine; } /* .和 class 是親兄弟， 永遠在一塊兒，class名會有重複的————最重要*/ .pp{ background-color: beige; } /*對下面的代碼只想操做含有class="pp"的div標籤*/ /*元素名稱與class 聯合定位要操做的元素*/ div.pp{ background-color: azure; } </style> </head> <body> hello body <div>hello div</div> <!--id 具備惟一性；class：就是給屬性起個名字，class值能夠重複--> <p id="littlep0">hello p</p> <p id="littlep1" class="pp">hello p</p> <p id="littlep2" class="pp">hello p</p> <p id="littlep3">hello p</p> <a href=""> hello a </a> <div class="pp">hello div div </div> </body> </html>
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> /*對多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔 */ #littlep0, .ppp{ background-color: aquamarine; } /*多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔 */ div.pp, p.pp{ background-color: azure; } /*後代元素選擇器，只對嵌套標籤適用；匹配全部屬於E元素後代的F元素，E和F之間用空格分隔,能夠多個空格往下定位*/ .div1 div p{ color: greenyellow; } /*子代元素選擇器，匹配全部E元素的子元素F，只找兒子層的 */ .div1 > .div4{ color: brown; } /*毗鄰元素選擇器，並列的時候纔會用到；匹配全部緊隨E元素以後的同級元素F 目的就是隻能找到緊跟着class="div1"的 div標籤 */ .div1 + div{ background-color: brown; } </style> </head> <body> hello body <div>hello div</div> <!--id 具備惟一性；class：就是給屬性起個名字，class值能夠重複--> <p id="littlep0">hello p</p> <p id="littlep1" class="pp">hello p</p> <p id="littlep2" class="pp">hello p</p> <p id="littlep3" class="ppp">hello p</p> <a href=""> hello a </a> <div class="pp">hello div div </div> <!--操做該嵌套元素，須要用到後代選擇器：先定位到父級，再定位到要操做的標籤元素--> <div class="div1"> <div class="div2"> <a href="">a</a> <p>ppppppp</p> <div>div3</div> </div> <div class="div4">div4</div> </div> <div>after1</div> <p>after2</p> </body> </html>
注意嵌套規則：
- 塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含（嵌套）塊級元素，它只能包含其它內聯元素。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內能夠包含div
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。
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;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*若是沒有其餘標籤有alex屬性，就能夠不用寫屬性的值 若是有多個alex屬性，若是沒有寫alex的值，就對全部具備alex屬性的標籤都生效*/ [alex]{ color: brown; } /*指定標籤名爲div，裏面有個屬性是alex="dasb"的標籤*/ div[alex="dasb"]{ color: greenyellow; } /*匹配全部att屬性具備多個空格分隔的值、其中一個值等於「li」的E元素*/ [alex~="Li"]{ background-color: red; } /*匹配屬性值以指定值開頭的每一個元素,以sb開頭*/ [alex^="sb"]{ background-color: green; } /*匹配屬性值中包含指定值的每一個元素,只要包含某個元素就行*/ [alex*="b"]{ background-color: blue; } </style> </head> <body> <!--屬性選擇器--> <div>hello1</div> <!--自定義屬性--> <div alex="sb" >hello2</div> <div alex="dasb">hello3</div> <p alex="dasb">hellop1</p> <!--表示p標籤，alex屬性有2個值，一個是dasb,另外一個是Li--> <p alex="dasb Li">hellop2</p> <div>hello4</div> <p alex="sb">hello3</p> </body> </html>
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代碼; }
before 和 after僞類 ：
p:before 在每一個 <p> 元素的內容以前插入內容 p:before{content:"hello";color:red} p:after 在每一個 <p> 元素的內容以前插入內容 p:after{ content:"hello"；color:red}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*什麼都沒操做時，初始狀態*/ a:link{ color: #FF0000; } /*鼠標懸浮在a標籤上時*/ a:hover{ color: blue; } /*點擊時*/ a:active{ color: brown; } /*訪問過的*/ a:visited{ color: greenyellow; } .box{ width: 100px; } .top,.botoom{ width: 200px; height:200px; background-color: greenyellow; } /*懸浮到top時，顏色變爲紅色*/ /*.top:hover{*/ /*background-color: red;*/ /*}*/ /*對屬性爲box的元素，梳篦懸浮在box下的top時，也是能夠控制botoom改變顏色*/ .box:hover .botoom{ background-color: green; } /*在calss = "add"的標籤以前，加入下面的文字，及定義顏色*/ .add:before{ content: "你好，小哥"; color: blue; } /*在calss = "add"的標籤以後，加入下面的文字，及定義顏色*/ .add:after{ content: '這是after啊'; color: aqua; } </style> </head> <body> <a href="https://www.baidu.com">hello world</a> <div class="box"> <div class="top">1</div> <div class="botoom">2</div> </div> <div class="add"> hello ma </div> </body> </html>
5 css優先級和繼承
CSS優先級:
所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""-------------------1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-1
按這些規則將數字逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。
CSS的優先級，還要看link引入的順序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*能夠經過三種方式定位到標籤： 1. class屬性 2. id屬性 3. 標籤名稱 */ .div1{ color: rebeccapurple; } div{ color: yellow; } #id1{ color: red; } </style> </head> <body> <div class="div1" id="id1" >優先級</div> </body> </html>
一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。這裏文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。 二、有!important聲明的規則高於一切。
三、若是!important聲明衝突，則優先級是最高的了。 四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。 五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*能夠經過三種方式定位到標籤： 1. class屬性 2. id屬性 3. 標籤名稱 */ /*權重值： id 100 + class 10 = 110 權重 */ #div1 .div3{ color: rebeccapurple; } /*權重值 id 100 + class 10 + 標籤名稱 1 = 111 權重 ，大於110，優先級高於 上面的110權重 */ #div1 .div2 div{ color: red; } /*若是有時候算不過來權重的時候，能夠用!important；直接就規定這是優先級最高的了*/ #div1 .div3{ color: green!important; } </style> </head> <body> <div id="div1"> <div class="div2"> <div class="div3"> 嵌套優先級 </div> </div> </div> </body> </html>
CSS的繼承性:
body{color:red;} <p>helloyuan</p>
2. 這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。
p{color:green}
3. 發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。
4. 此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*給id="div1"設置爲紅色，他下面的全部子孫都變爲紅色了，由於下面的子孫都沒有定義本身的顏色*/ #div1{ color: red; } /*若是對子孫的任意一個進行修改，都會修改*/ .div3{ color: chartreuse; } </style> </head> <body> <div id="div1"> hello1 <div class="div2"> hello2 <div class="div3"> 嵌套優先級 </div> </div> </div> </body> </html>
三 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> # a 透明度
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> .back{ border: 1px solid green; /*加邊框*/ width: 800px; height: 800px; /*下面設置的200*300像素的圖片，而div是800*800的， 全部還有空間， 就會上下左右都會給平鋪開*/ background-image: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3073931275,807663161&fm=27&gp=0.jpg"); /*固然，也能夠不平鋪；或者很想平鋪；或者縱向平鋪*/ background-repeat: no-repeat; /*設置圖片的位置*/ /*background-position: center;*/ background-position: 0 200px; } </style> </head> <body > <div class="back"></div> </body> </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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ /*span是內聯標籤，不能設置長寬的； 可是有display屬性，既可讓內聯標籤變成塊級標籤，也可讓塊級標籤變成內聯標籤；還能夠把標籤變成一個既有內聯標籤又有塊級標籤的萬能標籤*/ 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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ border: 1px solid green; /*加邊框*/ width: 800px; height: 800px; /*還能夠簡寫，將全部設置的值都寫在一行上*/ background: no-repeat 0 200px url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3073931275,807663161&fm=27&gp=0.jpg"); } </style> </head> <body > <div class="back"></div> </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> div{ /*字符與字符間的間距*/ /*letter-spacing: 10px;*/ /*單詞與單詞之間的間距*/ word-spacing: 20px; /*div的塊高度*/ height: 100px; /*文本的高度，與div的高度同樣，本身就佔一行了*/ /*line-height: 100px;*/ background: aqua; /*水平居中*/ text-align: center; /*首行縮進*/ text-indent: 150px; text-transform: capitalize; } </style> </head> <body > <div class="back"> <p>hello world</p> 介紹文本屬性介紹文本屬性介紹文本屬性 介紹文本屬性介紹文本屬性介紹文本屬性 介紹文本屬性 介紹文本屬性 介紹文本屬性 介紹文本屬性 介紹文本屬性 <p>另起一行</p> </div> </body> </html>
5 邊框屬性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 200px; height: 200px; /*邊框屬性：簡寫方式*/ /*border: 5px solid red;*/ /*分開寫*/ /*邊框粗細*/ border-width: 2px; /*邊框顏色*/ border-color: green; /*邊框線條樣式*/ border-style: dashed; /*還能夠單獨控制某一條邊框的顏色，粗細，樣式*/ border-left-color: blue; } </style> </head> <body> <div class="div1"> </div> </body> </html>
6 列表屬性
ul,ol{ list-style: decimal-leading-zero; list-style: none; /*很是經常使用，去掉列表前面的點*/
list-style: circle; list-style: upper-alpha; list-style: disc; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ol,ul{ /*list-style: circle;*/ /*很是經常使用的：去掉列表前面的 點*/ list-style: none; } </style> </head> <body> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> <dl> <dt>河北</dt> <dd>廊坊</dd> <dd>唐山</dd> <dd>邯鄲</dd> </dl> </body> </html>
7 dispaly屬性--重要
none：隱藏
block：塊級標籤
inline:內聯標籤
inline-block:即有塊級標籤屬性，又有內聯標籤屬性
塊級標籤：不能在一行上顯示；內聯標籤：不能設置長寬
因此此時有個 inline-block屬性：就具有即有塊級標籤可調長寬的特性，又有內聯標籤不獨佔一行的特性。
display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：
#outer{
border: 3px dashed;
word-spacing: -5px;
}
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，而後另word-spacing 爲 負數。
div{word-spacing: -5px;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*把具備公共屬性的部分能夠提取出來一塊兒設置*/ div,p,a,span{ width: 100px; height: 100px; } /*把各個不一樣標籤獨自的屬性單獨設置*/ div{ /*把塊級標籤改變成內聯標籤*/ display: inline; background-color: red; } p{ background-color: blue; display: none; } /*span 和 a 標籤都是內聯標籤，內聯標籤不能設置高度和寬度，可是不要緊，能夠經過 display屬性改變他的，讓他變成塊級標籤，而後就能夠設置高度和寬度了*/ span{ display: inline-block; background-color: green; } a{ display: inline-block; background-color: aquamarine; } /*將inline-block自動添加的小間隙給去掉，能夠在要去掉的標籤的父級標籤上加個class屬性，而後將 word-spacing設置位負數*/ .outer{ word-spacing: -5px; } </style> </head> <body> <div> divvvv </div> <p>ppppp</p> <div class="outer"> <span>spannnnnnnn</span> <a href="#">click</a> </div> </body> </html>
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>
因此若是想實現子級距離父級30px的解決方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
9 float屬性——作佈局用的最多的就是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～h五、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float纔會脫離文檔流。
---部分無視和徹底無視的區別？須要注意的是，使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍(能夠說是部分無視)。而對於使用absolute position脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。(能夠說是徹底無視)
浮動的表現
定義：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的浮動框以後的塊框表現得就像浮動框不存在同樣。（注意這裏是塊框而不是內聯元素；浮動框只對它後面的元素形成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，因此文本不會被擋住，這是float的特性，即float是一種不完全的脫離文檔流方式。不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: black solid; } .div1{ display: inline-block; width: 100px; height: 100px; background-color: green; {#讓div1塊元素向左漂起來#} float:left; } .div2{ width: 200px; height: 100px; background-color: red; {#float: left;#} } .div3{ width: 100px; height: 200px; background-color: blue; {#float: left;#} } .div4{ width: 200px; height: 200px; background-color: firebrick; {#float: left;#} } </style> </head> <body> <div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> </body> </html>
現象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 #} * { margin:0;padding:0; } .container{ border:1px solid red; width:300px; } {# box1向左漂， box2是要向右漂，做爲導航欄固定顯示在最上面 box3做爲正常的文檔流，顯示內容，顯示在導航欄的下面 實際結果卻沒讓人如意 #} #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沒有高度（未被撐開），所以跑上去了。
解決方法：
一、要麼給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。
二、要麼清除浮動。
<!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標籤是空的，both意思是左邊右邊都不能右浮動元素，而它 本身什麼都不顯示，因此只能顯示box3了， 經過這種方式解決了上面的問題--> <div style="clear: both;"></div> </div> <div id="box3">box3</div> </body> </html>
而在html里加入清除浮動的代碼不是推薦的方式，由於極可能看不懂這段代碼是幹什麼的，因此推薦用下面的方式清除浮動，寫在CSS裏。
清除浮動：
在非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文件中寫入大量無心義的空標籤，又能清除浮動。
<!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; } /*清除浮動---推薦方式，將清除浮動寫在css裏 就至關於在container後面加個內容爲空的div*/ .clearfix:after{ content: "";/*設置內容爲空*/ display: block;/*設置位塊*/ clear: both;/*對該塊清除左右浮動*/ } </style> </head> <body> <div class="container clearfix"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </html>
話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。
只要寫一個.clearfix就好了，而後在須要清浮動的元素中 添加clearfix類名就行了。
如：
<div class="head clearfix"></div>
清除浮動--方式2：
overflow:hidden;
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
position(定位)
position定位的值有四個，static，relative，absolute，fixed
1 static
static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。
2 position: relative 相對定位
relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
3. position: absolute 絕對定位。
定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：
若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，而且保證相對定位參照物不會偏移便可。
常常是父級元素設置position：relative，它的子級元素設置position：absolute，而後子級元素再設置left,top，right，bottom進行定位，配合使用的。
3 position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。
注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .div1{ width: 100px; height: 100px; background-color: green; } .div2{ width: 100px; height: 100px; background-color: red; /*對div2元素使用相對定位 relative是以本身原始位置爲參照位的 設定了元素的相對定位以及偏移值，元素還佔有着原來的位置*/ /*position: relative;*/ /*left: 50px;*/ /*top: 50px;*/ /*使用絕對定位 absolute會脫離文檔流， absolute定位的參照物是以距離它最近的已定位的父級元素做爲參照物的， 該例子裏它的父級元素container沒有定位，因此就會向外找，找到的就是body，因此 該例子裏就是已body做爲參照物進行定位的*/ position: absolute; left: 50px; top: 50px; } .div3{ width: 100px; height: 100px; background-color: blue; } .div4{ width: 100px; height: 100px; background-color: firebrick; } /*固定在某個位置，滾動條滾動該位置不變*/ .returntop{ width: 80px; height: 50px; background-color: lightblue; position: fixed; right: 20px; bottom: 30px; /*水平居中*/ text-align: center; /*豎直居中*/ line-height: 50px; } </style> </head> <body> <div class="container "> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> <div style="height: 2000px;background: beige"></div> <div class="returntop">返回頂部</div> </body> </html>
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
效果圖：
- 1. 第二篇 CSS快速入門
- 2. CSS——快速入門
- 3. 第一篇：Spring Boot 快速入門篇
- 4. html5快速入門（二）—— CSS簡介
- 5. SpringBoot教程 | 第一篇：快速入門
- 6. 自學Springboot第一篇（快速入門）
- 7. Hibernate(5.2.10)快速入門第一篇
- 8. CSS佈局快速入門
- 9. Composer 快速入門篇
- 10. MySQL 快速入門（上篇）
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • YAML 入門教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。