CSS基礎知識點

清除浮動的方式

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(簡寫屬性): 要過渡的屬性 花費時間 運動曲線 何時開始
  1. transition-property:(none | all | property)為哪些屬性設置過渡效果
  2. transition-duration:定義過渡效果花費的時間。默認是 0
  3. transition-timing-function:(linear|ease|ease-in|ease-out|ease-in-out)規定過渡效果的時間曲線。默認是 "ease"。
  4. 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}
}

左邊固定,右邊自適應布局。

  1. 左邊左浮動,右邊加個overflow:hidden;(注意,右邊margin-left數值小于左邊的寬度則無效)
   #lt{ float: left;width:200px; background: #ff0;}
   #rt{ overflow: hidden; background: #f0f;}
  1. 左邊左浮動,右邊加個margin-left;
   #lt{ float: left; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}
  1. 左邊絕對定位absolute或fixed,右邊加個margin-left;
   #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
   #rt{ margin-left: 200px; background: #f0f;}
  1. 左右兩邊絕對定位,右邊加個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;}

右邊固定,左邊自適應的布局

  1. 左邊左浮動,margin-left負值,右邊右浮動;
   #lt{float:left; width:100%;background: #00f;margin-right: -200px;}
   #rt{float: right; width: 200px;background: #ff0;}
  1. 右邊絕對定位,左邊margin-right;
   #lt{margin-right:200px; background: #00f;}
   #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}
  1. 左右兩邊絕對定位,左邊加個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)
    參考文章
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。