CSS簡介
此文章借鑒菜鳥教程和w3c教程，為學(xué)習(xí)分享文章如有問題請(qǐng)?jiān)u論奏窑，文章原地址自己寫在gitbook上格式不兼容，url:https://hamster.gitbook.io/share/
CSS 指層疊樣式表 (Cascading Style Sheets)
*選擇器
*盒模型
*背景和邊框
*文字特效
*2D/3D轉(zhuǎn)換
*動(dòng)畫
*多列布局
*用戶界面
CSS分類
外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)屈扎，外部樣式表將是理想的選擇埃唯。在使用外部樣式表的情況你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用 <link> 標(biāo)簽鏈接到樣式表
<link rel="stylesheet"type="text/css"href="xxx.css">
內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)鹰晨，就應(yīng)該使用內(nèi)部樣式表墨叛。你可以使用<style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
<head>
<style type="text/css">
h1 {color: sienna;}
body{background-color:black}
</style>
</head>
內(nèi)聯(lián)樣式表（在 HTML 元素內(nèi)部）
由于要將表現(xiàn)和內(nèi)容混雜在一起模蜡，內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢漠趁。例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。要使用內(nèi)聯(lián)樣式哩牍，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性棚潦。
請(qǐng)慎用這種方法
<h1 style="color:red">helloworld></h1>
CSS語法
基礎(chǔ)語法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明膝昆。
selector {declaration1; declaration2; ... declarationN }
selector: 選擇器通常是你需要改變?cè)氐腍TML元素
declaration：聲明：有一個(gè)屬性和一個(gè)值組成（property: value）
例：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
高級(jí)語法
選擇器分組
可以對(duì)選擇器進(jìn)行分組丸边，這樣叠必，被分組的選擇器就可以分享相同的聲明
h1,h2,h3,h4,h5,h6 {
color: green;
font-size: 14px;
}
繼承及其問題
子元素從父元素繼承屬性,通過 CSS 繼承，子元素將繼承最高級(jí)元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）妹窖。不需要另外的規(guī)則纬朝，所有 body 的子元素都應(yīng)該顯示 Verdana 字體，子元素的子元素也一樣骄呼。并且在大部分的現(xiàn)代瀏覽器中共苛，也確實(shí)是這樣的。
html結(jié)構(gòu)
<html>
<head></head>
<body>
<p>share<p>
</body>
</html>
css樣式
body {
font-family: Verdana, sans-serif;
font-size: 14px;
}
如果重寫里面屬性蜓萄，將不會(huì)使用父元素的屬性
p, td, ul, ol, li, dl, dt, dd {
font-size: 12px;
}
CSS選擇器
派生選擇器
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個(gè)標(biāo)簽的樣式隅茎。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔
html結(jié)構(gòu)
<p>
<strong>我是粗體字嫉沽，不是斜體字辟犀，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用</strong>
</p>
<ol>
<li>
<strong>我是斜體字绸硕。這是因?yàn)?strong 元素位于 li 元素內(nèi)堂竟。</strong>
</li>
<li>我是正常的字體。</li>
</ol>
css樣式
li strong {
font-style: italic;
color:red;
font-weight: normal;
}
id選擇器(#id)
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式
html代碼
<p id="red">這個(gè)段落是紅色玻佩。</p>
<p id="green">這個(gè)段落是綠色出嘹。</p>
css代碼
#red {color:red;}
#green {color:green;}
id屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
id 選擇器和派生選擇器
id被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個(gè) id 選擇器作為派生選擇器也可以被使用很多次
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
div#sidebar{
border: 1px dotted #000;
padding: 10px;
}
類(class)選擇器(.class)
類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式
只有適當(dāng)?shù)貥?biāo)記文檔后咬崔，才能使用這些選擇器
html代碼
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
<p class="important warning">
<p>share</p>
This paragraph is very important.
</p>
css代碼
*.important {color:red;}
h1.important {color:red;}
p.important {color:red;}
.important p{font-size: 16px;}//跟id選擇器一樣 也可以和派生選擇器結(jié)合使用
屬性選擇器
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素
html代碼
<h1>可以應(yīng)用樣式：</h1>
<p class="important warning">This is a paragraph.</a>
<h1>無法應(yīng)用樣式：</h1>
<p class="important">This is a paragraph.</a>
<input type="text"></input>
css代碼
<style type="text/css">
p[class="important warning"]{
color: red;
}
input[type="text"]{
}
</style>
后代選擇器（跟派生選擇器類似）
后代選擇器（descendant selector）又稱為包含選擇器税稼。后代選擇器可以選擇作為某元素后代的元素。
html代碼
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
css代碼
h1 em {color:red;}
子元素選擇器
與后代選擇器相比垮斯，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素娶聘，語法：p > strong{color: red}
html代碼
<h1>This is
<strong>very</strong>
<strong>very</strong>important.
</h1>
<h1>This is
<em>really
<strong>very</strong>
</em>
important.
</h1>
css代碼
h1 > strong {color:red;}
h1.important div > p 跟后代選擇器結(jié)合使用
相鄰兄弟選擇器
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素
相鄰兄弟選擇器使用了加號(hào)（+）甚脉，即相鄰兄弟結(jié)合符（Adjacent sibling combinator）丸升。注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符牺氨。
html代碼
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
css代碼
li + li {font-weight:bold;}
偽類
CSS 偽類用于向某些選擇器添加特殊的效果狡耻，最常見的是超鏈接使用
語法：
selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value}//與class類結(jié)合使用
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
<a class="red" href="css_syntax.asp">CSS Syntax</a>//與class結(jié)合使用
a.red : visited {color: #FF0000}
S
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
li:first-child {text-transform:uppercase;}//
獲取元素中的第一個(gè)
常見屬性
*:active 向被激活的元素添加樣式
*:focus 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
*:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
*:link 向未被訪問的鏈接添加樣式
*:visited 向已被訪問的鏈接添加樣式
*:first-child 向元素的第一個(gè)子元素添加樣式
*:lang 向帶有指定 lang 屬性的元素添加樣式
*提示：在 CSS 定義中猴凹，a:hover 必須被置于 a:link 和 a:visited 之后夷狰，才是有效的。
*提示：在 CSS 定義中郊霎，a:active 必須被置于 a:hover 之后沼头，才是有效的。
*提示：偽類名稱對(duì)大小寫不敏感。
偽元素
CSS 偽元素用于向某些選擇器設(shè)置特殊效果
語法：
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
實(shí)例代碼
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
h1:before{
content:url(logo.gif);
}
h1:after{
content:url(logo.gif);
}
常見屬性
:first-letter 向文本的第一個(gè)字母添加特殊樣式
:first-line 向文本的首行添加特殊樣式
:before 在元素之前添加內(nèi)容
:after 在元素之后添加內(nèi)容
:before 和:after比較常見 常用于前后添加圖片等
CSS框架模型（盒子模型）
概述
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容进倍、內(nèi)邊距土至、邊框 和 外邊距 的方式。
* {
margin: 0;
padding: 0;
}
背景應(yīng)用于由內(nèi)容和內(nèi)邊距猾昆、邊框組成的區(qū)域陶因。
*內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊垂蜗，也可以應(yīng)用于單獨(dú)的邊楷扬。
*外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距贴见。
內(nèi)邊距(padding)
*元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間烘苹。控制該區(qū)域最簡單的屬性是 padding 屬性片部。CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域螟加。
body{padding: top right bottom left}
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
h1 {
padding: 10px 20px 10px 20px
}
p {padding: 10% 10%;}
p {padding: 10%;}
屬性
padding 簡寫屬性。作用是在一個(gè)聲明中設(shè)置元素的所內(nèi)邊距屬性
padding—left 設(shè)置元素的左內(nèi)邊距
padding-right 設(shè)置元素的右內(nèi)邊距
padding-top 設(shè)置元素的上內(nèi)邊距
padding-bottom 設(shè)置元素的下內(nèi)邊距
分別設(shè)置上吞琐、右、下然爆、左內(nèi)邊距
邊框(boder)
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線站粟。CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色曾雕。
p.aside {border-style: solid dotted dashed double;}
上面這條規(guī)則為類名為 aside 的段落定義了四種邊框樣式：實(shí)線上邊框奴烙、點(diǎn)線右邊框、虛線下邊框和一個(gè)雙線左邊框剖张。
div {
border: 1px solid #000;
border-radius: 10px
}
屬性分類
border 簡寫屬性切诀，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明
border-style dotted solid double dashed 點(diǎn)狀 實(shí)線 雙線 虛線 用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式搔弄。
border-width 簡寫屬性幅虑，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度
border-color 簡寫屬性顾犹，設(shè)置元素的所有邊框中可見部分的顏色倒庵，或?yàn)?4 個(gè)邊分別設(shè)置顏色
border-[bottom|top|left|right] 簡寫屬性，用于把上下左右邊框的所有屬性設(shè)置到一個(gè)聲明中
border-[bottom|top|left|right]-color 設(shè)置元素的上下左右邊框的顏色
border-[bottom|top|left|right]-style 設(shè)置元素的上下左右邊框的樣式
border-[bottom|top|left|right]-width 設(shè)置元素的上下左右邊框的寬度
border-radius 設(shè)置元素邊框圓角屬性
外邊距(margin)
圍繞在元素邊框的空白區(qū)域是外邊距炫刷。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”擎宝。設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個(gè)屬性接受任何長度單位浑玛、百分?jǐn)?shù)值甚至負(fù)值
body{margin: top right bottom left}
h1{margin: 10px 20px 10px 20px}
h1{margin: 10px 20px}
h1{margin: 10px}
屬性
margin 簡寫屬性绍申。在一個(gè)聲明中設(shè)置所有外邊距屬性
margin-top 設(shè)置元素的上外邊距
margin-right 設(shè)置元素的右外邊距
margin-bottom 設(shè)置元素的下外邊距
margin-left 設(shè)置元素的左外邊距
CSS樣式
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距极阅。
所有CSS 尺寸 (Dimension)屬性
屬性
描述
height
設(shè)置元素的高度胃碾。
line-height
設(shè)置行高。
max-height
設(shè)置元素的最大高度涂屁。
max-width
設(shè)置元素的最大寬度书在。
min-height
設(shè)置元素的最小高度。
min-width
設(shè)置元素的最小寬度拆又。
width
設(shè)置元素的寬度儒旬。
CSS背景(background)
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果帖族。
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
background-color 指定要使用的背景顏色
background-position 指定背景圖像的位置
background-size 指定背景圖片的大小
background-repeat 指定如何重復(fù)背景圖像
background-attachment 設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background-image 指定要使用的一個(gè)或多個(gè)背景圖像
background-position 屬性取值
值
描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果僅指定一個(gè)關(guān)鍵字栈源，其他值將會(huì)是"center"
x% y%
第一個(gè)值是水平位置，第二個(gè)值是垂直竖般。左上角是0％0％甚垦。右下角是100％100％。如果僅指定了一個(gè)值涣雕，其他值將是50％艰亮。 。默認(rèn)值為：0％0％
xpos ypos
第一個(gè)值是水平位置挣郭，第二個(gè)值是垂直迄埃。左上角是0。單位可以是像素（0px0px）或任何其他 CSS單位兑障。如果僅指定了一個(gè)值侄非，其他值將是50％。你可以混合使用％和positions
inherit
指定background-position屬性設(shè)置應(yīng)該從父元素繼承
background-attachment屬性取值
值
說明
scroll
背景圖片隨頁面的其余部分滾動(dòng)流译。這是默認(rèn)
fixed
背景圖像是固定的
inherit
指定background-attachment的設(shè)置應(yīng)該從父元素繼承
background-repeat屬性取值
值
說明
repeat
背景圖像將向垂直和水平方向重復(fù)逞怨。這是默認(rèn)
repeat-x
只有水平位置會(huì)重復(fù)背景圖像
repeat-y
只有垂直位置會(huì)重復(fù)背景圖像
no-repeat
background-image不會(huì)重復(fù)
inherit
指定background-repea屬性設(shè)置應(yīng)該從父元素繼承
CSS文本(Text)
CSS 文本屬性可定義文本的外觀。通過文本屬性福澡，您可以改變文本的顏色叠赦、字符間距，對(duì)齊文本革砸，裝飾文本眯搭，對(duì)文本進(jìn)行縮進(jìn)，等等
屬性
描述
color
設(shè)置文本顏色
direction
設(shè)置文本方向业岁。
line-height
設(shè)置行高鳞仙。
letter-spacing
設(shè)置字符間距。
text-align
對(duì)齊元素中的文本笔时。
text-indent
縮進(jìn)元素中文本的首行棍好。
text-shadow
設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性借笙。
text-transform
控制元素中的字母扒怖。
white-space
設(shè)置元素中空白的處理方式。
word-spacing
設(shè)置字間距业稼。
div {
text-indent: 10px;
color: red;
line-height: 1.5;
text-align: center;
white-space: nowrap;//不折行
}
```
### CSS字體(fonts)
CSS 字體屬性定義文本的字體系列盗痒、大小、加粗低散、風(fēng)格（如斜體）和變形（如小型大寫字母）俯邓。
body {
font-family: sans-serif;
font-style:normal;
font-weight:normal;
font-size:60px;
}
font-style 屬性最常用于規(guī)定斜體文本。
該屬性有三個(gè)值：
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體熔号。
關(guān)鍵字 100 ~ 900 為字體指定了 9 級(jí)加粗度稽鞭。如果一個(gè)字體內(nèi)置了這些
加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別引镊，100 對(duì)應(yīng)最細(xì)的字體
變形朦蕴，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal弟头，而 700 等
價(jià)于 bold吩抓。
#### 屬性
描述
font
簡寫屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中赴恨。
font-family
設(shè)置字體系列疹娶。
font-size
設(shè)置字體的尺寸屈溉。
font-style
設(shè)置字體風(fēng)格。
font-weight
設(shè)置字體的粗細(xì)失受。
###CSS鏈接(link)
為鏈接設(shè)置樣式
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
### CSS列表(ul)
CSS 列表屬性允許你放置勺阐、改變列表項(xiàng)標(biāo)志，或者將圖像作為列表項(xiàng)標(biāo)志
`li {list-style : url(example.gif) square inside}`
#### 屬性
描述
list-style
簡寫屬性匹舞。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。
list-style-image
將圖象設(shè)置為列表項(xiàng)標(biāo)志。
list-style-position
設(shè)置列表中列表項(xiàng)標(biāo)志的位置汛聚。
list-style-type
設(shè)置列表項(xiàng)標(biāo)志的類型。
list-style-type屬性值
####值
描述
none
無標(biāo)記短荐。
disc
默認(rèn)倚舀。標(biāo)記是實(shí)心圓。
circle
標(biāo)記是空心圓忍宋。
square
標(biāo)記是實(shí)心方塊痕貌。
decimal
標(biāo)記是數(shù)字。
decimal-leading-zero
0開頭的數(shù)字標(biāo)記糠排。(01, 02, 03, 等舵稠。)
Demo
### CSS表格(Table)
table, th, td{
border: 1px solid blue;
}
td{
height:50px;
vertical-align:bottom;
text-align:right;
}
th{
background-color:green;
color:white;
}
#### 屬性
描述
border-collapse
設(shè)置是否把表格邊框合并為單一的邊框。
border-spacing
設(shè)置分隔單元格邊框的距離。
caption-side
設(shè)置表格標(biāo)題的位置哺徊。
empty-cells
設(shè)置是否顯示表格中的空單元格室琢。
table-layout
設(shè)置顯示單元、行和列的算法盈滴。
### CSS 輪廓(outline)
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍轿钠，可起到突出元素的作用巢钓。CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度谣膳。
#### 屬性
描述
CSS
outline
在一個(gè)聲明中設(shè)置所有的輪廓屬性竿报。
outline-color
設(shè)置輪廓的顏色。
outline-style
設(shè)置輪廓的樣式继谚。
outline-width
設(shè)置輪廓的寬度烈菌。
p {
border:red solid thin;
outline:#00ff00 dotted thick;
}
## CSS定位(position)
CSS 定位 (Positioning) 屬性允許你對(duì)元素進(jìn)行定位，CSS 為定位和浮動(dòng)提供了一些屬性花履，利用這些屬性芽世，可以建立列式布局，將布局的一部分與另一部分重疊诡壁，定位的基本思想很簡單济瓢，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素妹卿、另一個(gè)元素甚至瀏覽器窗口本身的位置旺矾。
### static 定位
HTML 元素的默認(rèn)值，即沒有定位夺克，遵循正常的文檔流對(duì)象箕宙。靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
div.static {
position: static;
border: 3px solid #73AD21;
}
### 絕對(duì)定位(absolute)
設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除铺纽，并相對(duì)于其包含塊定位柬帕，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉狡门，就好像該元素原來不存在一樣陷寝。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框其馏。
box_relative {
position: absolute;
left: 30px;
top: 20px;
}
### 相對(duì)定位(relative)
設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離凤跑。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留
box_relative {
position: relative;
left: 30px;
top: 20px;
}
### 相對(duì)定位和絕對(duì)定位關(guān)系
在沒有父級(jí)元素定位時(shí)叛复，以瀏覽器的左上角為基準(zhǔn)
有父級(jí)的情況下饶火，父級(jí)設(shè)置相對(duì)定位鹏控，子級(jí)設(shè)置絕對(duì)定位 是以父盒子進(jìn)行定位的
html代碼
<div class="parent">
<div class="child"></div>
</div>
css代碼
.parent{
position: relative;
top: 10px;
left: 10px;
}
.child{
position: absolute;
top: 10px;
left: 10px;
}
### fixed 定位
元素的位置相對(duì)于瀏覽器窗口是固定位置,即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
### CSS 浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹狗羟蕖Ｓ捎诟?dòng)框不在文檔的普通流中当辐，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
html代碼
<div>
<span></span>
<span></span>
<span></span>
</div>
css代碼
span{
float:left;
width:50px;
height: 50px;
}
```
clear 屬性
阻止行框圍繞浮動(dòng)框鲤看，需要對(duì)該框應(yīng)用 clear 屬性缘揪。clear 屬性的值可以是 left、right义桂、both 或 none找筝，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
屬性
說明|值
bottom|定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移慷吊。
auto
length
%
inherit
clip
剪輯一個(gè)絕對(duì)定位的元素
shape
auto
inherit
cursor
顯示光標(biāo)移動(dòng)到指定的類型
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left
定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移袖裕。
auto
length
%
inherit
overflow
設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。
auto
hidden
scroll
visible
inherit
overflow-y
指定如何處理頂部/底部邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域
auto
hidden
scroll
visible
no-display
no-content
overflow-x
指定如何處理右邊/左邊邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域
auto
hidden
scroll
visible
no-display
no-content
position
指定元素的定位類型
absolute
fixed
relative
static
inherit
right
定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移溉瓶。
auto
length
%
inherit
top
定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移急鳄。
auto
length
%
inherit
z-index
設(shè)置元素的堆疊順序
number
auto
inherit
Display(顯示) 與 Visibility（可見性）
隱藏元素 - display:none或visibility:hidden
隱藏一個(gè)元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"堰酿。但是請(qǐng)注意疾宏，這兩種方法會(huì)產(chǎn)生不同的結(jié)果。visibility:hidden可以隱藏某個(gè)元素触创，但隱藏的元素仍需占用與未隱藏之前一樣的空間坎藐。也就是說，該元素雖然被隱藏了哼绑，但仍然會(huì)影響布局岩馍。
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
CSS Display - 塊和內(nèi)聯(lián)元素
塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始抖韩，而且其后的元素也必須另起一行顯示;
寬度(width)蛀恩、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)帽蝶、高度(height)赦肋、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變块攒，就是里面文字或圖片的大小;
塊級(jí)元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內(nèi)聯(lián)元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變?cè)?根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級(jí)励稳、內(nèi)聯(lián)元素的應(yīng)用：
利用CSS我們可以擺脫上面表格里HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽/元素上應(yīng)用我們需要的屬性囱井。
主要用的CSS樣式有以下三個(gè)：
display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素驹尼，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了庞呕。
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的布局模式新翎。CSS3 彈性盒（ Flexible Box 或 flexbox）程帕，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列地啰、對(duì)齊和分配空白空間愁拭。
彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器亏吝。彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素岭埠。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
flex-direction
flex-direction 屬性指定了彈性子元素在父容器中的位置。
語法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：橫向從左到右排列（左對(duì)齊）蔚鸥，默認(rèn)的排列方式惜论。
row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排止喷，最后一項(xiàng)排在最前面馆类。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列弹谁，從后往前排乾巧，最后一項(xiàng)排在最上面。
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
justify-content 屬性
內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上僵闯，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對(duì)齊卧抗。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各個(gè)值解析:
flex-start：彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(rèn)值鳖粟。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線社裆，而后續(xù)彈性項(xiàng)依次平齊擺放。
flex-end：彈性項(xiàng)目向行尾緊挨著填充向图。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線泳秀，而后續(xù)彈性項(xiàng)依次平齊擺放。
center：彈性項(xiàng)目居中緊挨著填充榄攀。（如果剩余的自由空間是負(fù)的嗜傅，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。
space-between：彈性項(xiàng)目平均分布在該行上檩赢。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)吕嘀，則該值等同于flex-start。否則贞瞒，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊偶房，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上军浆，相鄰項(xiàng)目的間隔相等棕洋。
space-around：彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間乒融。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)掰盘，則該值等同于center摄悯。否則，彈性項(xiàng)目沿該行分布愧捕，且彼此間隔相等（比如是20px）奢驯，同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
width: 400px;
height: 250px;
background-color: lightgrey;
}
align-items 屬性
align-items 設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式次绘。
語法
align-items: flex-start | flex-end | center | baseline | stretch
各個(gè)值解析:
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界叨橱。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置断盛。（如果該行的尺寸小于彈性盒子元素的尺寸罗洗，則會(huì)向兩個(gè)方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條钢猛，則該值與'flex-start'等效伙菜。其它情況下，該值將參與基線對(duì)齊命迈。
stretch：如果指定側(cè)軸大小的屬性值為'auto'贩绕，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制壶愤。
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 400px;
height: 250px;
background-color: lightgrey;
}
flex-wrap 屬性
flex-wrap 屬性用于指定彈性盒子的子元素?fù)Q行方式淑倾。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個(gè)值解析:
nowrap - 默認(rèn)， 彈性容器為單行征椒。該情況下彈性子項(xiàng)可能會(huì)溢出容器娇哆。
wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行勃救，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
wrap-reverse -反轉(zhuǎn) wrap 排列碍讨。
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
彈性子元素屬性
排序
語法
order:
各個(gè)值解析:
<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面蒙秒〔颍可以為負(fù)值。
order 屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:
對(duì)齊
設(shè)置"margin"值為"auto"值晕讲，自動(dòng)獲取彈性容器中剩余的空間覆获。所以設(shè)置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中瓢省。
以下實(shí)例在第一個(gè)彈性子元素上設(shè)置了 margin-right: auto; 弄息。 它將剩余的空間放置在元素的右側(cè)：
完美的居中
以下實(shí)例將完美解決我們平時(shí)碰到的居中問題。
使用彈性盒子净捅，居中變的很簡單疑枯，只想要設(shè)置 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:
align-self
align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式辩块。
語法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各個(gè)值解析:
auto：如果'align-self'的值為'auto'蛔六，則其計(jì)算值為元素的父元素的'align-items'值荆永，如果其沒有父元素，則計(jì)算值為'stretch'国章。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界具钥。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置液兽。（如果該行的尺寸小于彈性盒子元素的尺寸骂删，則會(huì)向兩個(gè)方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條四啰，則該值與'flex-start'等效宁玫。其它情況下，該值將參與基線對(duì)齊柑晒。
stretch：如果指定側(cè)軸大小的屬性值為'auto'欧瘪，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制匙赞。
flex
flex 屬性用于指定彈性子元素如何分配空間佛掖。
語法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個(gè)值解析:
auto: 計(jì)算值為 1 1 auto
initial: 計(jì)算值為 0 1 auto
none：計(jì)算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率涌庭。
[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值芥被。
CSS3 彈性盒子屬性
屬性
描述
display
指定 HTML 元素盒子類型。
flex-direction
指定了彈性容器中子元素的排列方式
justify-content
設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式坐榆。
align-items
設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式拴魄。
flex-wrap
設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行。
align-content
修改 flex-wrap 屬性的行為席镀，類似 align-items, 但不是設(shè)置子元素對(duì)齊羹铅，而是設(shè)置行對(duì)齊
flex-flow
flex-direction 和 flex-wrap 的簡寫
order
設(shè)置彈性盒子的子元素排列順序。
align-self
在彈性子元素上使用愉昆。覆蓋容器的 align-items 屬性职员。
flex
設(shè)置彈性盒子的子元素如何分配空間。
垂直居中方案
方法1：table-cell
html結(jié)構(gòu)：
<div class="box box1"><span>垂直居中</span></div>
css
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2：display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
```
方法3：絕對(duì)定位和負(fù)邊
.box3{position:relative;}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方法4：絕對(duì)定位和0
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
這種方法跟上面的有些類似跛溉，但是這里是通過margin:auto和top,left,right,bottom都設(shè)置為0實(shí)現(xiàn)居中焊切，很神奇吧。不過這里得確定內(nèi)部元素的高度芳室，可以用百分比专肪，比較適合移動(dòng)端。
方法5：translate
這實(shí)際上是方法3的變形堪侯，移位是通過translate來實(shí)現(xiàn)的嚎尤。
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
方法6：display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
這種方法確實(shí)巧妙...通過:after來占位。
方法7：display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{margin: auto;
