html筆記5

第六章 盒子模型
1.盒子模型組成
邊框(border)
外邊距(margin)
內邊距(padding)
盒子的內容(content)
2.邊框
border-color:邊框顏色
border-top-color 上邊框顏色
border-right-color右邊框顏色
border-bottom-color 下邊框顏色
border-left-color 左邊框顏色
border-width:邊框的寬度
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style:邊框樣式
border-top-style
border-right-style
border-bottom-style
border-left-style
常見樣式:
none
hidden
dotted
dashed
solid
double
border:邊框簡寫
同時設置邊框的顏色、粗細和樣式
例:border: 1px dashed red;
3.外邊距margin(CSS外邊距是圍繞在元素邊框的空白區域)
margin-top
margin-right
margin-bottom
margin-left
margin
注意：margin:0px auto;可使元素居中對齊
4. 內邊距padding(元素的內邊距在邊框和內容區之間)
margin-top
margin-right
margin-bottom
margin-left
margin
5. 盒子模型的尺寸
盒子模型總尺寸=border+padding+margin+內容寬度
6.box-size
content-box:默認值，盒子的總尺度
border-box:盒子的寬度或高度等於元素內容的寬度或高度
inherit:元素繼承父元素的盒子模型模式
7.圓角邊框(border-radius)
7.1 border-radius:x y z m;
例:border-radius: 20px 10px 50px 30px
注意:四個屬性值按順時針排列

7.2 圓形
a.元素的寬度和高度必須相同
b.圓角的半徑爲元素寬度的一半，或者直接設置圓角半徑值爲50%
例:div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
7.3 半圓
a.製做上半圓或下半圓時，元素的寬度是高度的2倍，並且圓角半徑爲元素的高度值
b.製做左半圓或右半圓時，元素的高度是寬度的2倍，並且圓角半徑爲元素的寬度值
7.4 扇形
a.「三同」是元素寬度、高度、圓角半徑相同
b.「一不一樣」是圓角取值位置不一樣
7.5 盒子陰影
box-shadow:inset x-offset y-offset blur-radius color;
inset:陰影類型內陰影
x-offset：X軸位移，指定陰影水平位移量
y-offset:Y軸位移，用來指定陰影垂直位移量
blur-radius:陰影模糊半徑陰影向外模糊的模糊範圍
color:陰影顏色，定義繪製陰影時所使用的顏色

第七章
1.標準文檔流
1.1 標準文檔流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式天然排列。這也是元素默認的排列方式
1.2 標準文檔流組成
a.塊級元素（block）
<h1>…<h6>、<p>、<div>、列表
b.內聯元素（inline）
<span>、<a>、<img/>、<strong>...
注意:內聯標籤能夠包含於塊級標籤中，成爲它的子元素，而反過來則不成立.
2.display屬性
2.1 屬性值
block：塊級元素的默認值，元素會被顯示爲塊級元素，該元素先後會帶有換行符
inline：內聯元素的默認值。元素會被顯示爲內聯元素，該元素先後沒有換行符
inline-block：行內塊元素，元素既具備內聯元素的特性，也具備塊元素的特性
none：設置元素不會被顯示
2.2 display特性
a.塊級元素與行級元素的轉變（block、inline）
b.控制塊元素排到一行（inline-block）
c.控制元素的顯示和隱藏（none）
3.浮動float
3.1 浮動屬性值
left：元素向左浮動
right：元素向右浮動
none：默認值。元素不浮動，並會顯示在其文本中出現的位置
3.2 清除浮動
left：在左側不容許浮動元素
right：在右側不容許浮動元素
both：在左、右兩側不容許浮動元素
none默認值。容許浮動元素出如今兩側

4.父邊框塌陷
4.1 緣由
浮動元素脫離標準文檔流就可能致使父邊框塌陷.
4.2 解決方案
a.浮動元素後面加空div
例:<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮動的盒子……</div>
<div class="clear"></div>
</div>
.clear{ clear: both; margin: 0; padding: 0;}
b.設置父元素的高度
#father {height: 400px; border:1px #000 solid; }
c.父級添加overflow屬性
#father {overflow: hidden;border:1px #000 solid; }
d.父級添加僞類after
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮動的盒子……</div>
</div>
.clear:after{
content: ''; /*在clear類後面添加內容爲空*/
display: block; /*把添加的內容轉化爲塊元素*/
clear: both; /*清除這個元素兩邊的浮動*/
}
5.溢出處理overflow
visible： 默認值。內容不會被修剪，會呈如今盒子以外
hidden：內容會被修剪，而且其他內容是不可見的
scroll：內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他內容
auto：若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容

第八章 定位網頁元素
1.定位position
static：默認值，沒有定位
relative：相對定位
absolute：絕對定位
fixed：固定定位
2.static屬性值
沒有定位，以標準流方式顯示
3.relative屬性值
3.1 偏移設置：top、left、right、bottom
注意：left和top正、負取值的方向
3.2 規律:
a.設置相對定位的盒子會相對它原來的位置，經過指定偏移，到達新的位置
b.設置相對定位的盒子仍在標準文檔流中
c.設置相對定位的盒子原來的位置會被保留下來
4.absolute屬性值
4.1 偏移設置：top、left、right、bottom
4.2 規律
a.使用了絕對定位的元素以它最近的一個「已經定位」的「祖先元素」 爲基準進行偏移
b.若是沒有已經定位的祖先元素，會以瀏覽器窗口爲基準進行定位
c.絕對定位的元素從標準文檔流中脫離，
d.元素位置發生偏移後，它原來的位置不會被保留下來
注意:1)設置了絕對定位但沒有設置偏移量的元素將保持在原來的位置。
在網頁製做中能夠用於須要使某個元素脫離標準流，而仍然但願它保持在原來的位置的狀況
2)絕對定位須要設置left或者top纔會生效.
5.fixed屬性值
5.1 偏移設置： left、right、top、bottom
5.2 規律
相似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器窗口

