块级元素 返回顶部

在做付款页面网页时 遇到一个问题 需求是表格底部有付款按钮在右下角

我给button设置为有浮动 并设有外边距 但是 它不会被包裹在 表格那个大div里

 

因为设置浮动后他就会’飘‘起来 就不会在表格div包裹住了 所以我需要 设置一个不浮动的div

透明的 撑着 这样表格变化button也会变化不会出去到表格外边。

 

行内元素的水平方向左右边距会随着你调整产生变化而上下边距不会变的

display: inline-block变成行内的块级元素可以设置长宽 边距

设置float属性后不管他是什么类型元素都会让元素以 display: inline-block变成行内元素

 

竖直居中css属性有 vertical-align   只有父元素 为td th 时 才会生效 其他例如div p 等块级元素是无效的

td标签默认设置了 vertical-align 值为 middle 所以不需要设置了

 

加载图片 png 它是等网页加载完成后 遍历整个页面所有图片元素 找到后缀为.png的图片改为span标签 设为

行内元素  长和宽跟原来一样不变  

 

做仿写页面时遇到 图片下方底部有字体 字体跟图片是有距离的 我不想把他们设为两个div 里

我利用 line-height 行高和 text-align 文本剧中实现这样  

.picture_font{
    width: 345px;
    height: 260px;
    padding: 20px;
    display: inline-block;
    line-height: 35px;
    font-size: 25px;
    text-align: center;
    padding-top: 30px;
}

 当你行高设置成跟高度一样时 它会居中 z在div块的中间 所以我就把值设小 他就会在底部居中

 

跳到顶部 有几种写法   

可以在body设置一个id xx 然后给按钮一个超链接a标签

<a href="#top" target="_self">返回顶部</a>

 它不会平缓的滑动到顶部 而是跳转一下到顶部

 

scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）

<a href="javascript:scroll(0,0)">返回顶部</a>

 这个也不会滑动到顶部

$(document).ready(function() {
    $("#back-to-top").hide();
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
          $("#back-to-top").fadeIn(1500);
        } else {
          $("#back-to-top").fadeOut(1500);
        }
      });
      $("#back-to-top").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        1000);
        return false;
      });
    });
  });


这是一个可以平滑的返回顶部的js代码   
首先把back -to -top隐藏 
当 滚动条到距离顶部100像素时显示按钮   跳转链接出现

 这段代码可以滑动到顶部