前端页面布局常见问题汇聚

目录

一、IE8下[图片加文字]展示时自动换行的问题
二、设置了z-index无效
三、当文字超出范围时自动补...省略号
四、实现垂直居中
五、实现无缝十字边框
六、Iphone APP Webview中 A标签失效问题
七、Iphone/Android APP Webview中 H5页面与APP如何进行数据交互
八、如何能让H5页面适应所有分辨率的手机
九、IOS iphone/ipad safari/微信浏览器在input focus弹出输入法时 position:fixed失效问题
十、如何用CSS修改HTML5 input/textarea的 placeholder的文字颜色
十一、ios中input被默认加上了圆角问题
十二、marquee标签无js实现各种文字滚动代码(适用公告)
十三、修改滚动条样式

一、IE8下[图片加文字]展示时自动换行的问题

问题如下图所示：

Html代码如下：

<div class="flag">
     <img src="static/img/flags/f_2.png"> 免税仓发货 </div>

CSS样式

.flag { position: absolute; top: 10px; right: 10px;
} .flag img { width: 20px; max-width: 100%;
}

IE8下文字自动换行，其他浏览器都没问题

解决方案如下：

max-width: 100%; -> max-width: none;

二、设置了z-index无效

设置元素的样式中，position属性值为absolute、relative或fixed时，用z-index设置层叠位置才有效。且属性参数值越大，则该元素被层叠在最上面。

三、当文字超出范围时自动补...省略号

１、CSS2只能实现单行补略

overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;

2、CSS3可以实现多行补省略号,如下面3行补省略,注意控制好height与line-height

overflow: hidden;
text-overflow: ellipsis;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-line-clamp: 3;
-webkit-line-clamp: 3;
line-clamp: 3;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;

四、实现垂直居中

水平居中的话，行级元素用text-align:center；块级元素用margin:0 auto就可以实现水平居中。垂直居中则如下：

1、CSS2实现

1.1、行级元素

/**方式1**/
/**直接把父元素的height与line-height设成一样就可以**/
height:200px;
line-height: 200px;

/**方式2**/
/**父元素**/
height:200px;
/**子元素，如img图片**/
vertical-align: middle;

1.2、行级/块级通用

/**方式1用table模型**/
/*父元素*/
display: table;
/*子元素*/
display: table-cell;
vertical-align: middle;

/**方式2－绝对定位**/
/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;

/**方式3-绝对定位:等高底padding**/
/*父元素*/
position: relative;
/*子元素*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;

 

2、CSS3实现

２.１、行级/块级通用设置父元素,box-pack设置水平方向，值为start/center/end/justify；box-align设置垂直方向，值为start/center/end/baseline/stretch

/*******父元素*******/
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

 五、实现无缝十字边框

　1、用border实现，样板如下：

/***技巧就是每个框设个-1的margin***/
border: 1px solid #ddd;
margin-bottom: -1px;
margin-left: -1px;

 2、用margin实现，样板如下：

主要实现代码如下：

<div class="container">
   <div class="row clearfix">
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
   </div>
   <div class="row clearfix">
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
       <div class="column4"></div>
   </div>
</div>
<style>
/**容器,内容部分为100,其余15为margin-right**/
.container{
width:115px;
overflow:hidden;
}
/**行总长120，但可显示部分115，超出部分被hidden**/
.row {
    width: 120px;
}
/**每个25，margin-right:5**/
.column4{
    float:left;
    background-color:#fff;
    width: 25px;
    height: 25px;
    margin-right: 5px;  
    margin-bottom: 5px;  
}
</style>

 六、Iphone APP Webview中 A标签失效问题

给a标签加上手势就可以解决

a{cursor:pointer;}

 七、Iphone/Android APP Webview中 H5页面与APP如何进行数据交互

主要是APP端定义好接收事件js接口,然后H5页面调用js函数传数据（注意：APP中如果H5页面要经常与APP进行数据传递则页面中一般不用A标签，用的话也要写href="javascript:void(0)"），如下：

   <div class="item">
        <div class="img" data-url="http://www.baidu.com">
            <img src="http://www.abc.com/a.jpg">
        </div>
    </div>
    <script>
        function sendToApp(val) {//发送数据给APP var str = val;
            //console.log(str);
            inAppjs.runOnJavaScript(str);//app定义好的接收数据函数
        }
        $(document).on('click', '.img', function () {
            var url = $(this).attr('data-url');
            var _val = '{"type":2,"url":"' + url + '","value":""}';//app接收的是json格式的数据，但以string格式传送
            sendToApp(_val);
        });
    </script>

八、如何能让H5页面适应所有分辨率的手机

