CSs概述?
cascading style sheets? 層疊樣式表? 簡稱為樣式表? 2.作用? 用來去設(shè)置html網(wǎng)頁元素的樣式
css與html的關(guān)系? ? html是標(biāo)記? 是搭建網(wǎng)頁主體結(jié)構(gòu)的·內(nèi)容? 是 內(nèi)容的展示? css是負(fù)責(zé)修飾頁面內(nèi)容? 即負(fù)責(zé)修飾頁面的樣式? 盡量用css屬性去替代html的屬性?
1.內(nèi)聯(lián)樣式：即是行內(nèi)樣式? <any? style=' color：red'></any>? 樣式申明? 就是由樣式的屬性名稱和值組成?
屬性名稱與值之間用? 冒號連接? ?
常用的樣式：用來設(shè)置文本顏色的屬和值? ? 屬性：color? 只要是合法的顏色值? ?
設(shè)置文字的大小? 以px或p為單的大小?
內(nèi)控樣式 ：網(wǎng)頁的頭元素中去增加一對style標(biāo)記? 在·style中去聲明該網(wǎng)頁的樣式
選擇器是什么? 專門用來規(guī)范頁面哪些元素能夠去使用聲明好的樣式? 就是把聲明好的樣式給元素? 有選擇器決定? ?
基礎(chǔ)選擇器：元素選擇器? 指的就是由元素的名稱來作為選擇器的? ?
選擇器{
樣式的聲明?
}
寫在頭元素中?
外部樣式? 在幔摸。css外部文件中聲明文件規(guī)格?
使用步驟：1.創(chuàng)建樣式表文件
2.在樣式表中創(chuàng)建樣式規(guī)格? 3.
在網(wǎng)頁中去對樣式引入
css的樣式特征：
1.繼承性菲语；
必須是父子結(jié)構(gòu)，即層疊關(guān)系? 大部分的css的樣式? 是可以被直接繼承的? ?
css的樣式特征?
不僅僅限于一級嵌套? 也可以是多嵌套? ?
2.層疊性：
給一個元素去定義多個樣式規(guī)格
如果不沖突韵洋，name可以同時應(yīng)用到當(dāng)前格式?
默認(rèn)優(yōu)先級? 由低到高?
瀏覽器和默認(rèn)級別低? ? 外部和內(nèi)部就近原則捧颅；
即內(nèi)聯(lián)樣式 行內(nèi)樣式 優(yōu)先級最高? ?
景图！important原則? 顯示優(yōu)先級? ? 樣式屬性：值? ！important 碉哑；? 這個值一定優(yōu)先使用?
選擇器：css中基礎(chǔ)選擇器?
規(guī)范了頁面中哪些元素能夠使用聲明好的樣式?
用來匹配頁面所有元素的選擇器叫做通用選擇器?
*{樣式聲明}? 效率低? 盡量少用? 用body{}
只匹配頁面中的某一種或某一類元素?
3.類選擇器 ：定義頁面上某個或者某些元素的樣式? 是公共樣式? 聲明.名稱類名? {樣式聲明}? 注意：1
點(diǎn)不能省略? 2.類名稱不能以數(shù)字開頭3.不能包含特殊字符
_ -可以包含? 多個類名用空格? 連接?
id選擇器? 設(shè)置指定id元素的樣式? #id{樣式聲明 }
群組選擇器? 將多個選擇器放在一起進(jìn)行樣式的選擇聲明?
選擇器1挚币，選擇器2亮蒋，選擇器3{樣式聲明}? ? ?
4.后代選擇器?
通過元素的后代關(guān)系來匹配元素?
也就是數(shù)哦嵌套關(guān)系? ? 一級或者是多余一級的嵌套關(guān)系? 語法結(jié)構(gòu)? 選擇器1 選擇器2{樣式聲明}? ? 多級嵌套
一級嵌套是子代選擇器? 用>號連接?
偽類選擇器
:link訪問之前
：visited訪問之后
：hover懸停狀態(tài)
：active點(diǎn)擊狀態(tài)
：focus匹配元素獲取焦點(diǎn)的狀態(tài)?
權(quán)值標(biāo)識當(dāng)前選擇器的重要程度? 權(quán)值越大? 優(yōu)先級越高? 元素選擇器1? ? 類選擇器10? 偽類10? id100? 內(nèi)聯(lián)? 1000? ?
i 選擇器的·權(quán)值加在一起? 大的優(yōu)先? 如果? 相同? 則以 靠近的·為主?
尺寸與邊框：
px,pt：一般描述文字的大小? ?
in英寸?
1in=2.54cm?
pt磅值? 1pt=1/72 in? 1p=2.54/72cm
cm? mm? ? ? em相對于父元素去乘以倍數(shù) rem相對于根元素的字體大小乘以倍數(shù) 即是相對于body或html? ? 一般做移動端來控制? %相對于父元素來說所占的百分比
描述顏色的取值 ：
1.顏色的英文單詞?
2.rgba? rgb（r,g,b,a）? 0-255之間的數(shù)字? rgb里也可以加%? a取值是0-1之間的數(shù)字? 1是無透明度·?
3. 十六進(jìn)制的表示方法?
#cccc? #? ?
#rrggbb? 0-或a-f組成?
直接用#rgb? ?
2.尺寸的屬性?
作用：改變元素的看度和高度?
width? min-width
max-width
height
min-height
max-height
塊及元素：div p span h1 ul ol dl? header ....結(jié)構(gòu)標(biāo)記?
行內(nèi)塊元素：? 表單控件? 除了單選按鈕和復(fù)選框之外? 其他的都可以設(shè)置尺寸?
本身具備width和height屬性的元素?
image?
大部分的行內(nèi)元素都無法修改尺寸?
關(guān)于溢出的處理?
當(dāng)內(nèi)容多二區(qū)域小就會產(chǎn)生溢出? 默認(rèn)溢出方向都是縱向? 屬性：overflow; overflow-x;overflow-y;? 第一個同時處理xy 方向的?
取值：visible 可見的? 溢出可見?
hidden隱藏? 溢出的內(nèi)容全部隱藏起起來?
3.scroll? 滾動溢出時出現(xiàn)滾動條
4.auto 自動? 指的是溢出的·1時候自動出現(xiàn)滾動條?
一般用的最多的是auto? ?
border的width指的是邊框的·寬度? 以px為單位?
style用來描述邊框的樣式? ? ?
取值：solid? dotted虛線? ? dashed虛線 斷斷續(xù)續(xù)仙橋
color指的是邊框的顏色? ? 特殊的顏色：transparent 透明的? ?
取消input邊框? border值為none或?yàn)??
設(shè)置單邊框?
只設(shè)置某一條邊框的屬性? border-top，bottom妆毕，left慎玖，right
單屬性的設(shè)置 ：指的是設(shè)置一條邊的某一個屬性?
border-width/style:solid/color/?
修改四條邊樣式為dashed
border-top-color:red? 定義某一條邊的某一個屬性?
邊框boreder-radius? 指將元素的四個直角可以倒成圓角
取值：以px為單位的數(shù)值
單角設(shè)置border-top-left
邊框的陰影? 屬性：指的是box-shadow ；取值：h-shadow:表示陰影在水平方向的偏移距離 是個必須值 取值可為證未負(fù)向左偏移笛粘，v-shadow：垂直方向凄吏，指陰影在垂直方向的偏移值是必須值 正表示下 負(fù)表示上 blur：描述陰影的模糊的距離 取值越大? 模糊的效果越明顯 一般情況都是px為單位的數(shù)值? spread描述陰影的尺寸? 即大小? 指定要在陰影的基礎(chǔ)上擴(kuò)充出來的距離color陰影的顏色 inset ：將默認(rèn)的外陰影改成內(nèi)陰影效果? ?
7.輪廓：指的是邊框的邊框?
pre是預(yù)格式化?
塊及元素垂直外邊距相遇? 合并以大的值為主? ? 行內(nèi)元素? ? 外邊距溢出? 父元素沒有上邊框? ? 可能會?
第一個子元素的位置增加<table>?
padding會改變邊框所增加的范圍
box-sizing：border-box默認(rèn)框模型計算方法啊? ?
content-box默認(rèn)的計算方式?
border元素的尺寸包含border以及padding的值?
占地? width+margin? width包含了border和padding
background-color：專門定義背景色?
背景顏色默認(rèn)從邊框位置開始填充
background-image：url（）；
background-repeat? norepeat?
repeat默認(rèn)平鋪? repeat-x橫向平鋪
repeat-y 縱向平鋪
no-repeat? 不平鋪? ?
圖片大小? background-size：width height
100%? 專門設(shè)置背景圖像的大俠?
cover 取值是覆蓋的意思? 將圖片等比放大? 直到背景圖完全覆蓋到所有區(qū)域 為止?
contain包將背景圖進(jìn)行等比的放大? 直到背景圖噴到某一個邊緣為止? ?
5.背景圖像的固定
屬性 background-attachment將背景圖固定在某個人位置? 一直定在可視化范圍內(nèi)? ? 取值：fixed? ? 默認(rèn)scroll
改變背景圖在元素中的位置 ：background-position
取值方式：1.relative?
2.absolute
3.fixed
1.x y? x水平方向的偏右? 取值為證? 向右偏移? ? y垂直偏移 取值為證? 向下偏移?
可以取值為%比或者px? ? ?
margin-right=
7.背景屬性的簡寫方式? ? backgroung：? color? url? repeat attachment position?
注意? 如果不設(shè)置其中某個值的話 該位置? 將采用默認(rèn)值? 三闰蛔、漸變填充
1.漸變：指的是多種顏色平緩變化的變換效果
色標(biāo)：一種顏色及其出現(xiàn)的位置? 一個漸變一般都是有多重色標(biāo)組成?
分分類：1.線性漸變? 以直線的方向來填充漸變色
2.徑向漸變? 以圓形的方式來實(shí)現(xiàn)填充效果
3.重復(fù)漸變? 將線性漸變和徑向漸變重復(fù)幾次來實(shí)現(xiàn)漸變效果?
線性漸變：屬性background-image：
取值：關(guān)鍵詞 linear線性-gradient剃度（angle，color-point1）
angle的取值：to top? ? ? 從上下向上去進(jìn)行填充漸變? 2.to bottom從上到下? to left to right 從左向右來填充漸變? ? ? 2.可以用具體角度值? 0deg? 0度? 相當(dāng)于to top?
.color-point ：指的是色標(biāo)? 表示得是顏色以及位置的組合? 中間用空格隔開?
red 0%? 在填充位置的開始處為個紅色
green %50? 到填充一半的位置處顏色為綠色?
blue 200px? 到填充方式向的200px的位置處顏色變?yōu)樗{(lán)色
徑向漸變? background-image?
取值 ：radial-gradient? （[size at position],color-point1）? size表示圓的半徑? 以px為單位的數(shù)字? ? positi?on圓心的位置?
1.具體數(shù)字：xy
2.x%图柏，y%：元素寬的高的占比
3.可以用關(guān)鍵詞? ? left center right? ? y top center. bottom
background-image:repeating-linerar-gradient（angle序六，color-point）? ?
徑向漸變 background-image:repeating-radial-gradient（size at position，color-point）? ?
重復(fù)時color-point一定要給絕對數(shù)字加顏色單位?
webkit谷歌兼容性處理
在低版本瀏覽器中加前綴：
對于不支持的瀏覽器可以增加瀏覽器前綴? 來讓瀏覽器增加前綴? chrome/safari:-webkit-
firefox:-moz-
opera:-a-?
ie:-ms-?
4.文本格式化的屬性? ：
1.字體的屬性：font-family：取值是去指定字體的類型? 一般用逗號隔開? ? ? '微軟雅黑'蚤吹，‘Arial’例诀，‘宋體’，'黑體'
font-size:字體小? ? 取值一般是px為單位的數(shù)字? 或pt?
3.字體加粗情況
font-weight ：bold? 加粗? 正常normal? ? 3.value值：是具體的數(shù)字? 沒有單位? 400-900整百倍?
字體的樣式 font-style：normal? ? italic 《i》?
小型的大寫字符? ? 指的是將小寫字母變?yōu)榇髮? 1
大小于小寫字母一致? font-variant 取值：normal
2.small-caps裁着；
6.簡寫形式 ：?
字體屬性的簡寫 繁涂；屬性font： style ，variant weight size? family?
注意;使用簡寫形式必須要設(shè)置family值 你否則無效?
格式化的屬性：1.color屬性? ? 合法的顏色值
2.文本的排列方式? 指的是水平方向
tex-align：center left? right? ? /justify(表示兩端對齊)
設(shè)置行內(nèi)或者行內(nèi)塊?
3.線條修飾 ：
text-decoration：none 二驰； 無任何的線條修飾? 2.普通的文本? 下劃線· underline? ? ? 下劃線? 上劃線? overline? line-through??
4.line-height?
定義一行文本所占的高度? 有一個特點(diǎn)是行高大于文字本身的大小那么該函行文本將在指定的橫線內(nèi)呈現(xiàn)一個垂直居中的效果? line-height?
取值是以px為單位的數(shù)字?
一般設(shè)置行高和div蓋度一致?
4.首行文本縮進(jìn)
text-indent? 取值是以px為單位的數(shù)字? ?
文本陰影 text-shadow? 取值? h-shadow? v-shadow? blur? color? ? ? ?
表格的屬性修飾?
vertical-align：單元格中數(shù)據(jù)的垂直對齊方式? top/middle/bottom?
表格中除了margin之外都適用?
表格里面特有的睡醒?
css里面設(shè)置表格的特有屬性
邊框合并
border-colapse? ?
默認(rèn)情況下是分離邊框的模式?
sparate? ? collapse 表示邊框合并?
邊框邊距? border-spacing 是用來設(shè)置單元格與單元格之間或者是單元格與表哥之間的距離?
給定一個值表示水平和垂直相同
若是兩個值? 第一個表示水平間距? 第二個表示垂直間距? 若要設(shè)置邊距必須在邊框分離的情況下才能起作用? 不然沒有任何作用
表格標(biāo)題?
位置是在表格的上方? ? ?
caption? 表示標(biāo)題
屬性? caption-side? 取值? ? top? 下方bottom
關(guān)于表格顯示規(guī)則的屬性? ? 指的是用來幫助瀏覽器?
來指定如何布局一張表格
也就是指定單元格的計算方式i
table-layout：fixed? 來固定表格的布局? 單元格td的尺寸由已設(shè)定的值為準(zhǔn)? ?
1.定位：指的是去改變元素在頁面中默認(rèn)的位置?
定位的效果分類：
1.普通流定位? 指的是元素默認(rèn)的顯示方式?
又稱文檔流定位?
2.浮動定位 相對定位? 絕對定位? 固定定位?
每個元素默認(rèn)都是從其父元素的左上角開始顯示
塊及是由上到下排列? 并且每個元素獨(dú)占一行 行內(nèi)塊元素嗾使按照從左到右的順序進(jìn)行排列的?
一旦元素浮動起來? 它將不占頁面空間? 脫離了原本的定位方式? 即是脫離了文檔流定位? 其他的元素會向前補(bǔ)位
浮動元素會腿幼铮靠著在=再父元素的左邊或右邊? 或其他已經(jīng)浮動元素的邊緣? ?
float：left/right? ?
left:停靠在父元素的左邊或者·屯叭福靠在左邊已經(jīng)浮動的元素? 當(dāng)父元素顯示不下浮動元素? 將會換行? 有可能被卡主
2.元素一旦浮動? 他的寬度將以內(nèi)容為主? 前提是未指定寬度? 元素一旦浮動起來? 行內(nèi)元素將變成塊及?
能設(shè)定尺寸? 并且可以正常的設(shè)定垂直外邊距
文字包括行內(nèi)元素包括行內(nèi)塊元素矿酵，不會被浮動元素壓在下邊? ?
3.如何清除浮動歲其他元素的影響?
即是后續(xù)元素會上前補(bǔ)位
若后續(xù)元素不箱站位 可以通過清除浮動的方式來解決這個問題
clerar：left? 清除當(dāng)前元素前面元素帶來的影響
right? both? ?
默認(rèn)值：none? ? ??
子元素一旦浮動起來 父元素高度就會在不設(shè)定的情況下 等于0?
元素的高度都是以未浮動的高度為準(zhǔn)
解決方案：1
給父元素設(shè)定高度? 缺點(diǎn)：不是每一次都知道父元素的固定高度
2.設(shè)置父元素也浮動 缺點(diǎn)：不是任何時候父元素都需要浮動
3.位父元素設(shè)置over flow
如果沒有溢出內(nèi)容可以實(shí)現(xiàn) 如果有內(nèi)容需要溢出顯示就會一同被隱藏起來?
4.在父元素里去追加一個空標(biāo)記? 指的是父元素最后一個子元素位置處 追加元素最好是塊及元素 社會中clear：both? 無論什么情況都不會影響別人
顯示方式的改變 ：
顯示方式就是? 決定了元素在頁面中的表現(xiàn)形式? ? （塊及? 行內(nèi)? 行內(nèi)快 table ）
屬性:DISPLAY
取值：none? 不顯示元素? -相當(dāng)于隱藏元素?
block：塊級? 表現(xiàn)的與塊級元素一致? 3.inline行內(nèi)?
讓元素表現(xiàn)的與行內(nèi)元素一致? 并且
inline-block讓元素表現(xiàn)的與行內(nèi)快一致? 允許修改尺寸?
多個元素在一行里顯示? 可以修改高寬?
table：讓元素表現(xiàn)的與表格一致 尺寸實(shí)際上以內(nèi)容一致? 本身具有高寬屬性? ? 顯示效果的設(shè)置：
顯示/隱藏? 屬性? visibility
取值：visible默認(rèn)值? 默認(rèn)元素都是可見的?
hidden隱藏?
實(shí)現(xiàn)隱藏的方式? display：none?
visibility：hidden? 這個情況隱藏依然占據(jù)頁面空間? 不會脫離文檔流? 依然占據(jù)頁面空間?
display：none? 不占據(jù)頁面空間? 會脫離文檔流? 不占據(jù)頁面的空間?
3.opacity：透明度?
取值1.0-1.0之間的小數(shù)? 越靠近0越透明?
opacity除了作用于元素以及元素內(nèi)容的透明度
而rgba只做用于背景顏色或者是只作用于文字顏色? 只是單一透明度的設(shè)置?
4.垂直對齊方式
屬性：vertical-align：
適用場合：表格中使用? ? top middle buttom?
圖片的對齊 ：控制圖片兩邊的文本垂直對齊方式?
取值：top? middle bottom? baseline默認(rèn)的基線對齊? 用于圖片與文字對齊方式? ?
光標(biāo)的設(shè)置?
改變鼠標(biāo)懸停在元素上時 鼠標(biāo)的狀態(tài)
屬性：cursor
1.default：箭頭
2.pointer 小手
3.crosshair 十字準(zhǔn)心?
4.text：表示文本文檔? I
5.wait? ? ? 等待?
6.help：幫助文檔?
列表：list-style-type:用來修飾列表項(xiàng)的標(biāo)識?
1.none? ? 2.disc? 3.circle? 4.square? ?
list-style-image 取值url（圖片路徑 ）
3.列表項(xiàng)的位置? list-style-position ：取值1
outside在外邊的? 將標(biāo)識放置于內(nèi)容區(qū)之外? inside? 將標(biāo)識放置于內(nèi)容區(qū)之內(nèi)?
4.簡寫形式 list-style：none? 簡寫? type標(biāo)識? url? position?
可以通過列表橫向排列·
定位：
position
相對定位：取值relative?
1.什么是相對定位：指的是元素相對于他原來的位置去偏移某個距離 相對于元素自己 使用場合：元素位置的微調(diào) 時使用 position：relative? 必須要配合偏移屬性一起使用實(shí)現(xiàn)位置的微調(diào)
絕對定位 取值絕對定位? absolute?
固定定位? fixed?
4.static靜態(tài)的? ? 指的是元素的默認(rèn)選擇方式
配合偏移屬性? 數(shù)字加單位? ? top buttom left right?
top：150；一般情況下往下移動 left150px? 元素向右移動 right：150px? 向左移動
絕對定位：
1.語法position:absolute;
配合偏移屬性使用 實(shí)現(xiàn)位置的修改?
1使用場合? 有堆疊效果的元素
2.彈出菜單 默認(rèn)情況父元素未定位得話 直接找body?
#d1:hover #d2{
display:block
}懸停顯示子元素? ? hover以前 display：none? ? =》display：none? ?
絕對定位元素會相對于 離他最近的已定位的祖先元素? 去實(shí)現(xiàn)位置的初始化? 沒有已定位的祖先元素 那么這個元素相對于body實(shí)現(xiàn)位置的初始化? 絕對定位的元素會脫離文檔流 不占用頁面里空間
堆疊順序：?
z-index改變堆疊順序? 所有的已定位元素 可能出現(xiàn)堆疊效果
如何改變對的順序? 取值：無單位數(shù)字? 數(shù)字越大? 就越靠上? 如果父子關(guān)系? index也無法改變順序
position：fixed? 配合偏移屬性使用?
fixed可以將行內(nèi)轉(zhuǎn)化為塊及?
固定定位的元素會變成塊及? 也就是可以修改尺寸? fixed定位只是相對于? body? 永遠(yuǎn)相對body實(shí)現(xiàn)位置的初始化? 脫離了文檔流? 不占頁面空間?
? css3高級
1.兄弟選擇器 ：指的是具備相同父元素的平級元素?
1.相鄰兄弟選擇器? ? 語法選擇器1+選擇器2 {樣式聲明}
都一律只能向后找? 不能向前找? 只找一個?
2.通用兄弟選擇器：元素后的所有兄弟
選擇器1~選擇器2{樣式聲明}?
屬性選擇區(qū)?
屬性作用：指的是允許去通過元素所附帶的元素屬性及值去匹配元素? 語法：基本用法?
[attr]
匹配頁面中所有附帶attr的元素? 【】【id】匹配頁面中所有附帶ID的元素? ?
element(attr)? element任意元素? ? ? attr人藝術(shù)性? div【class】? div[class]? ? ?
[attr1][attr2]? ? [id][class]表示同時附帶id和class屬性的元素? 可以是多個屬性?
[attr=value]匹配attr值為value 的元素? [id=d1]相當(dāng)于? id選擇器?
3.偽類選擇器 ：
鏈接偽類：link visited? 動態(tài)偽類：hover? active focus?
錨點(diǎn)? 目標(biāo)偽類：突出顯示激活錨點(diǎn)元素? 匹配被激活的錨點(diǎn)? 點(diǎn)擊錨點(diǎn)轉(zhuǎn)換后就是寶激活狀態(tài)?
語法：選擇器? ：target? {樣式聲明}? ?
2.結(jié)構(gòu)偽類：通過元素的·1結(jié)構(gòu)關(guān)系來匹配元素?
1.：first-child? ? 匹配的是元素時屬于其父元素中的第一個子元素? ? ? p:first-child?
2.last-child:屬于其父元素中的最后一個子元素?
P:last child{}?
3.:nth-child(n)匹配的是屬于其父元素里第n個子元素? nth-child(2):?
tr:nth-child(2) td:nth-child(3){
background:pink;
}表示第二行 第三列
4empty
：empty? 匹配沒有子元素的元素?
注意：必須為空? 沒有任何內(nèi)容?
5.only-child：匹配的元素是屬于其父元素里得唯一的子元素?
否定偽類? ：將滿足指定選擇器的元素排除在外? ? ? ：not
(selector){樣式}?
table td:not(:first-child){
color:blue;
font-size:30px;
}排除第一列的字體加粗?
偽元素選擇器
1.：first-letter或 ：：first-letter? 作用匹配的是某個元素的首個字符? ? first-line用來匹配某個元素的首行?
首字符選擇器高于首行選擇器?
3.選取中內(nèi)容的背景顏色? ：：selection? ? 作用就是 匹配被用戶選取的內(nèi)容?
注意：只能去修改背景顏色和字體的顏色? div：：selection{
background：
color：
此地方的偽元素必須是雙：：?
}
內(nèi)容生成：指的是使用css動態(tài)的向元素中插入一段內(nèi)容?
使用偽元素選擇器生成?
：：before 匹配到某元素·內(nèi)容區(qū)域之前? ：：after? 匹配到某元素·內(nèi)容區(qū)域之后?
配合屬性使用? 屬性content? 用來去想要匹配到的位置處去增加內(nèi)容? 增加的內(nèi)容寫在content.屬性里? ? 取值? 字符串? ? 2.動態(tài)的插入圖片的路徑url? ? ?
偽元素解決外邊距溢出 ：給子元素加margin? 影響到父元素? ? 父元素第一個子元素處加table?
空table標(biāo)記可以用 父元素：before來代替? 父元素：before即是 父元素內(nèi)容的前面?
解決浮動使父元素失去高度問題的影響：?
給最后一個父元素的資源素處加個塊元素 清除浮動?
父元素：afte
r{
display：block矗积；
content：‘’全肮；
clear：both；
}?
彈性布局：主要解決某元素中子元素的布局方式? 為布局提供最大的靈活性?
彈性布局概念：
1.彈性布局容器
子元素的父元素叫做容器?
資源素叫做項(xiàng)目?
2.彈性布局的項(xiàng)目
橫軸 有起點(diǎn)有終點(diǎn) 叫做主軸 左到右 縱軸叫做交叉軸? 上到下? ? ? ?
3.主軸指的是項(xiàng)目排列方向的軸?
交叉軸：與主軸垂直交叉的軸叫做交叉軸?
有關(guān)彈性布局的屬性的設(shè)置：
彈性布局的容器相關(guān)的舒心
彈性：flex
取值display：1.flex 將塊及元素變?yōu)槿萜? 2.inline-flex? ? 將行內(nèi)元素變?yōu)槿萜?
做布局時會自動分配空間?
元素變成容器的話? 容器的text-align.屬性將會失效?
元素變?yōu)槿萜骱? 子元素的浮動屬性將會失效
clear屬性及垂直對齊方式也失效了棘捣；
有關(guān)容器的屬性：? 1.flex-direction? 指定容器的主軸以及他里面的排列方向? row 默認(rèn)值? 即主軸為x軸? 起點(diǎn)默認(rèn)在左邊? row-reverse? 起點(diǎn)進(jìn)行反轉(zhuǎn)? 主軸為x起點(diǎn)在右邊? 取值縱向：column? 主軸在? column-reverse 起點(diǎn)在底部?
flex-wrap：作用? 當(dāng)一個主軸排列不下所有普項(xiàng)目時
1.nowrap：默認(rèn)值? 空間不夠吧項(xiàng)目縮小? 也不換行
wrap一旦顯示不下自動換行
換行并且反轉(zhuǎn)：wrap-reverse辜腺；? .
flex-flow：同時指定排列順序和換行? 1. row nowrap；
4.justify-content? 定義項(xiàng)目在主軸的對齊方式?
取值：flex-start? 左 在主軸的起點(diǎn)對齊?
flex-end 中 在主軸的終點(diǎn)對齊? center 居中對齊
space-between? 兩端對齊的效果?
space-around 指的是每個項(xiàng)目兩端的間距相同?
以上屬于水平方向的對齊方式?
align-items? 指的是子項(xiàng)的交叉軸上的對齊方式?
取值：flex-start：交叉軸的起點(diǎn)對齊? flex-end交叉軸上的終點(diǎn)對齊? center? 交叉軸上中間對齊? baseline 交叉軸上的基線對齊?
stretch：若項(xiàng)目即子元素未設(shè)置尺寸? 在交叉軸上占滿父元素的空間
項(xiàng)目的屬性：只能去控制某一個項(xiàng)目? 不是對整個項(xiàng)目修飾? 不影響別的項(xiàng)目和容器?
1.order 順序： 值越小的話 就越靠近起點(diǎn)? 默認(rèn)情況下是0? 取值方式是無單位?
2.flex-grow? 定義項(xiàng)目的放大比例? 當(dāng)容器有足夠的剩余空間? 項(xiàng)目將按指定的比例進(jìn)行放大? 整數(shù)的數(shù)字? 無單位? 默認(rèn)值是0? 取值越大? 占的剩余空間就越多? ?
flex-shrink? 項(xiàng)目將按照指定的比列去縮小? 默認(rèn)值為1 空間不足的話等比縮小? 默認(rèn)值為1? ? 取值0的話不縮小? 值越大? 縮小的比例就·越大? ?
align-self：用來控制單個項(xiàng)目在交叉軸上的對齊當(dāng)時?
取值：flec-start? flex-end? baseline stretch? auto 自動繼承父元素的align-items? ?
轉(zhuǎn)換：對頁面中的元素實(shí)現(xiàn)
改變元素在頁面中的位置 大小? 角度 或形狀? 這樣的方式叫做轉(zhuǎn)換? ?
2d轉(zhuǎn)換 ：? 在x軸和y軸上發(fā)生的轉(zhuǎn)換效果? ?
3d轉(zhuǎn)換：xyz軸上的轉(zhuǎn)換? ? ?
有關(guān)轉(zhuǎn)換的屬性?
transform：?
取值：1.none? 無效果?
translate-function 表示一個或者是多個轉(zhuǎn)換函數(shù)? 多個的話中間要用空格隔開? ?
2.轉(zhuǎn)換原點(diǎn)?
屬相乍恐；transform-origin? 取值：數(shù)值/百分比? /關(guān)鍵詞? 2個值：表示的原點(diǎn)是在x軸和y軸上的位置?
3個值得話 表示原點(diǎn)在xyz軸上的位置? ?
默認(rèn)原點(diǎn)都在元素的中心位置處? center center? /50% 50%?
2d轉(zhuǎn)換：
1. 位移：改變元素在頁面中的位置
屬性：transform?
取值 translate（x）指定元素在x軸上的位移距離? 取值正負(fù)都可以? 取值為證向右移? 反之向左? ?
translate（x评疗，y）? 表示指定元素在xy軸上的唯一距離? y正向下移 y負(fù) 向上移? translateX （x）? translate Y（y）只能給一個值?
實(shí)現(xiàn)縮放的是scale（value值）value表示橫向或者是縱向的縮放比例? 默認(rèn)值是1? 放大大于1? 縮小小于1?
如果是負(fù)數(shù)是放大? 將水平和垂直方向都翻轉(zhuǎn)180度?
scale（x,y）x表示橫向放大比例? y表示縱向的放大比例
也可以進(jìn)行單項(xiàng)? 縮放? scale-x（）scale-y（）?
旋轉(zhuǎn)? ：改變元素在頁面中的角度?
transform：rotate? ? 取值為正順時針旋轉(zhuǎn)? 取值為負(fù) 逆時針旋轉(zhuǎn)? 旋轉(zhuǎn)是會連同坐標(biāo)軸一起旋轉(zhuǎn)? ? 一定會影響旋轉(zhuǎn)后的位移效果?
角度傾斜：? ?
改變元素在頁面中的形狀? ?
語法 屬性：transform? skew（）
skewX （deg）元素向著x軸產(chǎn)生傾斜的效果 實(shí)際上改變的是y軸的角度? x為證是y軸逆時針? 負(fù)為順時針或skewY（deg）? 讓y軸產(chǎn)生傾斜? 改變的是x的角度? y取值為正x順時針? y為負(fù)逆時針?
skew（x,y）雙軸傾斜
4.如何在網(wǎng)頁中實(shí)現(xiàn)3d的轉(zhuǎn)換?
透視距離：模擬人的眼睛到3d元素之間的距離
屬性
perspective? ? ? 該屬性應(yīng)該加在3d轉(zhuǎn)換元素的父元素上?
3. 3d旋轉(zhuǎn)? transform? 取值 rotateX（ndeg）指的是以x為中心實(shí)現(xiàn)旋轉(zhuǎn)?
rotate（y）以y.軸為中心旋轉(zhuǎn)的角度?
rotateZ（deg）? 以z軸為中心去旋轉(zhuǎn)元素角度? 方向盤? 摩天輪?
rotate3D（x，y禁熏，z壤巷，ndeg）? xyz取值大于0的時候? 表示該軸參與旋轉(zhuǎn)? 如果取值為0 則不參與旋轉(zhuǎn)?
實(shí)現(xiàn)轉(zhuǎn)換：過渡?
1.指的是使用css的屬性將他的值在一段時間內(nèi)去平緩變化的一個效果? 把這個效果叫做過渡?
指定過渡屬性 ：通過transition-property：取值1.具體屬性的名稱 transition-property：background；? 指定哪個屬性值在變化的時候需要使用過渡的效果來體現(xiàn)?
all代表所有能體現(xiàn)過渡的屬性?
允許攝制1過渡效果的屬性：所有跟顏色相關(guān)屬性?
2.取值為數(shù)字的屬性?
3.轉(zhuǎn)換屬性：位移 傾斜
4.漸變
4.visibility? 顯示/隱藏?
6.陰影屬性?
一般用all?
2.指定過渡的時長 即指定咋多長時間內(nèi)去完成過渡操作
trasition-duration： 以秒或毫秒為單位的數(shù)字 1000ms=1s?
3.指定速度的時間曲線函數(shù)
transition-timing-function用來指定過程變化? 1.ease慢速開始 快速變快 慢速結(jié)束 linear：勻速?
ease-in慢速開始 加速結(jié)束 ease-out? 快速開始慢速結(jié)束? ease-in-out 慢速開始和結(jié)束 中間是先加速 后減速? 指定過渡的延遲時間? ? transition-delar ：秒或毫秒為單位的數(shù)字
注意：過渡屬性的編寫位置會影響最后的效果 如果將過渡屬性放在元素聲明樣式里 既要管回又要管去 若放在觸發(fā)操作中就只管去不管回?
簡寫方式：transition：property duration? timing-function delay? 瞧毙；
屬性時間必須寫 其他=可以不寫
css hack:兼容性處理?
c3高級動畫?
屬性：什么是動畫：使元素從一種樣式逐漸去轉(zhuǎn)換到另一個效果? 是將多個過渡效果放再一起? 讓他連貫? ?
通過關(guān)鍵幀實(shí)現(xiàn)? 通過他控制動畫的實(shí)行
關(guān)鍵幀·：
1.動畫的時間點(diǎn)?
2.在改時間點(diǎn)上的樣式改變?
二胧华、動畫相關(guān)的使用
1.聲明動畫? ? ? ? ? 為動畫起名? 同時定義關(guān)鍵幀? ?
2.為元素去調(diào)用動畫? 指定元素調(diào)用動畫名稱
通過參數(shù)控制動畫?
聲明動畫的具體方式： @keyframes 動畫名{
0%{動畫開始時元素的樣式}
100%{畫執(zhí)行完成時元素的樣式}
}
animation-name：name
? ? ? ? duration
動畫執(zhí)行得速度? ? ? ? timing-function:ease.ease-in ease-out? linear? ?
速度曲線函數(shù)：animation：delay? 動畫的延遲? 取值也是以秒或毫秒為單位?
infinite 無限次播放? ?
animation-iteration-count:10;
6.animation-direction：normal寄症；? 默認(rèn)的正常效果?
reverse? 逆向播放?
alternate輪流播放? ? 奇數(shù)正向? 偶數(shù)逆向
簡寫方式：animation ：name duration timing-function? delay iteration-count? direction? ? 前面兩個必須給?
狀態(tài)屬性：animation-fill-mode播放前和播放后的狀態(tài)? backwards?
動畫播放前延遲時間內(nèi)動畫保持在第一幀的狀態(tài)上?
forwards；動畫播放后將保持在最后一幀的狀態(tài)上?
3.both forward和backwards都有
暫途囟或播放的屬性
animation-play-state：指定動畫是屬于播放還是暫停的狀態(tài)上?
取值：? 1.paused暫停? ? running播放?
{over-flow:hidden;
text-over-flow:ellipsis;
white-space:nowrap; ?
}
