third

       一些移动端布局的细节 ，记录一下吧。

           下面为设置手机宽度和浏览器宽度一样。

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

             在移动端，所有宽度，高度都与设计稿有两倍差，所有除以二（包括字体大小）。

            在一个没有固定宽度的div里，左边是没有固定宽度的div，右边定宽。怎么实现呢？

            如下例：

                        

              右边button定宽，左边input用absolute定位，

                    设置为 left:0; right="Button的宽度"，这样浏览器宽度变小也不会影响了。

            写没有固定宽度，高度的页面 ，高度是被内容撑起来是，没有文本的时候背景颜色就变成白色。

           解决这种问题，绝对定位又上场啦~~~

                                    position:absolute;

                                   top:0;

                                  right:0;

                                  left:0;

                                   bottom:0;

  就可以搞定了。

        边距叠加：

                             如果对每个li都用一个border，那么边距叠加，解决方式

                                                    margin：-1px;

                               上述li对所有用通配选择器，对其border-bottom，border-right：1px dotted;在对右边的li用另一个类选择器，border-right:none;对下面的选择器  border-bttom:none;

                         也可以对整个ul运用，margin：-1px;

                              overflow:hidden;就可以搞定；

                       弹窗：

                            写弹窗时要有两个并行的div不在wrapper里，

                          

            

       第一个div是黑色背景，第二个是弹窗内容。这样就搞定啦 。

 

               

转载于:https://www.cnblogs.com/echo-yaonie/p/4316720.html