清除浮動的方式
1、額外標簽法(在最后一個浮動標簽后,新增加一個標簽,給其設置clear: both;)不建議使用
- 缺點:添加無意義標簽
2、父級添加overflow屬性(overflow:hidden)(不推薦)
通過觸發BFC方式,實現清除浮動
- 缺點:內容增多的時候容易造成不會自動換行導致內容被隱藏掉,無法顯示要溢出的元素
3、使用after偽元素清除浮動(推薦使用)
.clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行,其他瀏覽器不執行*/
}
4、使用before和after雙偽元素清除浮動
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
5、父級div定義height
- 缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題
過渡transition 動畫animation
過渡動畫:是從一個狀態 漸漸的過渡到另外一個狀態,經常和 :hover 一起 搭配使用。
- transition(簡寫屬性): 要過渡的屬性 花費時間 運動曲線 何時開始
- transition-property:(none | all | property)為哪些屬性設置過渡效果
- transition-duration:定義過渡效果花費的時間。默認是 0
- transition-timing-function:(linear|ease|ease-in|ease-out|ease-in-out)規定過渡效果的時間曲線。默認是 "ease"。
- transition-delay:規定過渡效果何時開始。默認是 0。
注:如果想要所有的屬性都變化過渡, 寫一個all 就可以。
.father .small {
width: 100px;
height: 100px;
background-color: darkcyan;
float: left;
/*1. transition: 要過渡的屬性 花費時間 運動曲線 何時開始;*/
/*2. 如果有多組屬性,我們用逗號隔開*/
/*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
/*3. all 所有屬性都會變化*/
/*transition: all 1s ease 0s;*/
/*4. 過渡寫到本身上,而不是 hover里面*/
/*transition: all 0.5s;*/
/*5. 擴展,可以設置不同時進行的動畫*/
transition: width 1s, height 1s linear 1s, background-color 1s, transform 1s;
}
.father .small:hover {/* 鼠標經過盒子,我們的寬度變寬200,高度變高200 red */
width: 200px;
height: 200px;
background-color: red;
transform:rotate(45deg);
}
動畫animation
animation: name duration timing-function delay iteration-count direction;
默認值: none 0 ease 0 1 normal
- animation-name : 要綁定到選擇器的關鍵幀(動畫)名稱
- animation-duration : 動畫持續時間
- animation-timing-function : 動畫的速度變化
- animation-delay : 延遲執行的時間
- animation-iteration-count : 動畫的播放次數
- animation-direction : 動畫運動的方向
.father .small {
width: 100px;
height: 100px;
background-color: darkcyan;
float: left;
position: relative; /*這里一定要改為相對布局,否則位置不能改變*/
animation: anim 5s infinite alternate;
}
/*animation:后anim表示這個動畫的名字,后面是持續5s*/
/*infinite(無限的,無數的)alternate(交替的輪流的)合在一起:無限輪替*/
@keyframes anim{
0%{background-color: cornflowerblue;left: 0px;top: 0px}
25%{background:skyblue;left: 200px;top:0}
50%{background-color: deepskyblue;left: 200px;top: 200px}
75%{background-color: aqua;left: 0px;top: 200px}
100%{background-color:cornflowerblue;left: 0px;top: 0px}
}
左邊固定,右邊自適應布局。
- 左邊左浮動,右邊加個overflow:hidden;(注意,右邊margin-left數值小于左邊的寬度則無效)
#lt{ float: left;width:200px; background: #ff0;}
#rt{ overflow: hidden; background: #f0f;}
- 左邊左浮動,右邊加個margin-left;
#lt{ float: left; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}
- 左邊絕對定位absolute或fixed,右邊加個margin-left;
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}
- 左右兩邊絕對定位,右邊加個width,top,left,right
#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}
#rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
右邊固定,左邊自適應的布局
- 左邊左浮動,margin-left負值,右邊右浮動;
#lt{float:left; width:100%;background: #00f;margin-right: -200px;}
#rt{float: right; width: 200px;background: #ff0;}
- 右邊絕對定位,左邊margin-right;
#lt{margin-right:200px; background: #00f;}
#rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}
- 左右兩邊絕對定位,左邊加個width,top,left,right
#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}
#rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}
flex布局
- flex-container的屬性有flex-direction, flex-wrap, justify-content, align-items, align-content
flex-direction(主軸方向):
1、 row(布局為一行,從start開始排)
2、 row-reverse(布局為一行,從end開始排)
3、column(布局為一列,從start開始排)
4、column-reverse(布局為一列,從end開始排)
flex-wrap(一條軸線排不下如何換行):
1、nowarp (不換行,在一行顯示)
2、wrap(內容超過后換行)
3、warp-reverse(換行后有兩條軸線,reverse就是把軸線排列的順序倒置過來)
justify-content(主軸對齊方式):
1、 flex-start (start側對齊,左對齊)
2、flex-end(end側對齊,右對齊)
3、center(中心對齊)
4、space-between(左右兩側沒有間距,中間間距相同)
5、space-around(左右兩側的間距為中間間距的一半)
align-items(交叉軸對齊方式):
1、stretch; (拉伸)
2、flex-start(start側開始,上對齊)
3、flex-end(end側開始,下對齊)
4、center (中心對齊)
5、baseline(基線對齊)
align-content(多根軸線對齊方式):
1)stretch (拉伸)
2)flex-start (start側開始,上對齊)
3)flex-end(end側開始,下對齊)
4)center (中心對齊)
5)space-between(上下沒有間距,中間各子元素間距相同)
6)space-around (上下間距之和等于中間各個間距)
flex-item相關屬性有order,flex-grow,flex-shrink,flex-basis,align-self
- order(排列順序)
- flex-grow(放大比例,剩余空間怎么分配,如下圖所示,剩余空間的分配比例是1:2:1)
- flex-shrink (縮小比例,超出空間怎么壓縮)
- flex-basis (item所占主軸空間,優先級高于width)
- align-self (對齊方式,覆蓋align-items)
參考文章