flex布局 響應式布局 過渡 動畫
阿新 • • 發佈：2018-09-27
協同 排列 war width 頁面 key ini doctype 學習
Z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>z-index</title>
<style type="text/css">
.box{
<!-- 輔助子級進行絕對定位 -->
position:relative;
width:400px;
height:400px;
background-color:red;
margin:0 auto;
position:relative;
}
.d1,.d2,.d3{
width:200px;
height:200px;
position:absolute;
}
.d1{
background-color:orange;
}
.d2{
background-color:blue;
top:calc(50% - 100px);
left:calc(50% - 100px);
}
.d3{
background-color:black;
right: 0;
bottom:0;
}
<!-- 脫離文檔流的標簽，具有z-index屬性，可以用來控制顯示層次的優先級，值為任意正整數 -->
.d2{
z-index:1;
}
</style>
</head>
<body>
<!-- 需求1：d1,d2,d3均為box的一半大小 -->
<!-- 需求2：d1左上角,d2居中,d3右下角 -->
<!-- 需求3：d2區域在最上方（會覆蓋d1,d3重疊部分） -->
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
Flex布局
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。設為Flex布局以後，子元素的float、clear和vertical-align屬性將失效。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
水平為軸（main axis），主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end。
垂直為交叉軸（cross axis），交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flex布局</title>
<style type="text/css">
.container{
width:600px;
height:600px;
border:1px solid black;
margin:0 auto;
}
.item{
/* width:200px; */
/* height:200px; */
/* border-radius:50%; */
background-color:orange;
}
.container{
<!-- 容器：規定容器為flex，則容器內的標簽會成為該容器的項目（item） -->
display:flex;
}
.item{
<!-- 默認只能一行排列，所以item總寬不允許超出container寬度 -->
width:300px;
<!-- 默認情況下item可以不規定高度，高度會自適應父級
item沒有設置寬度下，可以通過flex-frow決定對於父級的占比 -->
}
.it1,.it3{
flex-grow:1;
}
.it2{
flex-grow:3;
background-color:pink;
}
/* container屬性 */
.container{
<!-- flex-direction:row | row-reverse |column |column-reverse; 方向
默認是row 列 column 是行 reverse反轉 如果是占比的方式 行的時候是按照高來決定占比-->
flex-direction:row;
flex-direction:column;
<!-- flex-wrap:nowrap | wrap | wrap-reverse; 換行方式 -->
<!-- justify-content:flex-start|flex-end|center|space-between|space-around; 水平對齊方式 -->
justify-content:space-between;
}
.item{
width:100px;
}
</style>
<!-- 總結 -->
<!-- 1.將父級display屬性設置flex，則父級成為container，子級成為item -->
<!-- 2.container 設置item的排列方向flex-direction -->
<!-- 3.item對於container的空間占比flex-grow -->
</head>
<body>
<!-- 學習目的 -->
<!-- 之前學習的盒模型布局（display） float布局 positio都不能很好的解決block垂直居中的問題，flex布局擅長-->
<div class="container">
<div class="item it1">1</div>
<div class="item it2">2</div>
<div class="item it3">3</div>
</div>
</body>
</html>
容器屬性
flex-direction 屬性 決定主軸的方向（即項目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap 屬性 定義，如果一條軸線排不下，如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow 屬性 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
justify-content 屬性 定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items 屬性 定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
align-content 屬性 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
響應式布局
1.在響應式布局內，css語法同正常樣式表語法
2.響應式布局之間存在不同屏幕尺寸的限制，使用樣式相互不影響
解釋：滿足當前屏幕尺寸時，該樣式塊起作用，不滿足時，則樣式塊失效
3.當響應式布局中樣式塊起作用時，會與正常樣式塊設置協同布局，遵循選擇器的優先級規則
原則：
1.采用響應式布局的頁面，基本樣式塊只做共性樣式設置，需要根據頁面尺寸進行適應變化的樣式均有響應式布局處理
2.要進行響應式布局的頁面要處理所有屏幕尺寸下的樣式塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>響應式布局</title>
<style type="text/css">
<!-- 基本樣式塊 -->
/* .box{
max-width:1200px;
width:95%;
margin:0 auto;
background-color:red;
}
.it{
width:300px;
height:300px;
font:900 50px/300px ‘STSong‘;
text-align:center;
float:left;
border-radius:50%;
background-color:orange;
}
.box:after{
content:"";
display:block;
clear:both;
} */
html,body{
margin:0;
}
.it{
height:300px;
background-color:orange;
font:900 50px/300px ‘STSong‘;
text-align:center;
border-radius:50%;
float:left;
}
.box:after{
content:"";
display:block;
clear:both;
}
/* 屏幕寬度超出1200px */
@media only screen and (min-width:1200px ){
<!-- 1.在響應式布局內，css語法同正常樣式表語法
2.響應式布局之間存在不同屏幕尺寸的限制，使用樣式相互不影響
解釋：滿足當前屏幕尺寸時，該樣式塊起作用，不滿足時，則樣式塊失效
3.當響應式布局中樣式塊起作用時，會與正常樣式塊設置協同布局，遵循選擇器的優先級規則 -->
.box{
background-color:red;
}
.it{
width:25%;
}
.box:after{
content:"";
display:block;
clear:both;
}
<!-- 原則：
1.采用響應式布局的頁面，基本樣式塊只做共性樣式設置
需要根據頁面尺寸進行適應變化的樣式均有響應式布局處理
2.要進行響應式布局的頁面要處理所有屏幕尺寸下的樣式塊 -->
}
<!-- 屏幕寬度間於600至1200px -->
@media only screen and (min-width: 600px) and (max-width:1200px ){
.box{
background-color:pink;
}
.it{
width:30%;
margin:0 calc(10% / 6);
}
}
<!-- 寬度小於600px -->
@media only screen and (max-width:600px ){
.box{
background-color:cyan;
}
.it{
width:80%;
margin-left:10%;
min-width:300px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it">1</div>
<div class="it">2</div>
<div class="it">3</div>
<div class="it">4</div>
<div class="it">5</div>
<div class="it">6</div>
<div class="it">7</div>
<div class="it">8</div>
<div class="it">9</div>
<div class="it">10</div>
<div class="it">11</div>
<div class="it">12</div>
</div>
</body>
</html>
過渡
過渡：從一個狀態以動畫方式變成另一種狀態的這種變化過程叫做過渡
過渡效果通過父級產生，可以制作一個父級（對應下面示例代碼裏的hover）層
父級（對應下面示例代碼裏的hover）層處理方式：與顯示層同等區域大小
同樣可以將顯示層的位置交於父級（對應下面示例代碼裏的hover）層處理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>過渡</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:orange;
<!-- 過度 -->
<!-- 持續時間 -->
<!-- 來去均有過度效果 -->
transition-duration:.5s;
<!--延遲時間 -->
/* transition-delay:1s; */
<!-- 過度屬性 默認屬性all -->
<!-- 定義的屬性慢慢變 其他的屬性瞬間變 -->
/* transition-property:background-color; */
/* transition-property:width,height */
<!-- 過度的曲線 -->
<!-- transition-timing-function:linear; */
<!-- 整體設置 -->
transition:all .5s .2s linear;
<!-- 第一個屬性 第二個持續時間 第三個延遲時間 第四個曲線 -->
}
.hover{
width:200px;
height:200px;
}
<!-- 可以制造第二狀態的處理方式 -->
.hover:hover .box{
width:400px;
height:100px;
background-color:red;
<!-- transition放在這只有放上去有動畫效果鼠標不在區域內就瞬間變回沒有過度效果 -->
/* transition-duration:0.2s; */
}
.box:active{
}
</style>
</head>
<body>
<div class="hover">
<div class="box">
</div>
</div>
</body>
</html>
過渡屬性
transition-property 屬性 表示可過渡的樣式屬性 transition-property: all | [css1 [...]]; transition-duration 屬性 表示過渡持續時間 transition-duration: <time>; transition-delay 屬性 表示過渡延遲時間 transition-delay: <time>; transition-timing-function 屬性 表示過渡運動曲線 transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier(); -- linear：勻速 -- ease：慢快慢 -- ease-in-out：慢快慢 -- easa-in：慢快 -- ease-out：快慢 -- cubic-bezier()：貝賽爾曲線函數 transition 屬性 表示前四個屬性整體賦值 transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
動畫
@keyframes <name>{
/*from未寫任何屬性設置時，默認全部取初始值（初始狀態）*/
from{}
to{}
}
@keyframes <name>{
0% {}
...
100% {}
}
動畫屬性設置給指定選擇器標簽，動畫體在樣式中單獨設置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
<!--動畫樣式-->
.box {
<!--綁定動畫名-->
animation-name: wasai;
<!--持續時間-->
animation-duration: 1s;
<!--延遲時間-->
/*animation-delay: .1s;*/
<!--動畫結束停留位置:backwards起點 forwards終點-->
/*animation-fill-mode: forwards;*/
<!--運動次數 infinite無數次-->
animation-iteration-count: 4;
<!--多次運動方向的規則-->
/*alternate:來回*/
/*alternate-reverse:終點開始來回*/
/*animation-direction: alternate-reverse;*/quotes: ;
<!--動畫狀態 running-->
/*animation-play-state: paused;*/
<!--整體設置-->
animation: wasai 1s 2 linear alternate;
}
.box:hover {
animation-play-state: running;
}
<!--動畫體-->
@keyframes wasai{
0% {
}
100% {
width: 400px;
}
}
@keyframes wasai1{
0% {}
100% {}
}
@keyframes wasai2{
0% {}
100% {}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
flex布局 響應式布局 過渡 動畫