什么是CSS
CSS是層疊樣式表兵迅，用于控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn)冰抢，使得網(wǎng)頁(yè)數(shù)據(jù)和表現(xiàn)分離甜紫。
CSS引入的四種方式
-
行內(nèi)式（內(nèi)聯(lián)）
行內(nèi)式就是在標(biāo)簽內(nèi)部的style屬性編輯控制方式降宅，這種方式，不能體現(xiàn)css的優(yōu)勢(shì)囚霸，不推薦腰根！
<p style="background-color: rebeccapurple">hello css</p>
-
嵌入式
嵌入式指的是在head標(biāo)簽中，嵌入style標(biāo)簽控制對(duì)應(yīng)的標(biāo)簽
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: rebeccapurple;
}
</style>
</head>
- 鏈接式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css">
</head>
-
導(dǎo)入式
同樣在head標(biāo)簽中嵌套style拓型，然后在style里導(dǎo)入css文件鏈接
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "1.css";
</style>
</head>
注意：使用導(dǎo)入式额嘿，css是在整個(gè)頁(yè)面都加載后再導(dǎo)入的瘸恼，這樣就可能導(dǎo)致網(wǎng)頁(yè)在一個(gè)短時(shí)間內(nèi)處于雜亂的狀態(tài)。但是鏈接式不一樣册养，他是在加載網(wǎng)頁(yè)內(nèi)容前东帅，先導(dǎo)入的，所以不存在這個(gè)問(wèn)題球拦。
CSS選擇器
- 基礎(chǔ)選擇器
*:通用元素選擇器靠闭，控制所有的標(biāo)簽
*{background-color: rebeccapurple}
E:標(biāo)簽選擇器，控制所有該標(biāo)簽的樣式
p*{background-color: rebeccapurple}
.info class選擇器 也可以具體指定某個(gè)標(biāo)簽下的選擇器
E .class .abc{background-color: rebeccapurple}
div .abc{background-color: red}
#info E #info id 選擇器坎炼。 ID是唯一的愧膀，class也可以不唯一。
#abc{background-color: rebeccapurple}
div #abc{background-color: red}
- 組合選擇器
E,F 多元素選擇器谣光，同時(shí)控制多個(gè)元素檩淋。
div,a{background-color: rebeccapurple}
E F 后代選擇器，注意空格萄金。
E>F 子選擇器
E+F 毗鄰選擇器蟀悦，找到緊跟著E后面的F。
注意：后代選擇器是包括子孫后代捡絮，子選擇器只包括子代
- 屬性選擇器
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屬性具有多個(gè)空格分隔的值的圆、其中一個(gè)值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開(kāi)頭的每個(gè)元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結(jié)尾的每個(gè)元素
div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個(gè)元素
div[class*="test"]{background:#ffff00;}
-
偽類(lèi)
用于給選擇器，增加一些效果半火。
a:link 控制沒(méi)接觸過(guò)的鏈接
a:hover 鼠標(biāo)放在上面時(shí)
a:visited 已經(jīng)訪問(wèn)的鏈接
a:active 選定的時(shí)候
-
偽元素
標(biāo)準(zhǔn)的偽元素應(yīng)該使用::越妈，但單:也行，只是為了兼容钮糖。
E:first-letter 向文本的第一個(gè)字母添加特殊樣式梅掠。
E:first-line 向文本的首行添加特殊樣式。
E:before 在元素之前添加內(nèi)容店归。
E:after 在元素之后添加內(nèi)容阎抒。
CSS的繼承和優(yōu)先級(jí)
css繼承
所謂的繼承就是說(shuō)父標(biāo)簽的部分屬性可以被后代繼承，但是這個(gè)權(quán)重是非常低的消痛，只要是有相同的屬性控制且叁，就可以直接被覆蓋。有部分屬性是無(wú)法被繼承的:border, margin, padding, background等
css優(yōu)先級(jí)
css優(yōu)先級(jí)是指在多個(gè)選擇器同時(shí)控制同一個(gè)標(biāo)簽時(shí)秩伞，應(yīng)該選擇哪一個(gè)逞带。
important > 內(nèi)嵌 > ID > 類(lèi) > 標(biāo)簽 | 偽類(lèi) | 屬性選擇 > 偽對(duì)象 > 繼承 > 通配符
權(quán)重欺矫、特殊性計(jì)算法：
- 內(nèi)聯(lián)樣式表權(quán)重為1000
- ID，一個(gè)ID權(quán)重為100
- class展氓，權(quán)重為10
- 標(biāo)簽穆趴， 權(quán)重為1
計(jì)算方式是逐個(gè)累加。 比如 div .aaa權(quán)重為1+10
!important
有這個(gè)聲明的優(yōu)先級(jí)是最高的遇汞，除非沖突不然無(wú)視一切毡代。當(dāng)沖突時(shí)，再使用權(quán)重比較勺疼。
CSS常用屬性
顏色屬性
<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>
字體屬性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">hello</h1>
背景屬性
background-color: cornflowerblue;
background-image: url('1.jpg');
background-repeat: no-repeat; (repeat:平鋪滿(mǎn))
background-position: right top（20px 20px); (橫向：left center right)
(縱向：top center bottom)
文本屬性
font-size: 10px;
text-align: center; 橫向排列
line-height: 200px; 文本行高 通俗的講教寂，文字高度加上文字上下的空白區(qū)域的高度 50%:基于字體大小的百分比
vertical-align:－4px 設(shè)置元素內(nèi)容的垂直對(duì)齊方式 ,只對(duì)行內(nèi)元素有效，對(duì)塊級(jí)元素?zé)o效
text-indent: 150px; 首行縮進(jìn)
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
邊框?qū)傩?/h3>
border-color: red;
border-style: dashed;
border-width: 1px;
可以簡(jiǎn)寫(xiě)為：border：1px dashed 1px
display屬性
none
block
inline
inline-block
其中inline-block拼接的兩個(gè)元素中間有小空隙执庐，可以通過(guò)下面的方法去掉 在外層div下酪耕，word-spacing: -5px;
外邊距，內(nèi)邊距
margin 外邊距
padding 內(nèi)邊距
border 邊框
content 內(nèi)容
刻度
border-color: red;
border-style: dashed;
border-width: 1px;
可以簡(jiǎn)寫(xiě)為：border：1px dashed 1px
none
block
inline
inline-block
其中inline-block拼接的兩個(gè)元素中間有小空隙执庐，可以通過(guò)下面的方法去掉 在外層div下酪耕，word-spacing: -5px;
margin 外邊距
padding 內(nèi)邊距
border 邊框
content 內(nèi)容
在CSS中刻度是用于設(shè)置元素尺寸的單位轨淌。
長(zhǎng)度單位包括包括：相對(duì)單位和絕對(duì)單位迂烁。
相對(duì)長(zhǎng)度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對(duì)長(zhǎng)度單位包括有： cm, mm, q, in, pt, pc, px
絕對(duì)長(zhǎng)度單位
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
動(dòng)態(tài)計(jì)算長(zhǎng)度值
calc() = calc(四則運(yùn)算)
- 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格递鹉，例如：width: calc(100% - 10px)盟步；
- 任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算；
- calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算躏结；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則却盘；
文本相對(duì)長(zhǎng)度單位
em
相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸媳拴。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置黄橘，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(相對(duì)父元素的字體大小倍數(shù))
瀏覽器的默認(rèn)字體大小為16像素屈溉，瀏覽器默認(rèn)樣式也稱(chēng)為user agent stylesheet塞关，就是所有瀏覽器內(nèi)置的默認(rèn)樣式，多數(shù)是可以被修改的子巾，但chrome不能直接修改帆赢，可以被用戶(hù)樣式覆蓋。
rem
rem是CSS3新增的一個(gè)相對(duì)單位（root em线梗，根em）椰于，相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)
只相對(duì)于根元素的大小
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位缠导×幔看到rem大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似憋他，只不過(guò)一個(gè)計(jì)算的規(guī)則是依賴(lài)根元素一個(gè)是依賴(lài)父元素計(jì)算孩饼。（相對(duì)是的HTML元素的字體大，默認(rèn)16px）
盒模型
CSS盒子模型：網(wǎng)頁(yè)設(shè)計(jì)中CSS技術(shù)所使用的一種思維模型竹挡。
CSS盒子模型組成：外邊距（margin）镀娶、邊框（border）、內(nèi)邊距（padding）揪罕、內(nèi)容（content）梯码。
CSS盒子模型分為：標(biāo)準(zhǔn)W3C盒子模型，IE盒子模型好啰，注意在兩種模型中寬（width）和高（height）包括屬性的不同轩娶。
W3C模型中
CSS中的寬（width）=內(nèi)容（content）的寬
CSS中的高（height）=內(nèi)容（content）的高
IE模型中
CSS中的寬（width）=內(nèi)容（content）的寬+（border+padding）* 2
CSS中的高（height）=內(nèi)容（content）的高+（border+padding）* 2
在代碼頂部加如下的 doctype 聲明
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
使頁(yè)面以W3C盒子模型渲染。
box-sizing屬性
-
content-box
padding和border不被包含在定義的width和height之內(nèi)框往。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border鳄抒、padding之和，即 ( Element width = width + border + padding椰弊，但占有頁(yè)面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型许溅。 -
border-box
padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值秉版，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度贤重，即 ( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。
css繪圖
根據(jù)盒模型清焕，設(shè)置content為0并蝗，展示border，通過(guò)控制隱藏部分邊框耐朴，繪制三角形借卧、梯形盹憎。
外邊距疊加
在CSS中筛峭，兩個(gè)或多個(gè)毗鄰的標(biāo)準(zhǔn)流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會(huì)發(fā)生疊加陪每，這種形成的外邊距稱(chēng)之為外邊距疊加影晓。
-
毗鄰
毗鄰說(shuō)明了他們的位置關(guān)系，沒(méi)有被padding檩禾、border挂签、clear和line box分隔開(kāi)。 -
兩個(gè)或多個(gè)
兩個(gè)或多個(gè)盒子是指元素之間的相互影響盼产，單個(gè)元素不會(huì)存在外邊距疊加的情況饵婆。 -
垂直方向
只有垂直方向的外邊距會(huì)發(fā)生外邊距疊加。水平方向的外邊距不存在疊加的情況戏售。 -
標(biāo)準(zhǔn)流
元素會(huì)默認(rèn)自動(dòng)從左往右侨核，從上往下的流式排列方式草穆。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素搓译。只要不是float悲柱、absolutely positioned和root element時(shí)就是標(biāo)準(zhǔn)流。
解決外邊距疊加
- 浮動(dòng)元素不會(huì)與任何元素發(fā)生疊加些己，也包括它的子元素
- 創(chuàng)建了BFC的元素不會(huì)和它的子元素發(fā)生外邊距疊加
- 絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加豌鸡，也包括它的子元素
- inline-block元素和其他任何元素之間不發(fā)生外邊距疊加，也包括它的子元素
- 普通流中的塊級(jí)元素的margin-bottom永遠(yuǎn)和它相鄰的下一個(gè)塊級(jí)元素的margin-top疊加段标，除非相鄰的兄弟元素clear
- 普通流中的塊級(jí)元素（沒(méi)有border-top涯冠、沒(méi)有padding-top）的margin-top和它的第一個(gè)普通流中的子元素（沒(méi)有clear）發(fā)生margin-top疊加
- 普通流中的塊級(jí)元素（height為auto、min-height為0逼庞、沒(méi)有border-bottom功偿、沒(méi)有padding-bottom）和它的最后一個(gè)* * 普通流中的子元素（沒(méi)有自身發(fā)生margin疊加或clear）發(fā)生margin-bottom疊加
- 如果一個(gè)元素的min-height為0、沒(méi)有border往堡、沒(méi)有padding械荷、高度為0或者auto、不包含子元素虑灰，那么它自身的外邊距會(huì)發(fā)生疊加
BFC與IFC
BFC（Block Formatting Context）即“塊級(jí)格式化上下文”吨瞎。
IFC（Inline Formatting Context）即行內(nèi)格式化上下文。
常規(guī)流（也稱(chēng)標(biāo)準(zhǔn)流穆咐、普通流）是一個(gè)文檔在被顯示時(shí)最常見(jiàn)的布局形態(tài)颤诀。
BFC決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用对湃。當(dāng)涉及到可視化布局的時(shí)候崖叫，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局拍柒。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局心傀。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響拆讯，兩個(gè)浮動(dòng)元素之間是互不影響的脂男。也可以說(shuō)BFC就是一個(gè)作用范圍。
如何產(chǎn)生BFC
如何產(chǎn)生BFC
當(dāng)一個(gè)HTML元素滿(mǎn)足下面條件的任何一點(diǎn)种呐，都可以產(chǎn)生Block Formatting Context：
- float的值不為none
- overflow的值不為visible
- display的值為table-cell, table-caption, inline-block中的任何一個(gè)
- position的值不為relative和static
CSS3觸發(fā)BFC方式則可以簡(jiǎn)單描述為：在元素定位非static,relative的情況下觸發(fā)宰翅，float也是一種定位方式。
BFC的作用與特點(diǎn)
- 不和浮動(dòng)元素重疊爽室，清除外部浮動(dòng)汁讼，阻止浮動(dòng)元素覆蓋
- 清除元素內(nèi)部浮動(dòng)，計(jì)算浮動(dòng)元素的高度
- 外邊距將不再與上下文之外的元素折疊
- 元素會(huì)一個(gè)接一個(gè)地被垂直放置，它們的起點(diǎn)是一個(gè)包含塊的頂部（文字不會(huì)環(huán)繞布局）
定位
position
position：static | relative | absolute | fixed | center | page | sticky
默認(rèn)值：static嘿架，center卜录、page、sticky是CSS3中新增加的值眶明。
-
static
可以認(rèn)為靜態(tài)的艰毒，默認(rèn)元素都是靜態(tài)的定位，對(duì)象遵循常規(guī)流搜囱。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用丑瞧，也就是使用left，right蜀肘，bottom绊汹，top將不會(huì)生效。 -
relative
相對(duì)定位扮宠，對(duì)象遵循常規(guī)流西乖，并且參照自身在常規(guī)流中的位置通過(guò)top，right坛增，bottom获雕，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。 -
absolute
絕對(duì)定位收捣，對(duì)象脫離常規(guī)流届案，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素(position的屬性值為非static)，如果沒(méi)有定位的祖先元素罢艾，則一直回溯到body元素楣颠。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊咐蚯。 -
fixed
固定定位童漩，與absolute一致，但偏移定位是以窗口為參考春锋。當(dāng)出現(xiàn)滾動(dòng)條時(shí)矫膨，對(duì)象不會(huì)隨著滾動(dòng)。 -
center
與absolute一致看疙，但偏移定位是以定位祖先元素的中心點(diǎn)為參考豆拨。盒子在其包含容器垂直水平居中。（CSS3） -
page
與absolute一致能庆。元素在分頁(yè)媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊脚线，否則取決于每個(gè)absolute模式搁胆。（CSS3） -
sticky
對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版渠旁，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed攀例。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。（CSS3）
z-index屬性
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別顾腊，并確定該元素是否創(chuàng)建新的局部層疊上下文粤铭。
當(dāng)多個(gè)元素層疊在一起時(shí)，數(shù)字大者將顯示在上面杂靶。
auto：元素在當(dāng)前層疊上下文中的層疊級(jí)別是0梆惯。元素不會(huì)創(chuàng)建新的局部層疊上下文，除非它是根元素吗垮。
整數(shù)：用整數(shù)值來(lái)定義堆疊級(jí)別垛吗。可以為負(fù)值烁登。 說(shuō)明：
檢索或設(shè)置對(duì)象的層疊順序怯屉。
:target偽類(lèi)
E:target { css }
URL后面跟錨點(diǎn)#，指向文檔內(nèi)某個(gè)具體的元素饵沧。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)锨络，:target選擇器用于選取當(dāng)前活動(dòng)的目標(biāo)元素。只有支持CSS3的瀏覽器可用狼牺。
float浮動(dòng)
float取值
- none：設(shè)置對(duì)象不浮動(dòng)足删，默認(rèn)值
- left：設(shè)置對(duì)象浮在左邊
- right：設(shè)置對(duì)象浮在右邊
float的特性
- 浮動(dòng)元素會(huì)從標(biāo)準(zhǔn)流中脫離
- 浮動(dòng)元素會(huì)觸發(fā)BFC（塊級(jí)元素格式化）、不影響外邊距折疊
- float元素會(huì)變成塊標(biāo)簽
如果float不是none锁右，當(dāng)display:inline-table時(shí)失受，display的計(jì)算值為table；當(dāng)display:inline | inline-block | run-in | table-* 系時(shí)咏瑟，display的計(jì)算值為block拂到，其它情況為指定值。 - float在絕對(duì)定位和display為none時(shí)不生效
當(dāng)display為none時(shí)元素會(huì)隱藏码泞，所以float意義不大兄旬；當(dāng)position為absolute絕對(duì)定位時(shí)元素也將從標(biāo)準(zhǔn)流中脫離，元素使用偏移量移動(dòng)余寥，float特性無(wú)效领铐。 - 浮動(dòng)元素間會(huì)堆疊
- 浮動(dòng)元素不能溢出包含塊
浮動(dòng)元素在包含塊內(nèi)，當(dāng)包含塊的寬度不足以容下浮動(dòng)的子元素時(shí)宋舷，將自動(dòng)折行绪撵；垂直方向當(dāng)包含塊認(rèn)為浮動(dòng)的子元素沒(méi)有高度時(shí)，子元素會(huì)溢出祝蝠，BFC能解決該問(wèn)題音诈。水平方向不會(huì)溢出幻碱，垂直方向有可能會(huì)溢出。 - 相鄰的浮動(dòng)元素细溅，left屬性最前面的元素褥傍，排在最左邊
- 相鄰的浮動(dòng)元素，right屬性最前面的元素喇聊，排在最右邊
- 包含塊不會(huì)計(jì)算浮動(dòng)元素的高寬
- 浮動(dòng)元素與非浮動(dòng)元素會(huì)重疊恍风，擠出塊中的內(nèi)容
清除浮動(dòng)
該屬性的值指出了不允許有浮動(dòng)對(duì)象的邊。
clear：none | left | right | both
適用于：塊級(jí)元素
取值：
- none： 允許兩邊都可以有浮動(dòng)對(duì)象
- both： 不允許有浮動(dòng)對(duì)象
- left： 不允許左邊有浮動(dòng)對(duì)象
- right： 不允許右邊有浮動(dòng)對(duì)象
清除外部浮動(dòng)
需要注意的是clear是用于控制元素本身的誓篱，不能影響別的元素朋贬。
清除內(nèi)部浮動(dòng)
當(dāng)一個(gè)包含塊內(nèi)部有浮動(dòng)元素時(shí)，外部塊不會(huì)計(jì)算浮動(dòng)塊的高度與寬度燕鸽，為了讓內(nèi)部的浮動(dòng)元素?fù)伍_(kāi)包含塊兄世，需要還原高度，暫且稱(chēng)為清除內(nèi)部浮動(dòng)啊研。
- BFC
- 增加一個(gè)空的div御滩，清除浮動(dòng)
