css中基础padding的小技巧，移动端大用处

最新推荐文章于 2021-11-05 17:06:41 发布
最新推荐文章于 2021-11-05 17:06:41 发布
阅读量5.6k 收藏 1
点赞数 3
分类专栏： 前端布局 文章标签： padding 百分比 移动端 适应 ime33
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ime33/article/details/54380549
版权

http://blog.csdn.net/ime33

未经允许，不得转载！！

说的不全不周之处，欢迎指正、交流！！


padding内边距，属性有：auto、%、数值px以及inherit（inherit在任何IE下不兼容）；

padding包括padding-top、padding-right、padding-bottom、padding-left缩写{上下，左右}或{上，右，下，左}


浏览器渲染占位：

如效果图：


上图是一种常见的商品展示效果图，结构是一个图片+宝贝标题+价格+销量！

我们在PC端的处理方式：一般是图片高宽定死即可，这是OK的！


但是在移动端，固定高宽，no、no不宜采取；不定宽高度在移动端又会出现一种难看的“闪屏”的bug，很丑，很难看！这时候padding就上场了。

我们知道padding的百分比的参照物是其父元素的宽度。

demo：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-title" content="TMALL">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="format-detection" content="telephone=no, address=no">
        <title>http://blog.csdn.net/ime33  padding百分比填充</title>
        <style type="text/css">
            *{
                padding:0;
                margin: 0;
                font-family: "微软雅黑";
            }
            ul,li{
                list-style: none;
            }
            body{
                background: #e3e3e3;
            }
            .box .likebox{
                display: block;
                overflow: hidden;
                width:100%;
                background: #e3e3e3;
            }
            .box .likebox .header{
                position: relative;
                text-align: center;
                height: 40px;
                line-height: 42px;
            }
            .box .likebox .header:before{
                position: absolute;
                display: block;
                content: " ";
                height: 0;
                overflow: hidden;
                border-bottom: 1px solid #999;
                width: 24px;
                left: 30%;
                top: 50%;
            }
            .box .likebox .header:after{
                position: absolute;
                display: block;
                content: " ";
                height: 0;
                overflow: hidden;
                border-bottom: 1px solid #999;
                width: 24px;
                right: 30%;
                top: 50%;
            }
            .box .likebox .header h3{
                display: inline;
                font-weight: 400;
                color: #999;
                font-size: 12px;
                vertical-align: top;
            }
            .content .cell{
                float: left;
                width: 49.5%;
                position: relative;
                overflow: hidden;
                margin-bottom: 1%;
                background: #FFF;
                box-shadow: 1px 1px 1px rgba(0,0,0,.1);
            }
            .content .cell:nth-child(2n-1){
                margin-right: 1%;
            }
            .content .cell:before{
                display: block;
                content: " ";
                padding-top: 150%;
                height: 0;
            }
            .content .cell>*{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .content .cell .item{
                display: block;
            }
            .content .item .image {
                position: relative;
                padding-top: 100%;//重点
                height: 0;
                overflow: hidden;
                
            }
            .img-wrapper {
                background: #f7f7f7 url(./images/load.png) no-repeat center center;//可放loading
                background-size: contain;
            }
            .content .item .image img {//图片定位上去
                position: absolute;
                width: 100%;
                top: 0;
                left: 0;
            }
             .content .item .title {
                position: absolute;
                bottom: 15%;
                left: 0;
                width: 100%;
                box-sizing: border-box;
                height: 40px;
                line-height: 20px;
                padding: 0 10px;
                overflow: hidden;
                font-size: 14px;
                color: #666;
            }
            .content .item .detail {
                position: absolute;
                bottom: 4%;
                left: 0;
                padding: 0 10px;
                width: 100%;
                box-sizing: border-box;
                height: 18px;
                overflow: hidden;
            }
            .content .item .detail .price {
                float: left;
                height: 18px;
                line-height: 18px;
                text-align: center;
            }
            .content .item .detail .price .actPrice {
                color: #DD2727;
            }
            .content .item .detail .price>div {
                display: inline-block;
                margin-right: 2px;
            }
            .content .item .detail .price .actPrice .sym {
                font-size: 12px;
            }
            .content .item .detail .price .sym {
                font-family: Arial,sans-serif;
            }
             .content .item .detail .price .actPrice .num {
                font-size: 14px;
            }
            .content .item .detail .sale {
                float: right;
                font-size: 12px;
                color: #999;
                height: 18px;
                line-height: 18px;
            }
            .content .item .detail:after {
                display: block;
                content: ".";
                height: 0;
                visibility: hidden;
                clear: both;
                overflow: hidden;
            }
            .blank{
                display: inline-block;
                width: 100%;
                height: 100px;
                background: #e3e3e3;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="likebox">
                <div class="header">
                    <h3>猜你喜欢</h3>
                </div>
                <div class="content">
                    <div class="cell">
                        <a class="item" href="#">
                            <div class="image img-wrapper">
                                <img src="./images/0.jpg" class="img-ks-lazyload">
                            </div>
                            <div class="title">优贝宜 儿童短袖夏季衣服 男童t恤短袖宝宝夏装纯棉童装女童上衣</div>
                            <div class="detail">
                                <div class="price"><div class="actPrice"><span class="sym">¥</span><span class="num">16.8</span></div></div>
                                <div class="sale">月销:62233笔</div>
                            </div>
                        </a>
                    </div>
                    <div class="cell">
                        <a class="item" href="#">
                            <div class="image img-wrapper">
                                <img src="./images/1.jpg" class="img-ks-lazyload">
                            </div>
                            <div class="title">芭芭鸭儿童帆布鞋男童女童鞋子宝宝白色球鞋潮小白布鞋2016夏新款</div>
                            <div class="detail">
                                <div class="price"><div class="actPrice"><span class="sym">¥</span><span class="num">35.0</span></div></div>
                                <div class="sale">月销:29123笔</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        
    </body>
</html>

在这里我在图片容器上进行针对父元素宽度100%添加padding-top：100%，再让图片定位上去，当然也可以在容器的伪元素上进行padding操作，做法一致！

这样即使图片未加载出来，但是css已经渲染padding了一个位置，为图片展示做好了准备；

加料：在图片容器中添加loading被背景图，再配合一个淡入动画效果就更完美了；

.img-ks-lazyload {
                -webkit-animation: ks-fadeIn 350ms linear 0ms 1 normal both;
                animation: ks-fadeIn 350ms linear 0ms 1 normal both;
                opacity: 1;
            }
            @-webkit-keyframes ks-fadeIn{0%{opacity:0}100%{opacity:1}}
            @keyframes ks-fadeIn{0%{opacity:0}100%{opacity:1}}
            .img-ks-lazyload{-webkit-animation:ks-fadeIn 350ms linear 0ms 1 normal both;animation:ks-fadeIn 350ms linear 0ms 1 normal both;opacity:1}
            .img-ks-beforeload{opacity:0}

当然，可能你的图片不是1:1的，根据你的图片高宽比修改padding百分比值就好了！


总结

自适应的精髓在于宽度，margin/padding设置百分比弥补了元素高度无法自适应地与元素宽度保持一致的缺陷。


水平有限，欢迎指正、交流！！

ime33
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从Bootstrap 3中的列中删除填充
w36680130的博客
06-19 359
Problem: 问题： Remove padding/margin to the right and left of col-md-* in Bootstrap 3. 删除Bootstrap
android padding作用,android:padding和android:layout_margin的区别
weixin_31115971的博客
05-25 2764
简单点来说：android:padding是内边距，控件本身的内容与控件边缘的距离。android:layout_margin是外边距，控件与其他控件之间的距离。下面以具体的例子来进行解释：1、不设置边距android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizo...
内边距样式属性-padding
YXX_decsdn的博客
05-20 851
paddingpadding-top ， padding-right ， padding-left ，padding-bottompadding padding-top ， padding-right ， padding-left ，padding-bottom padding-top：设置元素上内边距的宽度，该属性有多个值 注意 行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元...
移动端h5 输入框padding-left会导致放大
Genge
12-18 3029
移动端html5 输入框padding-left会导致放大 解决办法： input { width: calc(100% - 10px); padding-left: 10px; } 目前而言，好的解决之道是width和padding均采用百分比值，例如下面这样： firefox低版本可能存在问题 input { width: 92%; padding-le
关于table表格头部固定和列固定的方式
b0303的博客
01-20 3263
无论你用什么框架都要用到table固定列或者表头的现象。最近用到了，写个demo以备后面用，顺便分享一下，提供给徐亚的人。 下面是代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>表格第一行和前几列固定</title&...
CSS【详解】遮罩
朝阳39的博客
11-05 9688
CSS遮罩的语法 功能：让一个元素按照某张图像的轮廓显示 兼容性：需使用-webkit-私有前缀 mask-image 遮罩图片 支持多图片，所有<image>数据类型的值都可以作为遮罩图像 半透明的PNG图像遮罩 效果见 https://demo.cssworld.cn/new/12/1-1.php <img src="nature-8.jpg" class="mask-image" width="256" height="192"> .mask-image { .
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套（div>li>span、p>span等）、多行内容的排版、字体图标的引入设置、图片的引入和设置、养成价格等后期需要加链接的元素单独成类。 包含内容：...
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-...
HTML5+CSS3基础篇(移动端&响应式).rar_HTML5移动端_css_html5_html5 移动_移动端
最新发布
09-21
总的来说，这个压缩包的内容涵盖了HTML5和CSS3在移动端开发中的关键知识点，包括响应式设计、流体布局、兼容性处理以及增强用户体验的各种技巧。通过学习和实践这些内容，开发者可以构建出既美观又适应多设备的网页...
keyframe 关键帧动画
weixin_41514525的博客
05-18 2653
实现网页中各部分有动画的出现，使得网页更加的高大上 @keyframes fadeIn{ from{ transform: translateY(100px); /* translateY 指的是相对与该元素原本的位置进行的Y轴方向的偏移*/ opacity: 0; } to{ transform: translateY(0...
移动端padding和margin的百分比设置实现占位
qq_35401191的博客
10-16 914
资源请求和加载都是需要时间的。对于图片一些内容的展示，当图片没有加载出来时。容器高为零，那么下面的dom元素会上移。当图片加载后，会容器撑开。这样会造成页面的重排。 为了解决以上问题我们可以使用padding的百分比占位实现（或者margin）。 让我们把padding这是为百分比时。他百分比对应的是父级的宽的比（W3C规定） 我们就实现了占位。我们需要占位的空间添加内容，这时我们就需要定位...
关于 CSS3 的一些相关知识的总结:
Wu hao's blog
05-06 219
CSS3选择器： 属性选择器：E为元素标签 [arr]为属性 "val"为属性值 ~="val"为指定词汇 {...}改变的样式 E[arr]{...} -->E[arr]用于选取带有指定属性的元素； E[arr="val"]{...} -->E[arr="val"]用于选取带有指定属性和值的元素； E[arr~="val"]{...}-->E[arr~="...
background-size:cover和background-size: contain的区别
Hiroshi's
02-01 320
对于这样的一个div: <div class="item-del"></div> .item-del{ width: 14px; height: 12px; background: url(/imgs/icon-close.png) no-repeat center; background-size: cover; flex: 1; } 如果我们设置background-size:cover: 就相当于这个背景图片在所在div的宽高范围内伸展到div的边
background:url(image/road.jpg) no-repeat center的基本用法介绍
热门推荐
MiyaWang21的博客
11-24 6万+
进行网页界面排版时，大家会经常用到background属性，写一些背景图片，颜色之类的，今天我先简单的介绍一下background属性的背景图片是什么样的效果。
css 移动端 利用padding自适应高度占位
chixunai6351的博客
03-08 442
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ 两种实现方式： <div id="container" class="placeholder"></div> 1.第...
【移动端元素按比例缩放】用Padding-buttom撑开高度
劲枫的博客
06-28 2361
 1、在说容器按比例缩放前，我们先说下图片按比例缩放。 对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放。 图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频、div元素等元素则没有这个属性。 一般在响应式中，我们会要求视频、或者一些图表、一些块元素的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值