方式<1>、如果是viewport已经写好的旧项目，如下面的viewport已经定义好为物理宽度，不想大改，则只写media query进行修改，对设计图进行非高保真输出

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

 

    /*兼容处理*/
    @media screen and (min-width: 320px) and (max-width:359px) {
       /*下面填写iphone 4/5样式*/ 
       
    }

    @media screen and (min-width: 360px) and (max-width:374px) {
        /*下面填写其他小屏android手机样式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) {
　　  /*下面填写iphone 6样式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px) {
        /*下面填写iphone 6 plus样式*/ 
    }

方式<2>、使用起来非常顺手，用rem作为单位进行开发自适应页面，当然最好结合less或者sass进行开发，定义好pix转rem函数，不然每次都要进行单位的计算把px转换成为rem；现以UI图宽750px为例子，则可以这样进行开发，基本上对设计图进行高保真输出，但没解决多倍像素输出1px问题，但个人觉得已经够用

也是使用1比1viewport

 

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

 

JS动态设置html根元素的font-size　

!function () {
    function setMeta() {
        var isMobile = {
            UCBrowser: function () {
                return navigator.userAgent.match(/UCBrowser/i);
            },
            MicroMessenger: function () {
                return navigator.userAgent.match(/MicroMessenger/i);
            },
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iPad: function () {
                return navigator.userAgent.match(/iPad/i);
            },
            iPhone: function () {
                return navigator.userAgent.match(/iPhone/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPod|iPad/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };
        var screenW = window.screen.width,
        dpr = window.devicePixelRatio;
        if (isMobile.UCBrowser() || (isMobile.MicroMessenger() && !isMobile.iPhone())) {//手机UC或者非iphone的手机微信
            if(screenW >　610){          
            　document.querySelector('html').style.fontSize = screenW / dpr / 10 + 'px';
            }else{//针对特殊情况进行处理，如魅族手机在手机微信里面打开
            　document.querySelector('html').style.fontSize = screenW/10 + 'px';
            }           
            if (!isMobile.any()) {//电脑版的微信
                document.querySelector('html').style.fontSize = 75 + 'px';
            }
        } else if (isMobile.iPhone()) { //iphone
            document.querySelector('html').style.fontSize = screenW / 10 + 'px';

        } else if (isMobile.iPad()) {//ipad
            document.querySelector('html').style.fontSize = 75 + 'px';

        } else if (isMobile.any()) {

                 if (screenW / 10 > 70) {//Mobile QQ
                    document.querySelector('html').style.fontSize = screenW / dpr / 10 + 'px';
                 }else{
                    document.querySelector('html').style.fontSize = screenW / 10 + 'px';
                 }

        } else {
            if (window.innerWidth <= 750) {
                document.querySelector('html').style.fontSize = window.innerWidth / 10 + 'px';
            }
            else
               document.querySelector('html').style.fontSize = 75 + 'px';
        }
    }
    setMeta();
    window.onresize = function () {
        setMeta();
    }
}()

 

方式<３>、没定义Viewport情况下，则比较麻烦的要判断-webkit-min-device-pixel-ratio

/*兼容处理*/
    @media screen and (min-width: 320px) and (max-width:359px) {
       /*下面填写iphone 4/小屏android手机*/ 
       
    }
    @media screen and (min-width: 320px) and (max-width:359px) and (-webkit-min-device-pixel-ratio : 2) {
       /*下面填写iphone 4s/5/5s样式*/ 
       
    }
    @media screen and (min-width: 360px) and (max-width:374px) {
        /*下面填写360－374小屏android手机样式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) {
　　  /*下面填写375－413小屏android手机样式*/ 
    }

    @media only screen and (min-width: 375px) and (max-width:413px) and (-webkit-min-device-pixel-ratio : 2)  {
　　  /*下面填写iphone 6样式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px){
        /*下面填写414－479大屏android手机样式*/ 
    }

    @media only screen and (min-width: 414px) and (max-width:479px) and (-webkit-min-device-pixel-ratio : 3)  {
        /*下面填写iphone 6 plus样式*/ 
    }

    @media only screen and (min-width: 480px){
　　  /*下面填写其他大屏android手机样式*/ 
    }

九、IOS iphone/ipad safari/微信浏览器在input focus弹出输入法时 position:fixed失效问题

 if (navigator.userAgent.indexOf('iPhone') > -1) {//只要把position设为absolute就可以了
       $(fixedObj).css("position","absolute");
 }

十、如何用CSS修改HTML5 input/textarea的 placeholder的文字颜色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #666;
}

十一、ios中input被默认加上了圆角问题

input {
    border-radius: 0;
}

十二、marquee标签无js实现各种文字滚动代码(适用公告)

各参数详解：
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
f)loop。loop="2"滚动2次、loop="infinite"或者loop="-1"无限循环滚动
g)hspace和vspace。决定滚动矩形区域距周围的空白区域

还可以在标签内插入图片、表格、flash和marquee自身

例子如下：

　　

十三、修改滚动条样式

/**webkit浏览器**/
    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }