前端居中方式

程序员文章站 2022-04-25 14:31:32

...

CSS

适配手机端语法

/* 即宽度小于等于420px时触发 */
@media (max-width: 420px){
    .col-sm-6.col-md-3.adapt1 {
      position: relative;
      top: 2.5rem;
    }
  }
/* 即宽度大于等于420px时触发 */
@media (min-width: 420px){
    .col-sm-6.col-md-3.adapt1 {
      position: relative;
      top: 2.5rem;
    }
  }

绝对定位、相对定位、固定定位：

绝对定位脱离了文档流，绝对定位元素渲染时它依赖的元素已经渲染完成百分比是可以计算出来的。
而相对定位，子元素的高度会影响父元素，此时父元素高度未知，要等子元素高度确定，父元素高度才确定。
注意:单独使用relative的时候，top:%不会移动，但是换成px会移动。

相对定位 relative

设置right为正值，元素往左移动，bottom设置正值，元素往上移动。负值则往与正值相反的方向移动
设置left为正值，元素往右移动，top设置正值，元素往下移动。

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响（没有脱离标准文档流）
设置相对定位的盒子原来的位置会被保留下来（之前的位置被空出来了，会影响页面布局）
相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来（所以其他元素因此移动）
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
- 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

绝对定位 absolute

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移（定位的基准是相对于最近的祖先元素在定位，没有则以浏览器窗口进行定位）
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素脱离标准文档流，这意味着它们对其他元素的定位不会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

固定定位 fixed

固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
固定定位的使用场景
- 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

CSS3渐变

线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
linear-gradient ( position渐变方向, color1第一种颜色值, color2第二种颜色,…)
To right从左到右

盒子

溢出处理

box-sizing: border-box;

添加阴影

box-shadow: 0 0 10px #ddd;

居中方式

把margin设为auto
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
使用 text-align:center
这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
使用line-height让单行的文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
使用display:table-cell来居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：

但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
position: absolute;
left: 50%;
top: 50%;
// 相对于自身长宽移动50%
transform: translate(-50%, -50%);
使用绝对定位来进行居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
使用浮动配合相对定位来进行水平居中
浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。
看下代码：

参考文档

跳动的桃心

<span class="with-love">
	<i class="fa fa-heart" id="hearts"></i>
</span>

/* 自定义页脚跳动的心样式 ，记得 id="heart"给i图标添加的*/
#hearts {
    animation: heartsAnimate 1.33s ease-in-out infinite;
}
@keyframes heartsAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
.with-love {
    color: #f10610;
}

js

单击图片查看方式

<!-- 图片单击效果 -->
      <script>
        function createImgEventFullScreen() {
					// .article-entry图片的父级元素，f12查看图片即有
          var imgs = $(".article-entry").find("img");
          for (var i = 0; i < imgs.length; i++) {
            // $(imgs[i]).click(createCover(imgs[i]));
            imgs[i].onclick = function (e) {
              var src = e.srcElement.currentSrc;
              var _this = $(this);
              createCover(src, _this);
            }
          }

          function createCover(src, _this) {
            var cover = $(
              "<div id='outerDiv'  style='position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:5;width:100%;height:100%;display:none;'><div id='innerDiv' style='position:absolute;'><img  id='bigImg' style='border:5px solid #fff;' src=''/></div></div>"
            );
            $("#outerDiv").remove();
            $("body").append(cover);
            imgShow("#outerDiv", "#innerDiv", "#bigImg", _this, src);

          }
        }

        function imgShow(outerDiv, innerDiv, bigImg, _this, src) {
          //var src = _this.attr("src"); //获取当前点击的common-img元素中的src属性
          $(bigImg).attr("src", src); //设置#bigImg元素的src属性

          /*获取当前点击图片的真实大小，并显示弹出层及大图*/
          $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width(); //获取当前窗口宽度
            var windowH = $(window).height(); //获取当前窗口高度
            var realWidth = this.width; //获取图片真实宽度
            var realHeight = this.height; //获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) { //判断图片高度
              imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
              imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
              if (imgWidth > windowW * scale) { //如宽度仍大于窗口宽度
                imgWidth = windowW * scale; //再对宽度进行缩放
              }
            } else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
              imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
              imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
            } else { //如果图片真实高度和宽度都符合要求，高宽不变
              imgWidth = realWidth;
              imgHeight = realHeight;
            }
            $(bigImg).css("width", imgWidth); //以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
            $(innerDiv).css({
              "top": h,
              "left": w
            }); //设置#innerDiv的top和left属性
            //console.log('****')
            $(outerDiv).fadeIn("fast"); //淡入显示#outerDiv
          });

          $(outerDiv).click(function () { //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
          });
        }
        setTimeout(function () {
          createImgEventFullScreen();
        }, 1000)
      </script>

前端居中方式

CSS

适配手机端语法

绝对定位、相对定位、固定定位：

相对定位 relative

绝对定位 absolute

固定定位 fixed

CSS3渐变

线性渐变

盒子

居中方式

跳动的桃心

js

单击图片查看方式

Java窗体居中显示的2种方法(实例讲解)

Struts2中接收表单数据的三种驱动方式

Javascript中绑定click事件的四种方式介绍

Vue加载组件、动态加载组件的几种方式

jquery实现Ajax请求的几种常见方式总结

微信小程序前端自定义分享的实现方法

微信小程序页面间跳转传参方式总结

详解vue配置后台接口方式

C# double和decimal数据类型以截断的方式保留指定的小数位数

iOS开发Quick Actions创建桌面Icon快捷方式