溢出
內(nèi)容多，容器小，會發(fā)生溢出
默認(rèn)溢出顯示，默認(rèn)縱向溢出
- 溢出的控制 overflow
1.visible 默認(rèn)值，缺省值，溢出部分可見
2.hidden 溢出部分隱藏
3.scroll 不管是否溢出都有滾動條
4.auto 溢出又滾動條，不溢出沒有
5.overflow-x 單獨設(shè)置x軸滾動條
6.overflow-y 單獨設(shè)置y軸滾動條
p{
/*溢出的控制 */
overflow:hidden;
}
邊框的簡寫方式
width style color
border: 1px solid red;
- width:邊框的粗細(xì) px
- style: 邊框的樣式
- solid*:實線
- dotted*:點點的虛線
- dashed*:線條虛線
- double*:雙實線
合法顏色值
- 顏色的英文單詞
- #00 00 00 6個16進(jìn)制(0~255)
- rgb:色光三原色 紅 #ff 00 00 綠 藍(lán)
- #ff ff ff 代表 白（光全開就是白）
- #00 00 00 代表 黑（沒開光就是黑）
- #aabbcc--->#abc
- rgb（r,g,b）10進(jìn)制 0~255
- rgb(r%,g%,b%) 255的%（不常用）
- rgba a:透明度（0~1）
- transparent; 透明
好看的藍(lán) [1]
邊框最簡單方式：border:style;默認(rèn)1px,黑色，style
單邊設(shè)置
border-方向: width style color;
方向： 上 右 下 左
單屬性設(shè)置
- border-width 邊框大小
- border-style 邊框樣式
- border-color 邊框顏色
單邊的單屬性設(shè)置
- border-left-width 邊框大小
- border-right-style 邊框樣式
- border-top-color 邊框顏色
圓角 radius
border-radius:10px;
單位：px %; 臨界點：50%變成圓
單角設(shè)置
border-top-left-radius: 2px border-top-right-radius: 2px border-bottom-left-radius: 2px border-bottom-right-radius: 2px
邊框陰影 box-shadow
取值：h-shadow v-shadow blur spread color inset;
- h-shadow:水平方向的偏移量
- v-shadow:垂直方向的偏移量
- blur: 陰影的模糊距離
- spread: 陰影尺寸
- color : 陰影顏色
- inset: 設(shè)置外部陰影為內(nèi)部陰影
最簡方式：h-shadow v-shadow
輪廓
邊框外面一條線，邊框的邊框
outline: width style color;
一般只清除輪廓
outline:0/none:清除輪廓
border:0/none:清除邊框
盒子模型，框模型
所有元素皆為框
元素在頁面上實際占據(jù)空間的計算方式
寬度： 左外邊距+左邊框+左內(nèi)邊距+內(nèi)容區(qū)域的寬度+右外邊距+右邊框+右內(nèi)邊距
高度： 上外邊距+上邊框+上內(nèi)邊距+內(nèi)容區(qū)域的高度+下外邊距+下邊框+下內(nèi)邊距
外邊距： 邊框以外的距離（元素與元素的距離）
內(nèi)邊距：邊框與內(nèi)容區(qū)域的距離
- 外邊距 margin
- 改變外邊距，元素有位移效果，邊距無顏色
- margin:v1;4個方向上的外邊距
- 上 右 下 左單獨一邊的邊距；
如果當(dāng)前行只有一個元素，右外邊距數(shù)值不準(zhǔn)確
取值：
- px
- % 父元素寬度的%
- 負(fù)數(shù)： 往相反的方向移
- auto: 必須左右外邊距一起用，
作用：讓塊級元素水平居中
簡寫：margin:auto; 水平居中
外邊距的合并：上下外邊距以最大的一個值為準(zhǔn)
解決方案：
- 只寫上，或者下，不要混寫
- 設(shè)計時規(guī)避
| 塊級 | 行內(nèi) | 行內(nèi)塊 |
|---|---|---|
| 設(shè)置寬高有效 | 寬高無效 | 設(shè)置寬高有效 |
| 不寫寬，默認(rèn)寬父元素100%，不寫高內(nèi)容撐開 | 寬高都是內(nèi)容撐 | 默認(rèn)值帶一個寬高，不同瀏覽器解析不同 |
| 單獨成行 | 與其他行內(nèi)和行內(nèi)塊元素共用一行 | 與其他行內(nèi)和行內(nèi)塊元素共用一行 |
| 上下外邊距有效 | 上下外邊距無效 | 上下外邊距有效，改變一行任意一個行內(nèi)塊的上下外邊距，本行其他元素，跟著一起位移 |
css 重置 reset
- body自帶8個外邊距
- ul自帶40px左內(nèi)邊距
body，p ,h1-h6,ol,ul,dl,pre都有邊距，因瀏覽器解析不同，需要樣式重置
*{margin:0;padding:0;}
blockquote, body, button, dd,
dl, dt, fieldset, form, h1, h2,
h3, h4, h5, h6, hr, input,
legend, li, ol, p, pre, td,
textarea, th,ul
{margin:0;padding:0;}
外邊距溢出
在特殊情況下，為子元素設(shè)置外邊距，會作用到父元素上
- 父元素沒有上邊框
- 子元素內(nèi)容區(qū)域上邊沿與父元素內(nèi)容區(qū)域上邊沿重合
解決方案：
1.給父元素添加上邊框
缺點：增加了父元素實際占地高度
2.給父元素添加上內(nèi)邊距
缺點：增加了父元素實際占地高度
3.overflow:hidden;
缺點：想要溢出顯示怎么辦
4.常用給父元素添加一個大兒子
一個空的table元素
內(nèi)邊距
邊框和內(nèi)容區(qū)域之間的距離
修改內(nèi)邊距，效果是元素越大，內(nèi)邊的顏色，就是背景的顏色
一般，需要把元素?fù)伍_的需求需要內(nèi)邊距
padding:v1;
padding沒有auto
取值：
1.px
2.%， 以父元素寬度的%
簡寫方式：一個值
box-sizing:
取值：
1 content -box.默認(rèn)情況下，設(shè)置width是內(nèi)容區(qū)域的寬度
- border-box:設(shè)置width是邊框內(nèi)部的總寬度（含邊框）
- 元素實際占地高度：左外+width
- 一般子元素用%做寬，幾個子元素有空隙，要設(shè)置border-box
使用padding調(diào)整空隙大小
背景
background-color:合法顏色值；
背景圖像
使用背景圖，可讓元素內(nèi)部子元素，堆疊在背景上
background-image：url();
此路徑可加雙引號，單引號，可不加
- background-repeat:repeat;
取值：- repeat 默認(rèn)值平鋪
- no-repeat 不平埔
- repeat-x 水平平鋪
- repeat-y 垂直平鋪
- background-position: 100px(x) 300px;(y)
- 取值：x,y
- px 而為單位
- %
- 關(guān)鍵字x:（left/right/centent）y(top /centent /bottom)
- 背景圖片的尺寸
- background-size:
取值: - 一個值：px數(shù)字 同時控制x,y的大小
- 兩個值：分別控制x,y的大小
- 關(guān)鍵字：cover contain
- background-size:
cover:覆蓋和填充，讓背景圖沖滿整個容器，哪怕圖片顯示不完全
contain 包含，讓容器顯示完整的圖片，哪怕容器有空白區(qū)域，也要包含完整圖片
- 背景圖片的固定
background-attachment:scroll(默認(rèn)值)
取值：fixed 固定（相對窗口位置固定，滾動，位置不變，但只能在原容器顯示）
7.背景的簡寫方式
color url repeat attachment position 沒有size
背景圖設(shè)置了fixed那么position會根據(jù)瀏覽器窗口定位
漸變gradient
漸變是多種顏色，平緩變化的一種顯示效果
漸變的主要因素
色標(biāo)，一種顏色，出現(xiàn)的位置
效果，至少兩個色標(biāo)
漸變的分類
- 線性漸變，以直線填充
- 徑向漸變，以圓形來填充
3.充復(fù)漸變，將線性，徑向重復(fù)執(zhí)行
線性漸變：background-image
簡寫：background:linear-gradient(方向，色標(biāo)1，色標(biāo)2，色標(biāo)3)
方向：取值 1.關(guān)鍵字，定義的
- 終點:
to top/to right /to bottom/ to let - 角度：deg
0deg ->to top
90deg -> to right
180deg-> to bottom
270deg-> toleft - 色標(biāo)：顏色+位置
- 位置，%
- 位置，px
- 位置不寫，平均分配
- 徑向漸變
background:radial-gradient(半徑 at 圓心，色標(biāo)1，色標(biāo)2，色標(biāo)3)
- 半徑：px為單位的數(shù)字，色標(biāo)中位置用%，會根據(jù)半徑變化，如果是px，半徑失去作用
圓心： x y px為單位的數(shù)字
x% y%
關(guān)鍵字 x:left/center/right
y:top/center/bottom
- 重復(fù)漸變
repeating-linear-gradient(方向，色標(biāo)1，色標(biāo)2，...)
repeating-radial-gradient(半徑 at 圓心，色標(biāo)1，色標(biāo)2，...)
瀏覽器兼容 css hack
漸變兼容低版本瀏覽器
-moz- 火狐
-webkit- 谷歌/蘋果
-o- opera
-ms- ie
-webkit-repeating-linear-gradient(方向起點，色標(biāo)1，色標(biāo)2，...)
取值：top bottom left right,從哪里開始
文本格式化
- 指定字號大小
- font -size :值（px/pt/rem/em）
- 字體系列
- font-family:值
pc中字體庫中有的字體，有空格建議加“”用逗號隔開多個字體系列
chiller,“mv boli”,jokerman,黑體；
- font-family:值
- 字體加粗
- font-weight:值(關(guān)鍵字：normal/bold/bolder/lighter/
不帶單位的數(shù)字，100的整倍數(shù)：100~1000)
- font-weight:值(關(guān)鍵字：normal/bold/bolder/lighter/
- 字體樣式font-style
normal(默認(rèn)值)
italic斜體 - 小型大寫字母
font-variant:small-caps - 簡寫
font:style variant weight size family
45312
最簡：size family
文本屬性
- color:字體顏色
- 文本對齊方式
- text-align:
值：left / center/ right / justify(兩端對齊)
margin:o auto；和text-align的區(qū)別
margin:o auto:該塊級元素本身水平居中
text-align：設(shè)置內(nèi)部文本，行內(nèi)，行內(nèi)塊，水平對齊，該元素內(nèi)塊級元素?zé)o效
- 行高：line-height
行高自帶的功能
如果一行文字字號小于行高，那么該行文字，顯示在行高中間
一般情況下行高等于容器的高度，那么該文字就能在容器中垂直居中
注：多行文本不使用行高
取值：px為單位的數(shù)字
無單位的數(shù)字代表行高是字號的倍數(shù)
- 文本線條
text-decoration:none; 沒有線條修飾，a去除下劃線
- 取值：underline:下劃線
- 取值：overline:上劃線
- 取值：line-through:刪除線；
- 首行縮進(jìn)
text-indent: px
text-shadow:h-shadow v-shadow blur color
h-shadow :水平便宜
v-shadow：垂直偏移
blur：模糊距離
color：陰影顏色
css編寫思路[1]
表格的樣式
- 常用屬性
尺寸，邊框，背景，字體，內(nèi)外邊距，
table 設(shè)置邊框，只會設(shè)置最外層最大邊框
td/th (外邊距無效) 尺寸，邊框，背景，字體，內(nèi)邊距，
vertival-align:指定單元格垂直對齊方式
取值：top、middle,bottom
table是特殊的表現(xiàn)方式
實際尺寸和設(shè)計不一樣，是根據(jù)內(nèi)容數(shù)據(jù)的多少決定的
單元格小，內(nèi)容多，制動撐開，
內(nèi)容小，單元格大，跟單元格走
表格渲染方式與其他元素不同
先讀取到內(nèi)存中再一次型渲染，效率低
- 表格的特有屬性
- border-collapse:separate(默認(rèn)值，邊框分離狀態(tài))
collapse(合并) - border-spacing: px 邊框間距 前提邊框必須分離
一個值：水平垂直間距
兩個值：第一個水平，第二個垂直 - 標(biāo)題位置
caption -side 默認(rèn)值top 可設(shè)置為bottom - 設(shè)置表格的顯示規(guī)則
渲染表格的方式
table-layout:
取值：auto（默認(rèn)值）制動表格布局
td/th的尺寸實際上由內(nèi)容決定
fixed 固定表格布局
不管內(nèi)容多大，不存入內(nèi)存，按尺寸顯示，直接渲染
| table自動布局 | table的固定 |
|---|---|
| 單元格大小自動適應(yīng) | 單元格大小取決于設(shè)置的尺寸 |
| 表格復(fù)雜時速度慢 | 任何情況下加載速度都快 |
| 比較靈活 | 不靈活 |
| 適用于表格不復(fù)雜，不確定每列大小的表格 | 適用于表格確定每列大小的布局 |
定位
1. 什么是定位
設(shè)置元素在頁面上的位置
2. 分類
普通流定位
浮動定位
相對定位
絕對定位
固定定位
3. 普通流定位（默認(rèn)）（默認(rèn)文檔流）
- 每個元素在頁面上都喲自己的空間（不能堆疊）
- 每個元素都是從父元素左上角繪制
- 塊級元素按照從上倒下方式逐個排列，每個元素單獨成行
- 行內(nèi)和行內(nèi)塊元素在一行中從左往右逐個排列，一行放不下?lián)Q行
4. 浮動定位
讓塊級元素橫向顯示
- float：取值
- none 不浮動
- left 向左浮動 ，讓元素脫離文檔流，像當(dāng)前行左看齊
- right 向右浮動，讓元素脫離文檔流，像當(dāng)前行右看齊
- 浮動的特點
1.元素一旦浮動，就脫離文檔流（不再占用頁面空間，后面元素上前補位）
2.浮動元素，或i?？吭诟冈氐淖?右邊，或者其他已浮動元素的邊緣
3.父元素橫向顯示不下說有元素，顯示不下的部分會自動換行
4.浮動解決，多個塊級元素橫向顯示的問題
- 浮動引發(fā)的特殊情況
- 浮動引發(fā)的占位問題
- 當(dāng)父元素顯示不下說有浮動元素時，顯示不下元素會換行，已浮動元素，會根據(jù)浮動占據(jù)位置，導(dǎo)致被擠下去的浮動元元素，要在更下方顯示
- 元素一旦浮動，元素沒定義寬度，寬度靠內(nèi)容撐開
- 行內(nèi)元素浮動后自動變成塊級
可以設(shè)置寬高，內(nèi)外邊距
4. 文本，行內(nèi)，行內(nèi)快是不會被浮動元素壓在下面的，而是巧妙地避開，環(huán)繞著浮動元素顯示 - 浮動引發(fā)的占位問題
6. 總結(jié)
一個元素脫離文檔流：對應(yīng)下面幾件事
1.元素本身不占頁面空間，后面元素向前補位
2.脫離文檔流的元素，都變成塊級元素
3.如果元素沒寬，脫離文檔流后，寬度靠內(nèi)容撐開
7. 清除浮動效果
一個元素不浮動，前面與浮動的兄弟元素帶來了影響
影響：元素向前補位
清除浮動帶來的影響：不上前補位
- clear:none/left/right/both
/left: 清除左浮動帶來的影響
/right: 清除右浮動帶來的影響
/both: 同時清除左右浮動帶來的影響
8. 高度坍塌
父元素沒有定義高度，高度靠內(nèi)容撐開，子元素都浮動了，導(dǎo)致父元素找不到高，這樣就導(dǎo)致了父元素的高度坍塌
* 解決方案：
* 1. 給父元素定義高度 弊端，動態(tài)的數(shù)據(jù)，沒辦法知道具體的高度
* 2. 父元素也浮動 弊端 ，會影響其他元素
* 3. 父元素overflow:hidden 弊端，如果想溢出就沖突了
* 4. 追加一個小的塊級元素，設(shè)置clear:both
9. 定位
1. 顯示
- 顯示的效果
visibility:visible 默認(rèn)值 可見
hidden 隱藏 不可見 不脫離文檔流
* 顯示方式（重點）
設(shè)置元素在頁面中的表現(xiàn)形式（塊級，行內(nèi)，行內(nèi)塊，table）
display: inline(行內(nèi))/block(塊級)/inline-block(行內(nèi)塊)/table(表格)/none（隱藏（脫離文檔流的隱藏））
ps: display:none和visibility: hidden區(qū)別
display:none（隱藏（脫離文檔流的隱藏））后面元素向前補位
visibility:hidden 隱藏 不可見 不脫離文檔流 占據(jù)位置
* 透明度 opacity（0 ~ 1）透明 ~ 不透明
opacity和rgba的區(qū)別
rgba只會給變當(dāng)前顏色透明度
opacity會改變顏色和后代和內(nèi)部元素的透明度
* 垂直對齊方式
vertical-align 只能用于 行內(nèi)塊 表格 img
1. 在table中使用時。取值：top/middle/bottom
2. 圖片和文字的排版
給圖片設(shè)置vertical-align:設(shè)置的是圖片前后文字，與圖片的垂直對齊；取值：baseline(默認(rèn)值)/top/middle/bottom
一般設(shè)置非基線對齊
* 光標(biāo)的設(shè)置
cursor: default (默認(rèn)值 箭頭)/ pointer（小手）/ text(文本)/ wait(加載)/ help(問號)/ crosshair(加號)
10. 列表樣式
1. 列表標(biāo)識向
list-style-type:none/disc/circle/square
2. 列表項圖片
list-style-image:url() 小圖
###### 3. 列表項的位置
list-style-position:outside 默認(rèn) 在li外部 ul內(nèi)邊距里
inside 在li內(nèi)部
##### 4. 簡寫方式
list-style:type image position
項目中使用頻率最高的list-style:none;
如果有多個div樣式相同可以使用多個ul li布局
11. 定位
position:
取值：static 默認(rèn)值 靜態(tài)（默認(rèn)文檔流）
relative：相對定位
absolute: 絕對定位
fixed: 固定定位
當(dāng)一個元素設(shè)置了position:取值為這三種種的一種時，這個元素，被稱為以定位元素
一定為元素：自動解鎖4個偏移屬性，
top/right/bottom/left
1. 相對定位
不寫偏移屬性，頁面沒有作用，和沒寫定位一樣的，需要配合偏移屬性
左右沖突聽左的，上下沖突聽上的，正值向下，負(fù)值向上
相對定位不脫離文檔流
相對定位的參照物是自己原來的位置
使用相對定位場合
* 類似margin，元素微調(diào)
* 作為絕對定位的祖先元素
2. 絕對定位（大招）
配合偏移屬性
脫離文檔流（不占空間，，補位 塊級，要寫寬高）
絕對定位的參照物？？？？？？？？？？？
>祖先元素，沒有已定位元素，那么相對body左上角位移
祖先元素，有已定位元素，那么按最近的祖先元素左上角位移
3. 固定定位 fixed
脫離文檔流，相對body偏移，永遠(yuǎn)在可視區(qū)域
4. 堆疊順序
默認(rèn)堆疊順序，后寫的順序高（是html元素編寫的順序）
使用z-index修改順序
z-index：無單位的數(shù)字（只有已定位元素才能用）
堆疊順序?qū)Ω缸蛹墴o效，兒子永遠(yuǎn)在父親上面
css3 核心
一. 復(fù)雜選擇器
兄弟選擇器
- 相鄰兄弟選擇器 ，獲取選擇器1后面緊緊挨著的選擇器
選擇器1+選擇器2
- 通用兄弟選擇器 ，獲取選擇器1后面所有符合選擇器2的元素
選擇器1 ~ 選擇器2
用途：
設(shè)置一組元素，但大哥不應(yīng)用此樣式
二，屬性選擇器
elem代表元素 attr代表屬性名 val代表屬性值
[attr]{} 匹配頁面帶attr屬性的元素
[attr1][attr2]{} 匹配頁面帶attr1和attr2屬性的元素
[attr=val]{} 匹配頁面帶attr=val屬性的元素
elem[attr]{} 匹配頁面帶attr屬性的elem元素
三. 關(guān)于屬性值的模糊匹配
[title^="ga"]{} 屬性值為title并且值 開頭 為ga
[title$="ga"]{} 屬性值為title并且值 結(jié)尾 為ga
[title*="ga"]{} 屬性值為title并且值 含有 ga
[title~="ga"]{} 屬性值為title并且值 含有 ga 這個單詞
四. 偽類選擇器
:link/:visited/:hover/:active/:focus
1. 目標(biāo)偽類 :target
讓被激活的錨點，應(yīng)用一個樣式
div{
display:none;
}
div:target{
display:block;
}
<a href="#hz">1</a>
<a href="#hz1">2</a>
<div id="hz">1111111111 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, enim, blanditiis, quae sunt accusamus debitis minima in architecto aliquid tempore a at recusandae necessitatibus quasi et laudantium porro sint beatae voluptates officiis nostrum iste est aliquam illum veniam! Quaerat, veritatis eaque harum velit commodi perferendis iste quidem ipsam molestiae eveniet? </div>
<div id="hz1">2222222222222Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, enim, blanditiis, quae sunt accusamus debitis minima in architecto aliquid tempore a at recusandae necessitatibus quasi et laudantium porro sint beatae voluptates officiis nostrum iste est aliquam illum veniam! Quaerat, veritatis eaque harum velit commodi perferendis iste quidem ipsam molestiae eveniet? </div>
2. 結(jié)構(gòu)偽類
p：first-child{}
匹配p的父親的第一個兒子，這個兒子也得是p
p：last-child{}
匹配p的父親的最后一個兒子，這個兒子也得是p
p：nth-child(n){} n從一開始
匹配p的父親的第n個兒子，這個兒子也得是p
3. 空元素偽類
：empty{} 匹配 內(nèi)容區(qū)域啥都沒有，一個空格都不能有
4. 唯一子元素（匹配有獨生子女的標(biāo)簽）：only-child{}
a:only-child{} a標(biāo)簽在父元素里是獨生子女
5. 否定偽類 ：not(條件){}
div:not(:first-child){}除了第一個，其他都選擇
elem:not(selector) 符號selector的元素都不要
6. 偽元素選擇器
：first-letter (h5) （h4是：：first-letter）
給首字母定義樣式
：first-line
給首行定義樣式
：：selection 必須是兩個：：
匹配用戶選取的內(nèi)容的樣式（只能設(shè)置文本顏色和背景顏色）
4.內(nèi)容生成
使用css命令，添加html元素
：before (h5) （h4是：：first-letter）
在元素內(nèi)容區(qū)域最前面添加一個偽元素
默認(rèn)類似于span；添加的內(nèi)容用content
content只能寫文本或者url
可以設(shè)置各種樣式
:after (h5) （h4是：：first-letter）
在元素內(nèi)容區(qū)域最后面添加一個偽元素
默認(rèn)類似于span；添加的內(nèi)容用content
content只能寫文本或者url
可以設(shè)置各種樣式
內(nèi)容生成，可以解決的問題
> 1.外邊距溢出
：before{
display:table;
content:"";
}
2.高度坍塌
：after{
display:block;
content:"";
clear:both;
}
二. 彈性布局
是一種布局方式主要解決的問題，摸個元素中所有子元素的布局方式
為布局提供了很大的靈活性
1.彈性布局專有名詞
容器： 設(shè)置了display：flex的元素，是個父元素
要發(fā)生彈性布局元素們的父元素
項目： 要發(fā)生彈性布局的元素們
就是容器的子元素
主軸： 項目們排列的方向，叫做主軸
如果項目們橫向排列，主軸是x軸
縱向排列，主軸是y軸
排列順序成為了主軸的起點和終點
交叉軸：永遠(yuǎn)與主軸方向垂直的一條軸，叫做交叉軸
項目們在交叉軸上的排列順序，成為了交叉軸的起點和終點
2.語法：
將元素設(shè)置為彈性容器，容器所有子元素都變成彈性項目
這些項目都允許按彈性布局的方式排列
display:
值：flex 將塊級元素設(shè)置為彈性容器
inline-flex 將行內(nèi)元素設(shè)置為彈性容器
元素設(shè)置彈性容器后，容器text-align vertical-align失效
項目float,clear失效
3.容器的屬性
- 主軸：
flex-direction：
取值：1.row 默認(rèn)值 主軸為x,起點左側(cè)
2.row-reverse 主軸為x,起點右側(cè)
3.column 主軸為y,起點上側(cè)
4.column-reverse 主軸為y,起點下側(cè)
設(shè)置項目換行
flex-wrap:
取值：nowrap 默認(rèn)值
wrap
wrap-reverse
主軸方向和換行的縮寫
flex-flow:direction wrap
4. 定義項目在主軸上的對齊方式
justify-content:
取值：flex-start 默認(rèn)值，主軸起點
flex-end:主軸終點對齊
center:主軸中心對齊
space-between: 兩端對齊（兩端無空白距離）
space-around：每個間距大小相等
5.項目們在交叉軸上的 對齊方式
align-items
取值：
flex-start 默認(rèn)值，交叉軸起點
flex-end:交叉軸終點對齊
center:交叉軸中心對齊
stretch:如果項目不定義高度，項目充滿交叉軸
4.項目的屬性，設(shè)置在某一個項目上，不影響其他項目
1.項目排列的順序
order:無單位整數(shù)
值越小，越靠近主軸起點，默認(rèn)值是0
2. flex-grow:無單位整數(shù)（定義項目放大比例）
如果主軸剩余空間夠大，項目將按比例放大（比例不準(zhǔn)確），默認(rèn)值是0（不放大），
flex-shrink:無單位整數(shù) 縮小 默認(rèn)值是 1
主軸空間不夠時，項目將按比例縮?。ū壤粶?zhǔn)確）（數(shù)字越大縮的越?。?br> flex-grow：basis 就是計算項目能放大縮小是占據(jù)的空間大小
簡寫： flex: 0( flex-grow) 1(flex-shrink) auto(flex-basis)
某個項目在交叉軸上的對齊方式
align-self (設(shè)置某一個項目)
flex-start 默認(rèn)值，交叉軸起點
flex-end:交叉軸終點對齊
center:交叉軸中心對齊
stretch:如果項目不定義高度，項目充滿交叉軸
auto 使用容器設(shè)置的align-items的值
三轉(zhuǎn)換
改變元素在頁面中的 位置，大小，角度 以及 形狀
2D轉(zhuǎn)換，只有x,y
3D轉(zhuǎn)換，添加了Z軸，模擬3D
轉(zhuǎn)換的屬性
transform:
取值:一個或者多個轉(zhuǎn)換函數(shù)，函數(shù)用空格分開
轉(zhuǎn)換原點，對旋轉(zhuǎn)產(chǎn)生影響
transform-origin:
取值：
兩個值(x，y)：
三個值（x,y,z）
top bottom left right center
數(shù)字px
數(shù)字%
學(xué)習(xí)轉(zhuǎn)換就是學(xué)習(xí)不同的轉(zhuǎn)換函數(shù)
2. 2d轉(zhuǎn)換
1.位移（改變元素的位置）
transform:translate()
取值：translate（x）等同于translateX
指定在x軸上的位移
+值往右，負(fù)值往左
translateY
指定在Y軸上的位移
+值往下，負(fù)值往上
translate（x,y）同時設(shè)置x,y軸的位移
2. 旋轉(zhuǎn)
rotate(ndeg)
n:+ 順時針 -逆時針
注意：旋轉(zhuǎn)原點會影響旋轉(zhuǎn)效果
旋轉(zhuǎn)連坐標(biāo)一起旋轉(zhuǎn)，會影響旋轉(zhuǎn)后的位移方向
3.縮放，改變元素的大小
scale(數(shù)值)
取值：
1.一個值val>1 x軸y軸同時放大
0<val<1 x軸y軸同時縮小
-1<val<0 x軸y軸同時縮小，翻轉(zhuǎn)val<-1 x軸y軸同時放大翻轉(zhuǎn)
2.兩個值，分別設(shè)置兩軸的縮放
3.scaleX(val)單獨設(shè)置x軸
4.scaleY(val)
4.傾斜
skewX(角度)等同于skew(角度)
讓元素向著x軸發(fā)生傾斜，實際上改變的是Y軸的角度
n：+y軸是逆時針 -是順時針
skewY(角度)
讓元素向著Y軸發(fā)生傾斜，實際上改變的是X軸的角度
n：+x軸是順時針 -是逆時針
skew(x,y)
- 3d轉(zhuǎn)換 3d旋轉(zhuǎn)
① 透視距離
模擬人的眼睛3d轉(zhuǎn)換之間距離，距離不同，看到的效果不同
perspective:px為單位的數(shù)字
此屬性要添加在3d轉(zhuǎn)換的父元素上
設(shè)置一個3D元素的基數(shù)位置
perspective-origin:center center;
讓轉(zhuǎn)換的子元素保留3D轉(zhuǎn)換 -- preserve-3d：表示所有子元素在3D空間中呈現(xiàn)
transform-style:preserve-3d;
② 3D轉(zhuǎn)轉(zhuǎn)
transform
取值：
1.rotateX(xdeg) 以x軸為中心軸旋轉(zhuǎn)
2.rotateY(ydeg); 以y軸為中心軸旋轉(zhuǎn)
3.rotateZ(ydeg); 以z軸為中心軸旋轉(zhuǎn)
4.rotate3D（x,y,z,deg） x,y,z為0，該軸不參與旋轉(zhuǎn)
大于 0都會參與旋轉(zhuǎn)，但是速度不同
- 過渡
①什么是過渡
讓css值在一段時間內(nèi)，平緩變化的效果，（兩個值之間的變化）
②過度的語法
設(shè)定執(zhí)行過渡的屬性
transition-property:
取值：
- 執(zhí)行過渡的樣式屬性
- 多個屬性用空格分開
- all 所有支持過度的屬性都過渡
支持過度的屬性有？
顏色屬性
大多數(shù)取值為具體數(shù)字的屬性
陰影
轉(zhuǎn)換
visibility
指定過渡時長
整個過渡效果持續(xù)的時間
transition-duration:3s; s/ms
時間曲線函數(shù)
transition-timing-function:ease;(默認(rèn)值)
取值：ease 慢開 加速 慢關(guān)
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out 慢開 先加速后減速 慢關(guān)
④延遲過渡執(zhí)行
transition-delay:2s;
⑤過度代碼編寫位置
寫在原來的選擇其中，過渡效果有來有回
寫在hover中過渡效果，有去無回
簡寫方式：transition: all(property) 2s(duration) linear(timing-function) 2s(delay);
最簡方式：transition:duration
3.使用過度的時機(jī)（只有兩個關(guān)鍵幀）
兩個點的效果，用過渡
必須使用偽類激發(fā)
動畫
1.什么是動畫
多個過渡效果放到一起
可以不使用偽類激發(fā)
2.關(guān)鍵幀，來控制動畫的每一個狀態(tài)
3.動畫的使用
①創(chuàng)建動畫
@keyframes 動畫名稱{
0%{}
....
100%{}
}
②調(diào)用動畫
設(shè)置調(diào)用動畫名稱
animation-name:動畫名稱
設(shè)置動畫執(zhí)行時間
animation-duration: 時間；
設(shè)置動畫的時間曲線函數(shù)
animation-timing-function:
取值： ease/linear/ease-in/ease-out/ease-in-out
設(shè)置動畫的延遲
animation-delay:時間；
動畫的其他屬性
③播放次數(shù)
animation-iteration-count:次數(shù)；
取值：
1.具體播放次數(shù)
2.無限次 infinite
④動畫播放順序
animation-direction:
取值
正常播放 normal 0~100%去播放
reverse 100%~0去播放
alternate: 輪流播放 奇數(shù)正著播放，偶數(shù)反著播放
⑤簡寫方式
animation: name duration timing-function delay count direction
⑥動畫的填充方式
animation-fill-mode:
取值：
backwards 延遲時間內(nèi)，填充動畫的第一幀
forwards 動畫播放完畢后，填充動畫最后一針
both 都填
⑦動畫的暫停和播放
animation-play-state:
取值：
paused;暫停
running 播放
動畫兼容
如果要兼容低版本瀏覽器，需要在動畫聲明前加前綴
@keyframes 動畫名稱{}
@-webkit-keyframes 動畫名稱{}
@-ms-keyframes 動畫名稱{}
@-moz-keyframes 動畫名稱{}
@-o-keyframes 動畫名稱{}
動畫[2]
六. css優(yōu)化
css優(yōu)化的目的
1.減少服務(wù)器壓力
2.提升用戶體驗
1.css優(yōu)化的原則
盡量的減少http請求個數(shù)
頁面的頂部引入css
將css和js放到外部單獨文件中
2.css代碼優(yōu)化
合并樣式（能寫群組就不單獨寫，用戶簡寫方式，就把單獨定義屬性）.
縮小樣式文件大小
減少樣式的重寫
選擇更優(yōu)質(zhì)的樣式屬性值
代碼壓縮
避免出現(xiàn)空的src和href
七 css reset和normalize.css
什么是css reset
html標(biāo)簽，在各個瀏覽器中的默認(rèn)樣式不同
為了統(tǒng)一的開發(fā)，吧默認(rèn)樣式統(tǒng)一化，這個行為叫css reset
可以自己寫，也可以找業(yè)內(nèi)，比較有名的css reset代碼
自己寫：
內(nèi)外邊距清0，
input去邊框和輪廓
a標(biāo)簽下劃線
em i不要斜體
ol ul去點
默認(rèn)字號，字體系列
2.css reset 弊端
市面上css 實現(xiàn)了html默認(rèn)樣式高度一致性
吧不同的瀏覽器默認(rèn)樣式，進(jìn)行高度統(tǒng)一
但是這種處理過于霸道，把一些需要保留的默認(rèn)樣式也清除掉了
3.關(guān)于css reset優(yōu)化方案（不是必須）
normalize.css是一種現(xiàn)代的，為html5準(zhǔn)備的優(yōu)質(zhì)替代方案
保留了一些可以保留的默認(rèn)樣式，而不是霸道的清除
normalize.css相對平和
不講究統(tǒng)一，關(guān)注通用性和可維護(hù)性
附加
雪碧圖，精靈圖
如果頁面出現(xiàn)的小圖標(biāo)比較的多
一般不使用img一個一個的
吧說有的圖合成在一個
使用背景與背景定位
目的：有效的減少http請求的次數(shù)