6.屬性應用場景
6.1 相對定位的使用場景
相對定位通常狀況下不多本身單獨使用，都是配合絕對定位使用，爲絕對定位創造定位父級而又不設置偏移量
6.2 絕對定位使用場景
通常狀況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景
6.3 固定定位使用場景
通常在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等
注意:偏移量不會隨滾動條的移動而移動

7.z-index
1).調整元素定位時重疊層的上下位置
2).z-index屬性值：整數，默認值爲0
3).設置了positon屬性時，z-index屬性能夠設置各元素之間的重疊高低關係
z-index值大的層位於其值小的層上方
8.元素透明度
1)opacity:x //x值爲0~1，值越小越透明
2)filter:alpha(opacity=x) //x值爲0~100，值越小越透明

第九章 CSS3動畫製做
1.CSS3變形transform
語法:transform:[transform-function] *;
設置變形函數，能夠是一個，也能夠是多個，中間以空格分開
2.變形函數
2.1 translate(tx,ty)：平移函數，基於X、Y座標從新定位元素的位置
translateX（tx）:表示只設置X軸的位移
translateY（ty:表示只設置Y軸的位移
2.2 scale(tx,ty)：縮放函數，可使任意元素對象尺寸發生變化
scaleX(sx)：表示只設置X軸的縮放
scaleY(sy)：表示只設置Y軸的縮放
2.3 rotate(a)：旋轉函數，取值是一個度數值
參數a單位使用deg表示
參數a取正值時元素相對原來中心順時針旋轉
2.4 skew(ax,ay)：傾斜函數，取值是一個度數值
skewX（ax）：表示只設置X軸的傾斜
skewY（ay）：表示只設置Y軸的傾斜
注意:rotate( )函數只是旋轉，而不會改變元素的形狀
skew( )函數是傾斜，元素不會旋轉，會改變元素的形狀

3.過渡transition
3.1 transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等
語法:transition:[transition-property transition-duration transition-timing-function transition-delay ]
3.2 過渡屬性（ transition-property ）
1)定義轉換動畫的CSS屬性名稱
2)取值
屬性名稱：指定的CSS屬性（width、height、background-color屬性等）
all：指定全部元素支持transition-property屬性的樣式，通常爲了方便都會使用all
3.3 過渡所需的時間（ transition-duration ）
定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位爲秒（s）
3.4 過渡動畫函數（ transition-timing-function ）
1)指定瀏覽器的過渡速度，以及過渡期間的操做進展狀況，經過給過渡添加一個函數來指定動畫的快慢方式
2)取值
ease：速度由快到慢（默認值）
linear：速度恆速（勻速運動）
ease-in：速度愈來愈快（漸顯效果）
ease-out：速度愈來愈慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）

3.5 過渡延遲時間（ transition-delay ）
1)指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果
2)取值
正值：元素過渡效果不會當即觸發，當過了設置的時間值後纔會被觸發
負值：元素過渡效果會從該時間點開始顯示，以前的動做被截斷
0：默認值，元素過渡效果當即執行

3.6 過渡觸發的機制
1)僞類觸發
：hover
：active
：focus
：checked
2)媒體查詢：經過@media屬性判斷設備的尺寸，方向等
3)JavaScript觸發：用JavaScript腳本觸發

3.7 使用步驟
a.在默認樣式中聲明元素的初始狀態樣式
b.聲明過渡元素最終狀態樣式，如懸浮狀態
c.在默認樣式中經過添加過渡函數，添加一些不一樣的樣式

4. animation動畫
4.1 實現動畫的組成部分
a.經過相似Flash動畫的關鍵幀來聲明一個動畫
b.在animation屬性中調用關鍵幀聲明的動畫實現一個更爲複雜的動畫效果
4.2 設置關鍵幀
語法一:
@keyframes name {
from {/*CSS樣式寫在這裏*/}
percentage {/*CSS樣式寫在這裏*/}
to {/*CSS樣式寫在這裏*/}
}
語法二:
@keyframes name {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
注意：寫兼容的時候瀏覽器前綴是放在@keyframes中間
例如：@-webkit-keyframes、@-moz- keyframes

4.3 調用關鍵幀
animation:animation-name animation–duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-mode;

animation-name：由@keyframes建立的動畫名稱
animation–duration：動畫時間
animation-timing-function：動畫方式
animation-delay：延遲時間
animation-iteration-count ：動畫的播放次數
animation-direction ：動畫的播放方向
animation-play-state ：動畫的播放狀態
animation-fill-mode：動畫開始以前和結束以後發生的操做
1）動畫的播放次數（animation-iteration-count）
a.值一般爲整數，默認值爲1
b.特殊值infinite，表示動畫無限次播放
2）動畫的播放方向（animation-direction）
a.normal，動畫每次都是循環向前播放
b.alternate，動畫播放爲偶數次則向前播放
3）動畫的播放狀態（animation-play-state）
a.running將暫停的動畫從新播放
b.paused將正在播放的元素動畫停下來
4）動畫發生的操做（animation-fill-mode）
a.forwards表示動畫在結束後繼續應用最後關鍵幀的位置
b.backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀
c.both表示元素動畫同時具備forwards和backwards的效果