盒子布局与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;
      }