页面布局

1、padding-bottom实现等比例缩放

原理：
1、父元素设置定位为相对定位（position: relative）
2、子元素设置定位为绝对定位（position: absolute）
3、父元素padding-bottom值为百分比时以父元素为参考，正方形时同父元素一样的百分比。
4、子元素的绝对定位会脱离文档流，设置其width、height为100%则会同父元素保持一样的比例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale-1" />
        <title>padding-bottom实现宽高等比缩放</title>
        <style>
            .imgItem { position: relative;width: 50%;padding-bottom: 50%;margin:  20px auto; }
            .imgItem div { position: absolute;z-index: 3; width: 100%;height: 100%; }
            img { width: 100%;height: 100%;object-fit: cover; }
        </style>
    </head>
    <body>
        <div class="imgItem">
            <div><img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" /></div>
        </div>
        <div class="imgItem">
            <div><img src="http://img.cgypt.com/ad/2020052110265727783873.jpg" /></div>
        </div>
    </body>
</html>

 上述例子的简化版可如下，不必嵌套那么多元素。最重要是块级元素的高是由内容决定的。

<style>
    div {
        position: relative;
        width: 30%;
        padding-bottom: 30%;
    }
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<div>
    <img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" />
</div>

 

 2、浏览器背景色

　　浏览器背景颜色是和html设置的背景颜色是一样的，移动端页面设置背景颜色后，在PC打开web页整屏背景颜色都变了的话注意修改web页的html背景色为白色，而web页底色用body设置即可（左图为最大宽度560px的显示，右图html的背景色：#FFF000）。

 

3、position：fixed元素和表单元素

　　页面设置position:fixed，又有表单表单页面，键盘弹出页面被顶处理方式：
　　1、设置position：fixed的父元素transition：translate（0,0）；
　　2、设置position：fixed元素的width为calc（100%），因为该属性值的width会基于父元素。

　　(麻烦下次截个图，现在看着描述不知所云）

posted @ 2020-07-31 16:23  し7709  阅读(84)  评论(0)  编辑  收藏  举报