盒子佈局與css中的兩種漸變

阿新 • • 發佈：2021-11-14

盒子佈局與css中的兩種漸變

盒子的水平佈局

元素水平方向的佈局：
元素在其父元素中，水平方向的位置由以下幾個屬性共同決定
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
  - 調整情況：
    這七個值中有三個值可設定為auto
    - width 預設值為 auto
    - margin-left 預設值 0
    - margin-right 預設值 0
      1. 如果七個值中沒有auto的情況，則瀏覽器會自動調整margin-right的值使等式滿足
      2. 如果某個值為auto，則會自動調整為auto的那個值以使等式成立
      3. 如果將一個寬度和一個外邊距設定為auto，則寬度會調到最大，設定為auto的外邊距自動為0
      4. 如果將三個值都設定為 auto ，則外邊距都是0，寬度最大
      5. 如果將外邊距都設定為auto ，寬度為固定值，則外邊距設定為相同的值
        利用這一特點來使一個元素在其父元素中水平居中
        
        width:100px; margin:0 auto; /*水平居中*/

盒子的垂直佈局

預設情況下：父元素的高度被內容撐開
子元素是在父元素的內容區中排列的
- 如果子元素的大小超過了父元素，則子元素會從父元素中溢位
  使用overflow 屬性設定父元素如何處理溢位的子元素
  - 可選值
    - visible 預設值子元素會從父元素中溢位，在父元素外部的位置溢位
    - hidden 溢位的內容將會被裁剪，不會顯示
    - scroll 生成兩個滾動條，通過滾動條來檢視完整的內容
    - auto 根據需要生成滾動條
    - overflow-x：單獨處理水平方向
    - overflow-y：單獨處理垂直方向

行內元素的盒模型：
行內元素不支援設定寬度和高度
行內元素可以設定 padding ，但是垂直方向 padding 不影響頁面的佈局
行內元素可以設定 margin ，但是垂直方向 margin 不影響頁面的佈局
行內元素可以設定 border ，但是垂直方向 border 不影響頁面的佈局
無論transition還是keyframes，如何讓變化更自然，這是前端應該考慮的問題。
兩種漸變

1。影象漸變

@keyframes looppic{
    from{
        background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);
        }
    25%{
        background:url(http://b.zol-img.com.cn/sjbizhi/images/8/750x530/1422008118352.jpg);
        }
    75%{
        background:url(http://img3.duitang.com/uploads/item/201506/11/20150611192600_Stxhe.png);
        }
    to{
        background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);

       } 
   } 

.keyframeslp{ width:400px; height:200px; -webkit-animation:looppic 6s ease-in infinite; -moz--animation:looppic 6s ease-in infinite; -o--animation:looppic 6s ease-in infinite; -ms--animation:looppic 6s ease-in infinite; }

2.顏色漸變

程式碼如下

@keyframes opa{
    from{
        opacity:1}
        10%{
            opacity:0.75}
            20%{
                opacity:0.5}
                30%{
                    opacity:0.25;
                    content:text content;
                    color:#000000;}
                    40%{
                        opacity:0}
                        50%{
                            opacity:0.25}
                            68%{
                                opacity:0.5}
                                85%{
                                    opacity:0.75}
                                    to{
                                        opacity:1}
                        }
.bc{
    background:#F10E12;
    width:100px;
    height:100px;
    -webkit-animation:opa 5s ease-in-out infinite;
    -o-animation:opa 5s ease-in-out infinite;
    -ms-animation:opa 5s ease-in-out infinite;;
    -moz-animation:opa 5s ease-in-out infinite;
    }